为网站添加 React

React 从一开始就被设计为支持渐进式采用，你可以根据需要或多或少地使用 React。无论是微前端（micro-frontends）、现有系统，还是只是尝试一下 React，都可以通过添加几行代码就能为页面添加交互式的 React 组件，并且无需使用构建工具！

一分钟内添加 React

你可以在一分钟内将 React 组件添加到现有的 HTML 页面中。使用你自己的网站或者一个空的 HTML 文件即可，你所需要的只是能联网和一个文本编辑器，例如 Notepad （或 VSCode - 请查看我们提供的如何设置 VS Code）！

第一步：在页面中添加一个 HTML 元素

在要编辑的 HTML 页面中添加一个 HTML 元素，例如带有唯一 id 属性的空的 <div> 标签，该标签用于 React 定位内容显示的位置。

你可以在 <body> 标签内的任何位置放置一个类似 <div> 的“容器”元素。React 将把该 HTML 元素内的任何内容替换掉，因此一个空标签即可。你可以根据需要在页面上放置任意多个类似的 HTML 元素。

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

<div id="component-goes-here"></div>

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

第二部：添加 script 标签

在 HTML 页面中，将以下三个文件通过 <script> 标签添加到 </body> 标签前：

react.development.js 加载 React 核心代码
react-dom.development.js 让 React 渲染 HTML 元素到 DOM 中。
like_button.js 这将是你在第三步中编写组件的地方！

Pitfall

部署到生产环境时，将 “development.js” 文件替换为 “production.min.js” 文件。

  <!-- end of the page -->
  <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>
  <script src="like_button.js"></script>
</body>

第三步：创建 React 组件

创建一个名为 like_button.js 文件并放置在 HTML 页面旁边，然后添加以下代码片段并保存文件。此代码片段定义了一个名为 LikeButton 的 React 组件。你可以在我们的指南中了解有关编写 React 组件的更多信息。

'use strict';

function LikeButton() {
  const [liked, setLiked] = React.useState(false);

  if (liked) {
    return 'You liked this!';
  }

  return React.createElement(
    'button',
    {
      onClick: () => setLiked(true),
    },
    'Like'
  );
}

第四步：将 React 组件添加到页面中

最后，在 like_button.js 文件的底部添加如下两行代码。这两行代码用于找到你在第一步中添加到 HTML 文件中的 <div> 标签，然后在其中显示 “Like” 按钮。

const domContainer = document.getElementById('component-goes-here');
ReactDOM.render(React.createElement(LikeButton), domContainer);

恭喜你！你刚刚将第一个 React 组件显示到你的网站上了！

组件可重用！

你可能希望在同一个 HTML 页面中的不同位置上显示同一个 React 组件。当页面的各个由 React 驱动的部分互相独立时，这种使用方式是最有用的。你可以放置多个容器元素并多次调用 ReactDOM.render() 来实现这一需求。

在 index.html 文件中添加一个额外的容器元素 <div id="component-goes-here-too"></div>。
在 like_button.js 文件中为新添加的容器元素添加一个的 ReactDOM.render() 调用：

ReactDOM.render(
  React.createElement(LikeButton),
  document.getElementById('component-goes-here')
);

ReactDOM.render(
  React.createElement(LikeButton),
  document.getElementById('component-goes-here-too')
);

请查看这个显示三个 “Like” 按钮并向其传递一些数据的示例！

第五步：为生产环境压缩 JavaScript 代码

未压缩的 JavaScript 代码会显著降低页面的加载时间。因此，在将网站部署到生产环境之前，最好压缩 JavaScript 代码。

如果没有压缩 JavaScript 代码的步骤，这里推荐一种方式。
如果已经有压缩步骤了，请确保部署的 HTML 加载的是以 production.min.js 结尾的 React 文件，如下所示：

<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

上述示例依赖于浏览器内置了对某些功能的支持。这就是为什么 like_button.js 文件通过一个 JavaScript 函数来告诉 React 显示什么内容：

return React.createElement('button', {onClick: () => setLiked(true)}, 'Like');

但是，React 还提供了 JSX - 一种类似 HTML 的 JavaScript 语法：

return <button onClick={() => setLiked(true)}>Like</button>;

以下两段代码是等效的。JSX 是 JavaScript 中用于书写 markup 的常用语法。许多人发现这种语法很熟悉并且有助于编写 UI 代码（包括 React 以及第三方工具库）。你可能会在其它项目中看到“散布在 JavaScript 代码中的这种 markup”！

你可以使用这个在线转换工具将 HTML 标签转换为 JSX 代码。

试用 JSX

在项目中试用 JSX 的最快方法是将 Babel 编译器与 React 和 ReactDOM 一起添加到页面的 <head> 标签中，如下所示：

<!-- ... rest of <head> ... -->

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

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

</head>
<!-- ... rest of <body> ... -->

现在，你就可以在任何 <script> 标签中使用 JSX 了，别忘了给 <script> 标签添加 type="text/babel" 属性。例如：

<script type="text/babel">
  ReactDOM.render(
  <h1>Hello, world!</h1>, document.getElementById('root') );
</script>

要将 like_button.js 转换为 JSX 语法，需要以下步骤：

在 like_button.js 文件中，替换

return React.createElement(
  'button',
  {
    onClick: () => setLiked(true),
  },
  'Like'
);

为：

return <button onClick={() => setLiked(true)}>Like</button>;

在 index.html 文件中，为加载 like_button.js 文件的 script 标签添加 type="text/babel" 属性：

<script src="like_button.js" type="text/babel"></script>

以下是一个使用 JSX 语法的 HTML 示例文件，你可以下载下来并修改、练习。

这种方式非常适合学习和创建简单的演示之用。但是，这会让你的网站速度变慢，因此 不适合用到生产环境中。当你准备继续学习时，请删除新添加的 <script> 标签以及 type="text/babel" 属性。在下一章节中，你将学到如何设置一个 JSX 预处理器并自动转换所有 <script> 标签。

添加 JSX 到项目中

将 JSX 添加到项目中并不需要复杂的工具，例如打包工具或开发服务器。添加 JSX 预处理器与添加 CSS 预处理器覅长类似。

在终端（命令行）中进入你的项目目录，粘贴并执行以下两条命令（确保你已经安装了 Node.js！）：

npm init -y （如果此命令执行失败，请参考这个修复方法）
npm install babel-cli@6 babel-preset-react-app@3

你只需要有 npm 就可以安装 JSX 预处理器了。除此以外，什么也不需要。React 和应用程序的代码都可以继续保持 <script> 标签的形式，无需任何修改。

祝贺你，你刚刚对你的项目完成了 针对生产环境的 JSX 设置。

运行 JSX 预处理器

你可以在每次保存 JSX 文件时执行预处理器，从而将 JSX 文件转换为一份新的、普通的 JavaScript 文件。

创建一个名为 src 的目录
在终端（命令行）中，运行以下命令：npx babel --watch src --out-dir . --presets react-app/prod （不需等待此命令执行完毕！此命令将为 JSX 文件启动一个自动监听器）。
将 JSX 文件 - like_button.js - 移动到新创建的 src 目录下（或者创建一个 like_button.js 文件并包含此 JSX 初始代码的文件）。

监听器将创建一个经过预处理的 like_button.js 文件，该文件中包含普通的、浏览器可执行的 JavaScript 代码。

Pitfall

如果你看到一条类似 “You have mistakenly installed the babel package” 的错误消息，有可能是你没有执行上一步。请进入同一文件夹中再次执行。

作为额外的好处，你还能使用诸如 class 之类的现代 JavaScript 语法，而不必担心旧浏览器不支持。我们刚才使用的工具叫做 Babel，你可以查看其文档以了解更多信息。

如果你适应了这些构建工具，并希望它们能为你完成更多的工作，我们在这里介绍了一些最流行和最易使用的工具链。

Deep Dive

React without JSX

最初引入 JSX 是为了让使用 React 编写组件的感觉就像写 HTML 一样。从那时起，改语法变得流行起来。但是，在某些情况下，你可能不想使用或无法使用 JSX。那么你有两个选择：

使用类似 htm 之类的 JSX 替代方案，htm 不需要编译器，而是使用 JavaScript 内置的标记模板（Tagged Templates）语法。
使用 React.createElement() 函数，该函数具有特殊结构，后面有详解。

通过使用 JSX，你可以像这样编写组件：

function Hello(props) {
  return <div>Hello {props.toWhat}</div>;
}

ReactDOM.render(<Hello toWhat="World" />, document.getElementById('root'));

而使用 React.createElement() 函数的化，你需要像这样编码：

function Hello(props) {
  return React.createElement('div', null, `Hello ${props.toWhat}`);
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

该函数接受三个参数： React.createElement(component, props, children)。以下解释器工作原理：

一个 component 参数，可以实一个代表 HTML 元素的字符串，也可以是一个函数形式的组件
一个对象，可以是任何你想传入的 props
一个对象，可以是任何子组件，例如文本字符串

如果你厌倦了输入 React.createElement()，一个常规的办法是为其赋予一个速记符：

const e = React.createElement;

ReactDOM.render(e('div', null, 'Hello World'), document.getElementById('root'));

如果将此速记符来代替 React.createElement()，就能在不使用 JSX 的情况下达成同样的便利。

Previous创建一个 React 新项目 Next设置编辑器