←React CDN链接

React 开发环境配置→

React 安装

如何在网站中 React ？

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

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

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

一分钟用上 React

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

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

步骤 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@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>

步骤 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 的更多。

：重用组件

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

注意

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

：为生产环境压缩 JavaScript

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

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

<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>

如果你没有压缩的步骤，。

可选：使用 React 和 JSX

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

const e = React.createElement;

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

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

//  "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" 。这是，你可以下载并尝试使用。

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

将 JSX 到项目

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

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

步骤 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 不是拼写 —— 它是。

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

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

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

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

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