📅 最后修改于: 2023-12-03 15:19:43.026000 🧑 作者: Mango
React 是一个用于构建用户界面的 JavaScript 库。相比传统的 HTML、CSS 和 JavaScript 组成的网页，使用 React 构建的网页更具有交互性和实时性。
为了在 HTML 中使用 React，我们可以使用 React 的 CDN。CDN，即内容分发网络，是一种通过传输内容到离用户最近的网络边缘节点，提供高可用性、高性能的分布式网络。 使用 React 的 CDN 提供了一个简单的方式，可以无需安装 Node.js 和运行环境，即可开始使用 React。
要在 HTML 页面中使用 React，我们需要加载以下两个文件：
<!-- 加载 React 的 CDN -->
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js"></script>
<!-- 加载 React DOM 的 CDN-->
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js"></script>
我们需要在 HTML 页面中创建一个容器用于呈现 React 应用程序：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>React CDN in HTML</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script>
// 在这里编写你的 React 代码
</script>
</body>
</html>
我们将容器的 id 设置为“root”，现在我们可以在 JavaScript 中使用 React 和 ReactDOM 来呈现一个 React 应用程序。
要使用 React 渲染组件，我们可以在 JavaScript 文件中编写代码。我们需要定义一个可以呈现 React 组件的 JavaScript 函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>React CDN in HTML</title>
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script>
// 在这里定义组件
function HelloWorld() {
return (
<div>
<h1>Hello World!</h1>
<p>Let's learn React and use it with CDN!</p>
</div>
);
}
// 在这里渲染组件
ReactDOM.render(<HelloWorld />, document.getElementById("root"));
</script>
</body>
</html>
在上面的代码中，我们定义了一个名称为 HelloWorld 的组件。<HelloWorld /> 表示了我们希望将这个组件渲染到 HTML 中。在 ReactDOM.render() 中，我们将 HelloWorld 组件渲染到 id 为“root”的 HTML 元素中。
现在在浏览器中打开 HTML 文件，就能够看到 HelloWorld 组件的内容。
React CDN 为程序员提供了一种快速而简单的方式来开始学习和使用 React。 此外，它还带来了更快的加载时间，并可以通过类似于 CDN 的方式进行缓存，极大地提高了网站的性能。
希望这篇介绍能够让你更快的学会使用 React CDN。