📌  相关文章
📜  react script cdn - Html (1)

📅  最后修改于: 2023-12-03 15:19:44.485000             🧑  作者: Mango

使用 React Script CDN 在 HTML 中使用 React

React Script CDN 是在 HTML 中使用 React 的最简单方法之一。在本文中，我们将介绍如何使用该 CDN 将 React 集成到您的 HTML 页面中。

步骤
第 1 步：添加 React Script CDN

首先，将以下代码片段添加到您的 HTML 页面中的 <head> 元素：

<head>
  <script src="https://cdn.jsdelivr.net/npm/react@16.14.0/umd/react.production.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/react-dom@16.14.0/umd/react-dom.production.min.js"></script>
</head>

这将向您的页面添加必要的 React 库。

第 2 步：编写 React 组件

现在，您可以编写一个简单的 React 组件。在这个示例中，我们将创建一个简单的“Hello World！”应用程序。

// 注意：使用 ReactScript CDN，您不需要使用 Babel 和 JSX
function App() {
  return <h1>Hello World!</h1>;
}

ReactDOM.render(<App />, document.getElementById('root'));
第 3 步：添加根元素

为了在您的页面上呈现 React 组件，您需要添加一个根元素。在这个示例中，我们将创建一个空的 <div> 元素，并将其赋予 id 属性为 root（类似于在 create-react-app 中找到的根元素）。

<div id="root"></div>
第 4 步：预览您的 React 应用程序

现在，您可以在浏览器中打开您的 HTML 文件，并查看您的 React 应用程序了！

结论

React Script CDN 是在 HTML 中集成 React 的快速和简单的方法之一。通过遵循本文中的步骤，您可以轻松将 React 添加到您的 HTML 页面中，并编写和显示 React 组件！