在 HTML 中使用 CDN 编写 React 代码！🌐
这是一个常见的面试问题
React 是一个流行的 JavaScript 库，用于构建用户界面。它允许你创建可重用的组件，这些组件可以渲染数据并处理事件。然而，有时你可能希望编写一些基本的 React 代码，而无需安装任何库或使用 create-react-app（一个只需运行一条命令即可搭建现代 Web 应用的工具）。在本文中，我们将向你展示如何使用 CDN 脚本文件来实现这一点。
CDN 代表内容分发网络，它是一个服务器系统，可以根据用户的地理位置向其分发 Web 内容。CDN 脚本文件是托管在 CDN 服务器上的文件，可以通过在 HTML 文件中添加 script 标签来访问。使用 CDN 脚本文件，您无需在本地计算机上下载或安装任何内容即可使用 React。
查看cdnjs
和UNPKG上的各种库
使用CDN 导入 React
要使用 CDN 导入 React，您需要在 HTML 文件中添加两个 script 标签：一个用于 React，一个用于 ReactDOM。React 是核心库，提供创建组件和元素的功能。ReactDOM 是提供将 React 元素渲染到 DOM 的功能的库。您可以使用以下 script 标签从 unpkg（一个托管 npm 包的 CDN 服务）加载最新版本的 React 和 ReactDOM：
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/reactdom@18/umd/react-dom.development.js"></script>
因此，要使用 JS 或 React 在屏幕上渲染一些文本，我们需要在 DOM 中有一个已存在的元素。所以只需创建一个空的 div 即可。id="root"
<div id="root"></div>
现在我们已经加载了 React 和 ReactDOM，可以在 HTML 文件中编写一些基本的 React 代码了。例如，我们可以创建一个简单的组件，用于渲染一个<h1>带有文本的标签：
<script type="text/babel">
// Define a component called Greetings
function Greetings() {
return <h1>Hello readers, Thankyou for reading this blog !</h1>;
}
// Render the component to the DOM
ReactDOM.render(
<Greetings />,
document.getElementById("root")
);
</script>
我们使用type="text/babel"`<script>` 标签，它告诉浏览器将代码视为 JSX，JSX 是 JavaScript 的一种语法扩展，允许你在 React 中编写类似 HTML 的代码。大多数浏览器不支持 JSX，因此我们需要使用名为 Babel 的工具将其转换为纯 JavaScript。Babel 也可以作为 CDN 脚本文件使用，你可以将其添加到 HTML 文件中的 React 代码之前。
这将从 CDN 加载 Babel：
<script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.js"></script>
现在你已经拥有编写基本 React 代码所需的一切，无需安装任何库或使用 create-react-app。你可以保存 HTML 文件并在浏览器中打开查看结果。你应该会看到类似这样的内容：
完整代码
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script type="text/javascript" src="https://unpkg.com/babel-standalone@6/babel.js"></script>
<script type="text/babel">
// Define a component called Greetings
function Greetings() {
return <h1>Hello readers, Thankyou for reading this blog !</h1>;
}
// Render the component to the DOM
ReactDOM.render(
<Greetings />,
document.getElementById("root")
);
</script>
</body>
</html>
恭喜！您已成功使用 CDN 脚本文件编写了您的第一个基础 React 代码。您可以使用此方法来尝试 React 并学习其基础知识。
文章来源：https://dev.to/jeetvora331/write-react-code-with-cdn-in-html-56i9