在网站中添加 React

开始学习 React 进阶教程，一线大厂前端必备技能立即领取

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

React 从一开始就被设计为逐步采用，并且你可以根据需要选择性地使用 React。可能你只想在现有页面中“局部地添加交互性”。使用 React 组件是一种不错的方式。

大多数网站不是、也不需要是单页应用程序。通过仅仅几行代码并且无需使用构建工具，试试在你的网站的一小部分中使用 React。然后，你可以逐步扩展它的存在，或只将其涵盖在少数动态部件中。

一分钟用上 React
可选：使用 React 和 JSX (不需要打包工具！)

一分钟用上 React

在本小节中，我们会展示如何将 React 组件添加到现有的 HTML 页面中。你可以基于自己现有的网站，或创建一个空的 HTML 文件来练习。

不会涉及复杂的工具或安装需求 —— 完成这一节的内容，你只需要连接到网络，以及一分钟的时间。

可选：下载完整示例（2KB zipped）

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

首先，打开你想要编辑的 HTML 页面。添加一个空的 <div> 标签作为标记你想要用 React 显示内容的位置。例如：

<!-- ... 其它 HTML ... -->

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

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

提示

你可以像这样在 <body> 标签内的任意位置放置一个“容器” <div>。根据需要，你可以在一个页面上放置多个独立的 DOM 容器。它们通常是空标签 —— React 会替换 DOM 容器内的任何已有内容。

步骤 2：添加 Script 标签

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

  <!-- ... 其它 HTML ... -->

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <!-- 加载我们的 React 组件。-->
  <script src="like_button.js"></script>
</body>

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

步骤 3：创建一个 React 组件

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

查看这段入门代码并把它粘贴到你创建的文件中。

提示

这段代码定义了一个名为 LikeButton 的 React 组件。如果你还不明白这段代码的意思，不用担心 —— 我们将在后续的入门教程和核心概念中介绍 React 的构建块。目前，我们先只做到显示！

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

// ... 你粘贴的入门代码 ...

const domContainer = document.querySelector('#like_button_container');ReactDOM.render(e(LikeButton), domContainer);

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

就是这么简单！

没有第四步了。你刚刚已经将第一个 React 组件添加到你的网站中。

查看后续小节，以便查看关于集成 React 的更多提示。

查看完整的示例源码

下载完整示例（2KB zipped）

提示：重用一个组件

通常，你可能希望在 HTML 页面的多个位置展示 React 组件。下面是一个示例，它显示了三次 “Like” 按钮，并向各自传入了一些数据：

查看完整的示例源码

下载完整示例（2KB zipped）

注意

当页面中以 React 驱动的不同部分是相互独立的时候，这种策略通常非常有用。在 React 代码中，使用组件组合（component composition）来实现会更容易。

提示：为生产环境压缩 JavaScript 代码

在将你的网站部署到生产环境之前，要注意未经压缩的 JavaScript 可能会显著降低用户的访问速度。

如果你已经压缩了应用代码，如果你确保已部署的 HTML 加载了以 production.min.js 结尾的 React 版本，那么你的网站是生产就绪（production-ready）的：

<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>

如果你没有一个代码压缩的步骤，这有一个配置它的方式。

可选：使用 React 和 JSX

在上面的示例中，我们只依赖了浏览器原生支持的特性。这就是为什么我们使用了 JavaScript 函数调用来告诉 React 要显示什么：

const e = React.createElement;

// 显示一个 "Like" <button>
return e(
  'button',
  { onClick: () => this.setState({ liked: true }) },
  'Like'
);

但是，React 还提供了一种用 JSX 来代替实现的选择：

// 显示一个 "Like" <button>
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

这两段代码是等价的。虽然 JSX 完全是可选的，但是多数人觉得这样编写 UI 代码更方便 —— 无论是使用 React 还是其它库。

你可以使用在线编译器尝试 JSX。

快速尝试 JSX

在项目中尝试 JSX 最快的方法是在页面中添加这个 <script> 标签：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

现在，你可以在任何 <script> 标签内使用 JSX，方法是在为其添加 type="text/babel" 属性。这是一个使用了 JSX 的 HTML 文件的例子，你可以下载并尝试使用。

这种方式适合于学习和创建简单的示例。然而，它会使你的网站变慢，并且不适用于生产环境。当你准备好更进一步时，删除你添加的这个新的 <script> 标签以及type="text/babel" 属性。取而代之的，在下一小节中，你将设置一个 JSX 预处理器来自动转换所有 <script> 标签的内容。

将 JSX 添加到项目

将 JSX 添加到项目中并不需要诸如打包工具或开发服务器那样复杂的工具。本质上，添加 JSX 就像添加 CSS 预处理器一样。唯一的要求是你在计算机上安装了 Node.js。

在终端上跳转到你的项目文件夹，然后粘贴这两个命令：

步骤 1： 执行 npm init -y （如果失败，这是修复办法）
步骤 2： 执行 npm install babel-cli@6 babel-preset-react-app@3

提示

我们在这里使用 npm 只是用来安装 JSX 预处理器，之后你不再需要它。React 和应用程序代码都可以继续使用 <script> 标签而不做任何更改。

恭喜！你刚刚为你的项目加入了一个生产就绪（production-ready）的 JSX 配置环境。

运行 JSX 预处理器

创建一个名为 src 的文件夹并执行这个终端命令：

npx babel --watch src --out-dir . --presets react-app/prod

注意：

npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。

如果你看到一个错误消息显示为：“You have mistakenly installed the babel package”，你可能错过了上一步。在同一个文件夹中执行它，然后重试。

不要等待它运行结束 —— 这个命令启动了一个对 JSX 的自动监听器。

如果此时你用这段 JSX 入门代码创建一个 src/like_button.js 文件，监听器会创建一个预处理过的 like_button.js 文件，它包含了适用于浏览器的普通 JavaScript 代码。当你编辑带有 JSX 的源文件时，转换过程将自动重新执行。

这样，在旧浏览器上也能够使用现代 JavaScript 的语法特性，比如 class。我们刚才使用的工具叫 Babel，你可以从它的文档中了解更多。

如果你认为你已经习惯了构建工具，并希望它们能为你做更多事，下一章节描述了一些最流行和易上手的工具链。如果不使用构建工具 —— 直接以 scripts 标签的方式也可以很好地完成工作！

Is this page useful?编辑此页面