给网站添加React
您不必使用 React 构建整个网站。 将 React 添加到 HTML 不需要安装，只需一分钟，让您立即开始编写交互式组件。
内容预告
- 如何在一分钟内将 React 添加到 HTML 页面
- 什么是 JSX 语法以及如何快速试用它
- 如何为生产设置 JSX 预处理器
一分钟添加React
React 从一开始就被设计为逐步采用。 大多数网站不是（也不需要）完全使用 React 构建的。 本指南展示了如何向现有 HTML 页面添加一些“互动性碎片”。
用您自己的网站或一个空的 HTML 文件试试这个。 您只需要一个互联网连接和一个文本编辑器，如记事本或 VSCode。 （这里是如何为语法高亮配置你的编辑器！）
第一步：添加root标签
首先，打开要编辑的 HTML 页面。 添加一个空的 <div> 标签来标记您想要使用 React 显示内容的位置。 给这个 <div> 一个唯一的 id 属性值。 例如：
<!-- ... existing HTML ... -->
<div id="like-button-root"></div>
<!-- ... existing HTML ... -->
它被称为“根”，因为它是 React 树开始的地方。 您可以将这样的根 HTML 标记放置在 <body> 标记内的任何位置。 将其留空，因为 React 将用您的 React 组件替换其内容。
您可以在一个页面上拥有任意数量的root标签。
第二步：添加script标签
在 HTML 页面中，就在结束 </body> 标记之前，为以下文件添加三个 <script> 标记：
react.development.js 让你定义 React 组件。
react-dom.development.js 让 React 将 HTML 元素渲染到 DOM。
like-button.js 是您将在下一步中编写组件的地方！
您的 HTML 现在应该像这样结束：
<!-- end of the page -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="like-button.js"></script>
</body>
</html>
“陷阱
在部署到实时网站之前，请确保将 development.js 替换为 production.min.js！ React 的开发版本提供更多有用的错误消息，但会大大降低您的网站速度。
第三步：创建一个React组建
在您的 HTML 页面旁边创建一个名为 like-button.js 的文件，添加此代码片段，然后保存该文件。 此代码定义了一个名为 LikeButton 的 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'
);
}
第四步：添加组件到你的页面
最后，在 like-button.js 的底部添加三行。 这几行代码找到你在第一步添加到 HTML 中的 <div>，创建一个 React root，然后在其中显示“Like”按钮 React 组件：
const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));
恭喜！ 您刚刚将您的第一个 React 组件渲染到您的网站！
你可以复用组件
您可能希望在同一 HTML 页面的多个位置显示 React 组件。 如果页面的 React 驱动部分彼此分离，这将很有用。 您可以通过在 HTML 中放置多个根标签，然后使用 ReactDOM.createRoot() 在每个根标签中渲染 React 组件来实现。 例如：
1.在 index.html 中，添加一个额外的容器元素 <div id="another-root"></div>。
2.在 like-button.js 中，在最后添加三行：
const anotherRootNode = document.getElementById('another-root');
const anotherRoot = ReactDOM.createRoot(anotherRootNode);
anotherRoot.render(React.createElement(LikeButton));
如果你需要在很多地方渲染相同的组件，你可以为每个根分配一个CSS类而不是id，然后找到它们。 这是一个显示三个“喜欢”按钮并将数据传递给每个按钮的示例。
第五步：为生产压缩 JavaScript
未压缩的 JavaScript 会显着降低用户的页面加载时间。 在将您的网站部署到生产环境之前，最好缩小其脚本。
- 如果您的脚本没有缩小步骤，这里有一种设置方法。
- 如果您已经缩小了您的应用程序脚本，并且您确保部署的 HTML 加载以 production.min.js 结尾的 React 版本，那么您的站点将可以投入生产，如下所示：
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/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 中的标记。 许多人发现它对编写 UI 代码很熟悉并且很有帮助——无论是使用 React 还是其他库。
您可以尝试使用此在线转换器将 HTML 标记转换为 JSX。
试用JSX
尝试 JSX 的最快方法是将 Babel 编译器作为 <script> 标记添加到页面。 放在 like-button.js 之前，然后在 like-button.js 的 <script> 标签中添加 type="text/babel" 属性：
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="like-button.js" type="text/babel"></script>
</body>
现在你可以打开 like-button.js 并替换
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
为等价的JSX代码：
return (
<button onClick={() => setLiked(true)}>
Like
</button>
);
一开始将 JS 与标记混合在一起可能会觉得有点不寻常，但它会在你身上成长！ 查看在 JSX 中编写标记以获取介绍。 这是一个带有 JSX 的示例 HTML 文件，您可以下载并使用它。
“陷阱
Babel <script> 编译器非常适合学习和创建简单的演示。 但是，它会使您的网站变慢并且不适合生产。 当您准备好继续前进时，删除 Babel <script> 标签并删除您在此步骤中添加的 type="text/babel" 属性。 相反，在下一节中，您将设置一个 JSX 预处理器以将所有 <script> 标记从 JSX 转换为 JS。
将JSX添加到项目
将 JSX 添加到项目中不需要像捆绑器或开发服务器这样的复杂工具。 添加 JSX 预处理器很像添加 CSS 预处理器。
转到终端中的项目文件夹，并粘贴这两个命令（确保安装了 Node.js！）：
- npm init -y（如果失败，这里有一个修复）
- npm install @babel/cli@7 babel-preset-react-app@10
你只需要 npm 来安装 JSX 预处理器。 您将不需要它来做任何其他事情。 React 和应用程序代码都可以保留为 <script> 标签而无需更改。
恭喜！ 您刚刚向您的项目添加了一个生产就绪的 JSX 设置。
运行JSX预处理器
您可以预处理 JSX，以便每次保存包含 JSX 的文件时，转换都会重新运行，将 JSX 文件转换为浏览器可以理解的新的纯 JavaScript 文件。 设置方法如下：
- 创建一个名为 src 的文件夹。
- 在您的终端中，运行此命令：
npx babel --watch src --out-dir 。 --presets babel-preset-react-app/prod（不要等它完成！这个命令会启动一个自动观察器来编辑 src 中的 JSX。） - 将你的 JSX 化的
like-button.js（它应该看起来像这样！）移动到新的 src 文件夹。
自动观察器将创建一个预处理过的like-button.js，里面完全符合浏览器的是纯JavaScript代码。
“陷阱
如果你看到一条错误消息说“你错误地安装了 babel 包”，你可能错过了上一步。 在同一文件夹中执行上一步，然后重试。
您刚刚使用的工具称为 Babel，您可以从其文档中了解更多信息。 除了 JSX 之外，它还允许您使用最新的 JavaScript 语法功能，而不必担心违背旧浏览器。
如果您对构建工具感到满意并希望它们为您做更多事情，我们将在此处介绍一些最流行且易于使用的工具链。
!深度探索：不用JSX的React
最初引入 JSX 是为了让使用 React 编写组件感觉就像编写 HTML 一样熟悉。 从那时起，语法就变得普遍了。 但是，在某些情况下您可能不想使用或不能使用 JSX。 你有两个选择：
- 使用 JSX 替代方案，如 htm，它使用 JavaScript 模板字符串而不是编译器。
- 使用具有下面解释的特殊结构的 React.createElement()。
使用 JSX，你可以像这样编写一个组件：function Hello(props) { return <div>Hello {props.toWhat}</div>; } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Hello toWhat="World" />, );使用 React.createElement()，你可以这样写：
function Hello(props) { return React.createElement('div', null, 'Hello ', props.toWhat); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render( React.createElement(Hello, { toWhat: 'World' }, null) );它接受几个参数：React.createElement(component, props, ...children)。
他们是这样工作的：
- 组件，可以是代表 HTML 元素的字符串，也可以是函数组件
- 您要传递的任何props的对象
- 剩下的是组件可能具有的子元素，例如文本字符串或其他元素
如果你厌倦了输入 React.createElement()，一种常见的模式是设置一个短名字：
const e = React.createElement; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(e('div', null, 'Hello World'));这样，如果你喜欢这种风格，它可以像 JSX 一样方便。
网友评论