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,你可以查看 其文档 以了解更多信息。
如果你适应了这些构建工具,并希望它们能为你完成更多的工作,我们在这里介绍了一些最流行和最易使用的工具链。