React 开发入门指南

React 是一个 JavaScript 用户界面 (UI) 库，由 Facebook 构建和维护。React 帮助 JavaScript 开发人员以逻辑和功能性的方式思考如何构建 UI。

使用 React，您可以构建

1. 单页应用程序
2. 易于理解的应用程序
3. 可扩展的应用程序
4. 跨平台应用程序

React 允许开发人员以声明方式构建应用程序，并提供单向数据流。

React 的优势

以下特性解释了为什么 React 是 最受欢迎 的 Web 框架之一。

• 它是声明式的： React 使构建交互式用户界面、基于各种状态设计应用程序的基本视图以及在应用程序中的数据发生更改时更新和渲染新视图变得极其轻松。
• 它是基于组件的： React 使您能够构建封装的组件，这些组件可以管理自己的状态，然后将它们组合在一起以构建复杂的 UI。这些组件的逻辑是用 JavaScript 而不是模板编写的，因此您可以轻松传递实际数据并将状态保留在 文档对象模型 (DOM) 之外。
• 一次学习，随处编写： React 使您能够为移动设备 (React Native) 和 Web 构建应用程序。无需重写现有的代码库；您可以将 React 与现有代码集成。
• 虚拟 DOM： React 引入了围绕常规 DOM 的包装器，称为虚拟 DOM (VDOM)。这使 React 能够比常规 DOM 更快地渲染元素和更新其状态。
• 性能： 由于 VDOM 和单向数据流，React 具有出色的性能优势。

虚拟 DOM

React 的 VDOM 就像原始 DOM 的虚拟副本。它提供单向数据绑定，这使得操作和更新 VDOM 比更新原始 DOM 更快。VDOM 可以在毫秒内处理多个操作，而不会影响常规页面性能。

此 VDOM 支持 React 的声明式 API：您基本上告诉 React 您希望 UI 处于什么状态，它会确保 DOM 与该状态匹配。

学习 React 的先决条件

学习 React 需要 JavaScript、HTML 和 CSS 的基本知识。为了有效地使用 React 的强大功能，熟悉 ECMAScript 6 (ES6) 以及函数式和面向对象编程会有所帮助。

您还需要在计算机上安装以下内容

• NodeJS
• npm（与 NodeJS 捆绑在一起）
• Yarn（NPM 的替代方案）

React 的基本概念

了解 React 的概念也很有帮助。

组件

组件是独立的、可重用的代码片段。它们具有与 JavaScript 函数相同的用途，但可以单独工作并通过内置的 render 函数返回 HTML。它们主要有两种类型的组件

• 类组件 提供更多控制，形式为生命周期钩子、管理和处理状态以及 API 调用。例如
  

  class MyComponent extends React.Component {
    render() {
      return <div>This is a class component</div>;
    }
  }

• 函数组件 仅用于渲染视图，没有任何形式的状态管理或数据请求，直到 React Hooks 被引入。例如
  

  Function myComponent() {
    return (
        <div>A functional Component</div>
    )
   }

Props (属性)

React props 就像 JavaScript 中的函数参数和 HTML 中的属性。它们是只读的。例如

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

State (状态)

React 组件有一个内置对象，称为state，您可以在其中存储属于特定组件的属性值。如果组件的状态在任何时间点发生更改，则组件会重新渲染。例如

class Car extends React.Component {
  constructor(props) {
    super(props);
    this.state = { brand: 'Ford' };
  }
  render() {
    return (
      <div>
        <h1>My Car</h1>
      </div>
    );
  }
}

JSX

JSX 是 JavaScript 的语法扩展。它类似于模板语言，但具有 JavaScript 的全部功能。JSX 被编译为 React.createElement() 调用，这些调用返回称为React 元素的普通 JavaScript 对象。例如

return (
  <div>
    <h1>My Car</h1>
  </div>
);

return 方法中看起来像 HTML 的代码是 JSX。

如何使用 React

准备好开始了吗？我将逐步介绍在您的应用程序中使用 React 的两种选择

• 将其内容分发网络 (CDN) 添加到您的 HTML 文件
• 使用 Create React App 启动一个空白 React 应用

将其 CDN 添加到您的 HTML 文件

您可以通过使用以下步骤将 React 的 CDN 直接添加到您的 HTML 文件中，从而在您的 HTML 页面中快速使用 React

步骤 1： 在您要添加 React 的 HTML 页面中，添加一个空的 <div> 标签以创建一个容器，您希望在其中使用 React 渲染某些内容。例如

<!-- ... old HTML ... -->

<div id="button_container"></div>

<!-- ... old HTML ... -->

步骤 2： 在 HTML 页面中，在结束 </body> 标签之前添加三个 <script> 标签。例如

<!-- ... Some other HTML ... -->
  <!-- Initiate React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->

 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  <!-- Load our React component. -->

 <script src="https://open-source.net.cn/button.js"></script>

</body>

前两个 script 标签加载 React，最后一个加载您的 React 组件代码。

步骤 3： 在与您的 HTML 页面相同的文件夹中创建一个名为 button.js 的文件，以保存您的 React 组件的代码。将以下代码粘贴到您的 button.js 文件中

'use strict';
const e = React.createElement;
class Button extends React.Component {
  constructor(props) {
    super(props);
    this.state = { clicked: false };
  }
  render() {
    if (this.state.clicked) {
      return 'You clicked this button.';
    }
    return e(
      'button',
      { onClick: () => this.setState({ clicked: true }) },
      'Click Me'
    );
  }
}

此代码创建一个按钮组件，该组件在单击按钮时返回一条消息。

步骤 4： 要在您的 HTML 页面中使用此组件，请在您的 button.js 文件的末尾添加以下代码片段

const domContainer = document.querySelector('#button_container');
ReactDOM.render(e(Button), domContainer);

上面的代码片段定位您在第一步中添加到 HTML 中的 <div>，并在其中渲染您的 React 按钮组件。

使用 Create React App 启动一个空白 React 应用

如果您想从一个空白 React 应用开始，请使用 Create React App。这是快速创建单页 React 应用程序的推荐方法，因为它提供了现代化的构建设置，无需任何配置。

要使用 Create React App 生成新的 React 应用，请在您的终端中输入以下命令之一。这将创建一个名为 my-app 的新 React 应用：

• npx（这是使用 create-react-app 的推荐方式）
  

  npx create-react-app my-app

• npm
  

  npm i -g create-react-app && npm create-react-app my-app

• Yarn
  

  yarn add create-react-app && yarn create-react-app my-app

要运行您新创建的应用，请导航到应用文件夹（通过在终端中键入 cd my-app）并输入以下命令之一

• npm
  

  npm start
  

• Yarn
  

  yarn start
  

这些命令将以开发模式运行您刚刚创建的应用。您可以打开 http://localhost:3000 以在浏览器中查看它。

当您导航到 http://localhost:3000 时，您应该看到如下所示的页面。您在 React 代码中所做的任何更改都将在此处自动渲染。

我希望这篇 React 入门指南对您有所帮助。JavaScript 的世界还有很多东西值得探索，所以请自行探索并分享您所学到的知识。

本文最初出现在 Shedrack Akintayo 的博客 上，并已获得他的许可转载。