在网站中添加 React

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

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

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

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

一分钟用上 React

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

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

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

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

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

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

步骤 2：添加 Script 标签

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

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

步骤 3：创建一个 React 组件

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

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

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

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

就是这么简单！

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

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

查看完整的示例源码

下载完整示例（2KB zipped）

提示：重用一个组件

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

查看完整的示例源码

下载完整示例（2KB zipped）

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

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

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

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

可选：使用 React 和 JSX

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

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

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

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

快速尝试 JSX

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

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

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

将 JSX 添加到项目

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

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

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

运行 JSX 预处理器

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

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

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

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

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