模块化JS环境下React组件无法渲染，求问题排查与解决

问题场景 #

作为React初学者，编写第一个自定义组件后遇到空白页问题。代码如下：

index.html #

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

index.js #

import { createRoot } from 'react-dom/client';

function App() {
  return (
    <div>
        <h1>Fun Facts about React</h1>
        <ul>
            <li>Was first released in 2013.</li>
            <li>Was originally created by Jordan Walke.</li>
            <li>Has well over 100K stars on GitHub.</li>
            <li>Is maintained by Facebook.</li>
            <li>Powers thousands of enterprise apps, including mobile apps.</li>
        </ul>
    </div>
  );
}

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

环境为通过npm安装的React 18.2.0和React-DOM 18.2.0，浏览器打开后显示空白页。

错误原因 #

1. 浏览器无法直接解析ES模块与JSX：代码使用了import ES模块语法和JSX（类HTML的标签写法），普通浏览器无法直接识别这些语法，必须经过打包编译转换为原生JS。
2. 依赖未正确加载：直接引用index.js时，浏览器无法找到react-dom/client的依赖文件——npm安装的依赖存放在node_modules目录，浏览器无法直接访问该目录下的文件。

解决方法 #

方法一：使用Create React App脚手架（推荐新手） #

Create React App会自动配置打包、编译等环境，无需手动设置：

1. 执行命令创建项目：

npx create-react-app my-react-app

2. 进入项目目录：

cd my-react-app

3. 替换src/App.js中的代码为你的App组件内容
4. 启动开发服务器：

npm start

浏览器会自动打开页面，组件即可正常渲染。

方法二：使用Vite轻量构建工具 #

Vite比Create React App启动更快，适合快速开发：

1. 创建React项目：

npm create vite@latest my-react-app -- --template react

2. 进入项目并安装依赖：

cd my-react-app && npm install

3. 替换src/App.jsx中的代码为你的App组件内容
4. 启动开发服务器：

npm run dev

访问终端输出的本地地址即可看到渲染结果。

方法三：CDN临时测试（无需npm环境） #

如果只是快速验证代码正确性，可以用CDN方式直接在浏览器运行，无需打包：
修改index.html如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
    <!-- 引入React和ReactDOM的开发版CDN -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- 引入Babel处理JSX语法 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <!-- 脚本类型改为text/babel，让Babel处理JSX -->
    <script type="text/babel">
        const { createRoot } = ReactDOM;

        function App() {
          return (
            <div>
                <h1>Fun Facts about React</h1>
                <ul>
                    <li>Was first released in 2013.</li>
                    <li>Was originally created by Jordan Walke.</li>
                    <li>Has well over 100K stars on GitHub.</li>
                    <li>Is maintained by Facebook.</li>
                    <li>Powers thousands of enterprise apps, including mobile apps.</li>
                </ul>
            </div>
          );
        }

        const root = createRoot(document.getElementById('root'));
        root.render(<App />);
    </script>
</body>
</html>

直接在浏览器打开修改后的index.html，即可看到组件渲染效果。

内容的提问来源于stack exchange，提问作者Kshitij Saraogi