返回

无需 Babel，HTML 中通过 CDN 使用 React

前端

引言

React 是一个流行的 JavaScript 库，用于构建用户界面。在构建小型项目或原型时，无需设置复杂的构建工具，直接在 HTML 中使用 CDN 来加载 React 可以非常方便。

步骤：

  1. 添加 CDN 链接： 在 <head> 部分添加以下 CDN 链接：
<script src="https://unpkg.com/react@18.2.0/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
  1. 创建 React 元素： 使用 React.createElement() 创建 React 元素。例如，要创建带有 "Hello World!" 文本的 <h1> 标签，可以使用以下代码：
const element = React.createElement("h1", null, "Hello World!");
  1. 渲染元素： 使用 ReactDOM.render() 将元素渲染到 DOM 中。例如，要将元素渲染到带有 id="root" 的 div 中，可以使用以下代码：
ReactDOM.render(element, document.getElementById("root"));

提示：

  • 确保使用正确的 React 和 ReactDOM 版本。
  • 如果需要使用 Babel，请在 CDN 链接之前添加以下脚本：
<script src="https://unpkg.com/@babel/standalone@7.18.9/babel.min.js"></script>
  • 对于更复杂的应用程序，建议使用构建工具（如 Webpack 或 Rollup）来管理依赖项和构建过程。

优点：

  • 快速简便： 无需设置复杂的构建工具，即可快速上手使用 React。
  • 跨平台： CDN 托管的 React 可在各种浏览器和设备上使用。
  • 节省空间： CDN 托管的 React 库比本地下载的小，从而节省了带宽。

局限性：

  • 版本锁定： 您受限于 CDN 上可用的 React 版本。
  • 调试困难： 由于代码不是本地加载的，调试可能会更困难。
  • 不适用于大型项目： 随着项目复杂性的增加，使用 CDN 可能变得不可行。

结论

使用 CDN 在 HTML 中使用 React 可以提供一种快速简便的方法来构建小型 React 应用程序或原型。虽然它有其优点，但对于大型或更复杂的应用程序，使用构建工具通常是更好的选择。