React 安装（CDN）

如果你不希望使用 npm 或 create-react-app 来创建 React 项目，另一种简便的方式是通过 CDN（内容分发网络）来引入 React 和 React DOM。通过 CDN，你可以快速在网页中使用 React，而无需安装任何本地依赖。

目录

  1. CDN 引入 React 和 React DOM
  2. 示例：基本 React 应用
  3. 优点与缺点
  4. 常见问题
  5. 参考资料

1. CDN 引入 React 和 React DOM

你可以通过添加以下 CDN 链接来引入 React 和 React DOM：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App with CDN</title>
  <!-- 引入 React -->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!-- 引入 React DOM -->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- 引入 Babel -->
  <script src="https://unpkg.com/@babel/standalone"></script>
</head>
<body>
  <div id="root"></div>

  <!-- React 代码 -->
  <script type="text/babel">
    const element = <h1>Hello, React with CDN!</h1>;
    ReactDOM.render(element, document.getElementById('root'));
  </script>
</body>
</html>

说明：

  • React 和 React DOM：通过 <script> 标签引入 React 和 React DOM 的开发版本（react.development.js 和 react-dom.development.js），这使得你能够在浏览器中直接使用 React。
  • Babel：通过 Babel 编译器支持 JSX 语法。如果你的代码中使用了 JSX，需要引入 Babel 来即时将 JSX 语法转化为标准的 JavaScript。

2. 示例：基本 React 应用

以下是一个使用 CDN 引入 React 和 React DOM 的简单示例。它展示了如何使用 React 在浏览器中渲染一个基本的组件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App with CDN</title>
  <!-- 引入 React -->
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <!-- 引入 React DOM -->
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <!-- 引入 Babel -->
  <script src="https://unpkg.com/@babel/standalone"></script>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    // 创建 React 组件
    const Welcome = (props) => {
      return <h1>Hello, {props.name}!</h1>;
    };

    // 渲染 React 组件到 DOM
    ReactDOM.render(<Welcome name="World" />, document.getElementById('root'));
  </script>
</body>
</html>

在这个示例中：

  • Welcome 是一个简单的 React 函数组件，它接受 props 并返回一个包含 h1 标签的 JSX 元素。
  • 使用 ReactDOM.render() 方法，将 Welcome 组件渲染到页面上的 root 元素。

3. 优点与缺点

3.1 优点

  • 快速启动：无需配置包管理器（如 npm）或构建工具（如 Webpack）。你只需要一个 HTML 文件和互联网连接，便可以立即开始使用 React。
  • 适合小型项目：对于一些简单的演示、小工具或个人项目，CDN 是一个轻量级且易于实现的方式。
  • 无需安装本地依赖：你不需要管理 React 和 React DOM 的本地版本更新，也避免了本地安装时遇到的依赖冲突问题。

3.2 缺点

  • 不适合大规模项目：对于大型应用，CDN 方式不适合，因为没有现代开发工具（如 Webpack）来管理模块化、优化代码和自动化构建等。
  • 性能问题：尽管使用 CDN 可以提升加载速度，但在实际开发中，由于没有打包和压缩代码，可能会导致性能瓶颈，尤其是在大型项目中。
  • 缺乏本地开发支持：没有 npm 和 Webpack 等工具，可能无法享受到一些开发特性（如热更新、模块化等）。

4. 常见问题

4.1 问题：如何处理 JSX 语法？

由于浏览器无法直接理解 JSX 语法，因此需要使用 Babel 来实时编译 JSX。上面示例中已经引入了 Babel CDN，所以你可以直接在 <script> 标签中使用 type="text/babel"，这样 Babel 会自动处理 JSX 语法。

4.2 问题：如何使用生产版本的 React？

在生产环境中，你应该使用 React 的生产版本，这样可以提高性能并减少文件大小。你可以通过以下 CDN 链接加载生产版本的 React：

<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

生产版本被压缩，适合在生产环境中使用。

5. 参考资料

出站链接

站内链接

通过 CDN 安装 React 的方式非常适合快速开发和学习 React。如果你是在构建小型应用或进行学习和实验，CDN 是一个非常简便的选择。不过，对于大型应用和生产环境，还是推荐使用 npm 和现代构建工具来提高开发效率和性能。