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

最新推荐文章于 2024-07-27 08:17:41 发布

Q shen

最新推荐文章于 2024-07-27 08:17:41 发布

阅读量254

点赞数

文章标签： html react.js 前端

本文链接：https://blog.csdn.net/qq_52010446/article/details/132116689

版权

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

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 服务：

<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 中拥有一个现有元素。所以只需创建一个空的divid=“root”

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

带有一些文本的标签：

<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，这是 JavaScript 的语法扩展，允许您在 React 中编写类似 HTML 的代码。大多数浏览器都不支持 JSX，因此我们需要使用一个名为 Babel 的工具将其转换为纯 JavaScript。Babel 还可以作为 CDN 脚本文件使用，您可以在 React 代码之前将其添加到 HTML 文件中

这将从 CDN 加载 Babel：

现在您拥有编写基本 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>