React 使用 CDN 引入与模块打包-「好主机」

首页 / 日本VPS推荐 / 正文

React 使用 CDN 引入与模块打包

Time：2024年11月30日 Read：10 评论：42 作者：y21dr45

背景介绍

React 使用 CDN 引入与模块打包

在现代前端开发中，React 是一个广泛使用的 JavaScript 库，它允许开发者构建动态的用户界面和单一应用，在实际开发过程中，我们通常会通过 npm 包管理器来安装 React 及其依赖项，在一些特定场景下，例如快速原型制作或简单的静态网页，直接通过 CDN（内容分发网络）引入 React 会更加方便快捷。

CDN 引入 React 的优势

1、快速设置：无需配置 npm 或 yarn 环境，只需在 HTML 文件中添加几行代码即可开始使用 React。

2、减少构建时间：对于小型项目或演示来说，不需要等待 npm 包的下载和构建过程。

3、全球访问加速：CDN 可以加速资源加载速度，提高网站性能。

如何通过 CDN 引入 React

1. 引入 React 和 ReactDOM

我们需要在 HTML 文件中通过<script> 标签引入 React 和 ReactDOM，推荐使用 https://unpkg.com/ 提供的 CDN 链接。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React CDN Example</title>
</head>
<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <!-- Babel Standalone for JSX transform -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</body>
</html>

创建根组件并渲染到页面

我们可以在 HTML 文件中定义一个简单的 React 组件，并将其渲染到页面上，这里我们使用type="text/babel" 使浏览器知道这是一个需要 Babel 转换的 JSX 代码块。

<script type="text/babel">
    const { useState } = React;
    function App() {
        const [count, setCount] = useState(0);
        return (
            <div>
                <h1>Hello, React with CDN!</h1>
                <p>Current count: {count}</p>
                <button onClick={() => setCount(count + 1)}>Increment</button>
            </div>
        );
    }
    ReactDOM.render(<App />, document.getElementById('root'));
</script>

完整示例

以下是一个完整的 HTML 文件示例，展示了如何使用 CDN 引入 React 并创建一个基本的计数器应用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React CDN Example</title>
</head>
<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        const { useState } = React;
        function App() {
            const [count, setCount] = useState(0);
            return (
                <div>
                    <h1>Hello, React with CDN!</h1>
                    <p>Current count: {count}</p>
                    <button onClick={() => setCount(count + 1)}>Increment</button>
                </div>
            );
        }
        ReactDOM.render(<App />, document.getElementById('root'));
    </script>
</body>
</html>

通过 CDN 引入 React 是一种快速且便捷的方法，适用于简单的项目或快速原型制作，虽然这种方法不适合大型项目或需要复杂构建配置的应用，但它确实为开发者提供了一种灵活的选择，了解如何通过 CDN 引入 React 也有助于深入理解 React 的工作原理和模块化开发的概念。

根据具体需求选择合适的工具和方法，可以在保证开发效率的同时，也能确保应用的性能和可维护性，希望本文能帮助你更好地理解和应用 React 的 CDN 引入方式，为你的项目带来更多的便利和灵活性。

原文链接：https://www.asoulu.com/post/96633.html

上一篇：内容分发网络（CDN）调研报告，cdn行业研报

下一篇：Vue引入CDN指南，vue引入cdn 的js

标签： react import cdn

创建根组件并渲染到页面

完整示例

1. 引言