React17 安装

在网站中添加 React

可以根据需要选择性地使用 React。

只想在现有页面中“局部地添加交互性”。使用 React 组件是一种不错的方式。

步骤 1： 添加一个 DOM 容器到 HTML

1
2
3
<!-- ... 其它 HTML ... -->
<div id="like_button_container"></div>
<!-- ... 其它 HTML ... -->

我们给这个 <div> 加上唯一的 id HTML 属性。这将允许我们稍后用 JavaScript 代码找到它，并在其中显示一个 React 组件。

步骤 2：添加 Script 标签

在 </body> 结束标签之前，向 HTML 页面中添加三个 <script> 标签：

1
2
3
4
5
6
7
 <!-- ... 其它 HTML ... -->
  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "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>
  <!-- 加载我们的 React 组件。-->
  <script src="like_button.js"></script>
</body>

前两个标签加载 React。第三个将加载你的组件代码。

步骤 3：创建一个 React 组件

在 HTML 页面文件的同级目录下创建一个名为 like_button.js 的文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            liked: false
        };
    }

    render() {
        if (this.state.liked) {
            return 'You liked this.';
        }

        return e(
            'button', {
                onClick: () => this.setState({
                    liked: true
                })
            },
            'Like'
        );
    }
}

在 like_button.js 的底部，加入以下两行代码。

这两行代码会找到我们在步骤 1 中添加到 HTML 里的 <div>，然后在它内部显示我们的 React 组件 “Like” 按钮。

创建新的 React 应用

介绍一些流行的 React 工具链，它们有助于完成如下任务：

  • 扩展文件和组件的规模。
  • 使用来自 npm 的第三方库。
  • 尽早发现常见错误。
  • 在开发中实时编辑 CSS 和 JS。
  • 优化生产输出。

React 团队主要推荐这些解决方案：

  • 如果你是在学习 React 或创建一个新的单页应用，请使用 Create React App。
  • 如果你是在用 Node.js 构建服务端渲染的网站，试试 Next.js。
  • 如果你是在构建面向内容的静态网站，试试 Gatsby。
  • 如果你是在打造组件库或将 React 集成到现有代码仓库，尝试更灵活的工具链。

Create React App

Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。

它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。你需要在你的机器上安装 Node >= 8.10 和 npm >= 5.6。要创建项目，请执行：

1
2
3
npx create-react-app my-app
cd my-app
npm start