为网站添加 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> 标签前:

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() 来实现这一需求。

  1. index.html 文件中添加一个额外的容器元素 <div id="component-goes-here-too"></div>
  2. 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 语法,需要以下步骤:

  1. like_button.js 文件中,替换
return React.createElement(
  'button',
  {
    onClick: () => setLiked(true),
  },
  'Like'
);

为:

return <button onClick={() => setLiked(true)}>Like</button>;
  1. 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):

  1. npm init -y (如果此命令执行失败,请参考这个修复方法
  2. npm install babel-cli@6 babel-preset-react-app@3

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

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

运行 JSX 预处理器

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

  1. 创建一个名为 src 的目录
  2. 在终端(命令行)中,运行以下命令:npx babel --watch src --out-dir . --presets react-app/prod (不需等待此命令执行完毕!此命令将为 JSX 文件启动一个自动监听器)。
  3. 将 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