在 HTML 中使用 CDN 编写 React 代码！

￡神魔★判官ぃ 2023-10-14 13:58 34阅读 0赞

### 标题这是一个流行的面试问题 ###

React 是一个流行的 JavaScript 库，用于构建用户界面。它允许您创建可以呈现数据和处理事件的可重用组件。但是，有时您可能想编写一些基本的 React 代码，而不安装任何库或使用 create-react-app，这是一种通过运行一个命令来设置现代 Web 应用程序的工具。在本文中，我们将向您展示如何使用 CDN 脚本文件来做到这一点。

CDN 代表内容交付网络，它是一个服务器系统，可根据用户的地理位置向用户交付 Web 内容。CDN 脚本文件是托管在 CDN 服务器上的文件，可以通过向 HTML 文件添加脚本标签来访问。通过使用 CDN 脚本文件，您可以使用 React，而无需在本地计算机上下载或安装任何内容。

在cdnjs  
和UNPKG上查看各种库

导入 React with CDN  
要将 React 与 CDN 结合使用，您需要在 HTML 文件中添加两个脚本标签：一个用于 React，一个用于 ReactDOM。React 是提供创建组件和元素功能的核心库。ReactDOM 是提供将 React 元素渲染到 DOM 的功能的库。您可以使用以下脚本标签从 unpkg 加载最新版本的 React 和 ReactDOM，unpkg 是托管 npm 包的 CDN 服务：

因此，要使用 JS 或 React 在屏幕上渲染一些文本，我们需要在 DOM 中拥有一个现有元素。所以只需创建一个空的divid=“root”

现在我们已经加载了 React 和 ReactDOM，我们可以在 HTML 文件中编写一些基本的 React 代码。例如，我们可以创建一个简单的组件来呈现

## 带有一些文本的标签： ##

我们使用type="text/babel"script 标签，它告诉浏览器将代码视为 JSX，这是 JavaScript 的语法扩展，允许您在 React 中编写类似 HTML 的代码。大多数浏览器都不支持 JSX，因此我们需要使用一个名为 Babel 的工具将其转换为纯 JavaScript。Babel 还可以作为 CDN 脚本文件使用，您可以在 React 代码之前将其添加到 HTML 文件中

这将从 CDN 加载 Babel：

现在您拥有编写基本 React 代码所需的一切，无需安装库或使用 create-react-app。您可以保存 HTML 文件并在浏览器中打开它以查看结果。你应该看到这样的东西：

![b9fb20cbd9484b229a7d3be808364da5.png][]

完整代码

<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 并了解其基础知识。

[b9fb20cbd9484b229a7d3be808364da5.png]: https://img-blog.csdnimg.cn/b9fb20cbd9484b229a7d3be808364da5.png