将 React 添加到网站

根据需要随心所欲的使用 React 。

React 从一开始就被设计为逐步采用，并且 你可以根据需要随心所欲的使用 React。也许你只想添加一些 “交互性” 到现有页面。 React组件是一个很好的方法。

大多数网站不是，也不需要是单页应用程序。 几行代码并且不需要构建工具 ，尝试在您的网站的一小部分中使用 React 。然后你可以逐渐扩大其存在，或者将其保存到一些动态小部件中。

在一分钟内添加 React
可选:尝试通过 JSX 使用 React (没必要的打包器！)

在一分钟内添加 React

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

这样不会有复杂的工具或安装要求 — 你只需要可以上网，一分钟你的时间，就能完成本节。

可选：下载完整示例（压缩后 2KB）

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

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

<!-- ... existing HTML ... -->

<div id="like_button_container"></div>

<!-- ... existing HTML ... -->

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

Tip

您可以在 <body> 标签内的任意位置放置一个 <div> “容器”。根据需要，您可以在一个页面上拥有多个独立的 DOM 容器。他们通常是空标签 — React 将替换 DOM 容器内的任何现有内容。

第2步：添加 Script 标签

接下来，在闭合的 </body> 标签之前，向 HTML 页面添加三个 <script> 标签：

  <!-- ... other 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 的文件。

打开 此初始代码 并将其粘贴到您创建的文件中。

提示：

这段代码定义了一个名为LikeButton的 React 组件。如果你还不明白这段代码的意思，不要担心 - 我们将在后面的动手教程和主要概念指南中介绍 React 的构建块。现在，让我们把它显示在屏幕上！

加完 初始代码 后，在like_button.js 的底部添加以下两行代码：

// ... 你粘贴的初始代码 ...

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

这两行代码找到了我们在第1步中，添加到HTML中的 <div> ，然后在其中显示我们的 “Like” 按钮 React 组件。

就是这么简单！

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

查看下一节，了解有关集成 React 的更多提示。

查看完整的示例源代码

下载完整示例（压缩后2KB）

提示：重复使用组件

通常，您可能希望在 HTML 页面的多个位置显示 React 组件。下面是一个例子，它显示了三次 “Like” 按钮并将一些数据传递给它：

查看完整的示例源代码

下载完整示例（压缩后2KB）

注意

这种策略通常非常有用，而且页面的 React 展示部分是相互隔离的。在 React 代码中，使用component composition（组合组件）会更容易。

提示：为生产环境压缩 JavaScript

在将您的网站部署到生产之前，请注意，未压缩的 JavaScript 可能会显着减慢用户的页面速度。

如果您已经压缩了应用程序脚本，那么 您的网站将生产就绪 ，请确保已部署的 HTML 加载了以 production.min.js 结尾的 React 版本：

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

如果你的脚本没有压缩步骤，这是设置它的另一种方法。

可选:尝试通过 JSX 使用 React

在上面的例子中，我们只依赖浏览器原生支持的功能。下面的代码是我们使用 JavaScript 函数调用来告诉 React 要显示的内容：

const e = React.createElement;

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

但是，React 还提供了一个使用 JSX 的选项：

// Display a "Like" <button>
return (
  <button onClick={() => this.setState({ liked: true })}>
    Like
  </button>
);

这两个代码片段是等同的。虽然 JSX 是完全可选，但是许多人认为它有助于编写UI代码 - 无论是使用 React 还是其他库。

您可以使用此在线转换器来玩玩 JSX 。

将 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> 标签而不做任何更改。

恭喜！您只需将 生产就绪 JSX 安装程序 添加到您的项目中即可。

运行JSX预处理器

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

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

注意：

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

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

不需要等待它完成 - 此命令是启动 JSX 的自动观察器。

如果你现在用这个 JSX入门代码 创建一个src/like_button.js 文件，观察器将使用适合浏览器的普通 JavaScript 代码创建一个预处理的 like_button.js 。当您使用 JSX 编辑源文件时，该转换将自动重新运行。

还有一个福利，这也可以让你使用现代 JavaScript 语法功能，如 classes ，而不用担心在旧的浏览器上的兼容性。我们刚刚使用 Babel 工具，您可以从其文档了解更多信息。

如果你注意到你已经习惯了构建工具，并希望他们为你做更多的事情，下一节描述了一些最流行和容易上手的工具链。如果不使用构建工具 - 那些脚本标签就可以做得很好！

Edit this page