02. 初探 React：纯 React 与现代工具的对比

在开始使用任何现代前端框架之前，了解其核心原理是非常有价值的。今天，我要和大家分享如何不依赖任何现代工具链，直接在普通 HTML 文件中编写 React 代码 —— 这就是所谓的”纯 React”。 通过这个简单的实验，你将会理解为什么现代构建工具对 React 开发如此重要！

（这个实验只是简单演示，里面的代码不理解没关系，后面会通过现代工具来构建 React 应用的时候详细讲解知识点。）

搭建基础项目

首先，让我们随便创建一个项目文件夹，并在 VS Code 中打开它。然后，创建一个 index.html 文件，并添加基本的 HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello React!</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

这里我们添加了一个 id=”root” 的 div 元素，它将作为我们 React 应用的容器。

添加 React 库

纯 React 的方式是通过 script 标签引入 React 库。我们需要添加两个脚本

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

这里包含了两个不同的库：

• react.development.js – 核心 React 库，处理组件、状态和所有 React 相关的功能
• react-dom.development.js – 渲染层，负责将 React 组件渲染到 DOM 中

创建第一个组件

接下来，我们在 body 标签的末尾添加另一个 script 标签，并创建我们的第一个组件：

<script>
    function App() {
        return React.createElement(
            'header',
            null,
            'Hello React!'
        );
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(React.createElement(App));
</script>

这里我们做了几件事：

1. 创建了一个名为 App 的函数组件
2. 使用 React.createElement 方法创建了一个 header 元素
3. 使用 ReactDOM.createRoot 选择了我们的 root div
4. 使用 root.render 将 App 组件渲染到页面上

当我们在浏览器中打开这个 HTML 文件时，应该能看到页面上显示了”Hello React!”。

添加动态内容：时钟组件

让我们把这个简单的组件升级为一个实时时钟：

<script>
    function App() {
        const [time, setTime] = React.useState(new Date().toLocaleTimeString());
        
        React.useEffect(() => {
            setInterval(() => {
                setTime(new Date().toLocaleTimeString());
            }, 1000);
        }, []);
        
        return React.createElement(
            'header',
            null,
            `It's ${time}`
        );
    }

    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(React.createElement(App));
</script>

在这个升级版本中，我们:

1. 使用 React.useState 创建了一个 time 状态和 setTime 更新函数
2. 使用 React.useEffect 和 JavaScript 的 setInterval 每秒更新一次时间
3. 在渲染的内容中使用模板字符串显示当前时间

打开控制台查看最终效果⬇️

为什么现代工具很重要

你可能已经注意到，即使对于这个简单的时钟组件，代码也变得有点复杂和难以阅读。在实际开发中，我们不会这样编写 React 代码，原因很多：

1. 没有 JSX 支持 – 我们不得不使用 React.createElement 而不是更直观的 HTML 语法
2. 没有模块化 – 所有代码都必须放在一个文件中
3. 没有自动刷新 – 每次修改代码后都需要手动刷新页面
4. 没有构建优化 – 生产环境下的性能优化无法实现

这就是为什么在实际开发中，我们会使用像 Create React App、Vite 或 Next.js 这样的现代工具来构建 React 应用。

总结

通过这个简单的”纯 React”实验，我们了解了 React 的基本原理，并体验了不使用现代工具进行 React 开发的挑战。虽然这种方式在实际开发中并不实用，但它帮助我们更好地理解了 React 的本质和现代工具链的价值。