React.js入门

最新推荐文章于 2024-09-27 10:11:28 发布

cune1359

最新推荐文章于 2024-09-27 10:11:28 发布

阅读量160

点赞数

文章标签： python java javascript html vue ViewUI

React.js是一个灵活的，基于组件的 JavaScript库，用于构建交互式用户界面 。它由Facebook创建和开源 ，并被Dropbox，AirBnB，PayPal和Netflix等许多领先的科技公司所使用。 React允许开发人员创建大量数据的应用程序 ，只需重新渲染必要的组件即可轻松地对其进行更新。

React是MVC软件设计模式中的View层 ，它主要关注DOM操作 。这些天来，每个人都在谈论React，在这篇文章中，我们正在研究如何开始使用它 。

安装React

您可以使用npm软件包管理器安装React，也可以通过将必需的库手动添加到HTML页面来安装。建议将React与Babel结合使用，以使您可以在React代码中使用ECMAScript6语法和JSX 。

如果要手动安装React ，官方文档建议使用此HTML文件 。您可以通过单击浏览器中的File > Save Page As...菜单来下载页面。您将需要的脚本（React，React DOM，Babel）也将下载到react-example_files/文件夹中。然后，将以下脚本标记添加到HTML文档的<head>部分：

<script src="react-example_files/react.js"></script>
 <script src="react-example_files/react-dom.js"></script>
 <script src="react-example_files/babel.js"></script>

除了下载它们，您还可以从CDN添加React脚本。

<script src="https://unpkg.com/react@15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>

您还可以使用上述JavaScript文件的简化版本 ：

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

如果您宁愿使用npm安装React ，最好的方法是使用Facebook Incubator创建的Create React App Github存储库-这也是React文档推荐的解决方案。除了React，它还包含Webpack，Babel，Autoprefixer，ESLint和其他开发人员工具 。要开始使用，请使用以下CLI命令：

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

准备就绪后，您可以在localhost:3000 URL上访问新的React应用程序 ：

如果您想了解有关如何安装React的更多信息 ，请查看文档的安装指南 。

React和JSX

尽管不是强制性的，但是您可以在React应用程序中使用JSX语法 。 JSX代表JavaScript XML ，并且可以转换为常规JavaScript 。 JSX的最大优点是，它使您可以在JavaScript文件中包含HTML ，因此使定义React元素更加容易。

以下是有关JSX的最重要的知识：

以小写字母 （小写驼峰字母） 开头的标签呈现为常规HTML元素 。
以大写字母 （大写驼峰字母） 开头的标签呈现为React组件 。
用花括号{…}编写的任何代码都将解释为文字JavaScript 。

如果您想了解更多关于如何在React中使用JSX的信息，请从文档中查看此页面，有关默认的JSX文档，您可以查看JSX Wiki 。

创建React元素

React具有基于组件的架构 ，开发人员可以在其中创建可重用的组件以解决不同的问题。 React组件由一些或许多React元素组成 ，这些元素是React应用程序的最小单元 。

在下面，您可以看到一个React元素的简单示例，该示例向HTML页面添加了Click me按钮。在HTML中，我们添加一个带有"myDiv" ID的<div>容器，该容器将使用React元素填充 。我们在</body>标记之前的<script>标记内创建React元素。请注意，如果要使用JSX语法 ，则需要添加type="text/babel"属性，以使Babel进行编译 。

<body>
 <div id="myDiv"></div>

 <script type="text/babel">
   ReactDOM.render(
     <button>Click me</button>,
     document.getElementById('myDiv')
   );
 </script>
</body>

我们使用带有两个必需参数的ReactDOM.render()方法渲染React元素，即React元素 （ <button>Click me</button> ） 及其容器 （ document.getElementById('myDiv') ）。您可以在文档的“渲染元素”部分中阅读有关React元素如何工作的更多信息。

创建组件

React组件是可重用的独立UI单元 ，您可以在其中轻松地更新数据。一个组件可以由一个或多个React元素组成。道具是可用于将数据传递到组件的任意输入 。 React组件的工作方式类似于JavaScript函数-每次被调用时，它都会生成某种输出 。

您可以使用经典函数语法或新的ES6类语法来定义React组件 。在本文中，我将使用后者，因为Babel允许我们使用ECMAScript6。如果您对如何在没有ES6的情况下创建组件感兴趣，请查看文档的“ 组件和道具”页面。

在下面，您可以看到我们将创建的简单React组件作为示例。这是用户登录网站后看到的基本通知。三种数据会因大小写而异 ：用户名，消息数和通知数，我们将这些数据作为props传递。

每个React组件都是一个JavaScript类，该类扩展了React.Component基类 。我们的组件将称为Stats因为它为用户提供了基本的统计信息。首先，我们使用class Stats extends React.Component{…}语法创建Stats类 ，然后通过调用ReactDOM.render()方法（在上一节中已使用后者ReactDOM.render() 将其呈现到屏幕上。

class Stats extends React.Component {
  render() {
    return(
       <p className="summary">
         Hi {this.props.name}, you have {this.props.notifications}
         new notifications and {this.props.messages} new messages.
       </p>
    );
  }
}

ReactDOM.render(
  <Stats name="John Doe" notifications={5} messages={2} />,
  document.getElementById("myStats")
);

ReactDOM.render()方法的第一个参数包括我们的React组件的名称 （ <Stats /> ）以及其属性（ name ， notifications和messages ）及其值。当我们声明道具的值时，字符串要用引号引起来 （例如"John Doe" ），而数值要放在大括号中 （例如{3} ）。

请注意，由于使用JavaScript，我们使用className而不是class来将class属性传递给HTML标记（ className="summary" ）。

匹配HTML页面如下：

<html>
 <head>
  <meta charset="utf-8">
  <script src="vendors/react.js"></script>
  <script src="vendors/react-dom.js"></script>
  <script src="vendors/babel.js"></script>
 </head>
 <body>
   <div id="myStats"></div>
   <script type="text/babel" src="component.js"></script>
 </body>
</html>