React项目运行后显示空白页而非Hello World，求原因解析

问题根源 #

你的代码存在三个关键问题：

• ReactDOM API版本不兼容：你导入了react-dom/client（React 18+的新API），但仍使用旧版的ReactDOM.render方法，新API需要先创建root实例再调用render。
• 浏览器无法处理JSX和ES模块：直接在HTML中引入JSX文件，浏览器既不识别text/JSX类型，也无法解析import语句，需要依赖React环境并处理JSX转译。
• 脚本加载顺序错误：脚本放在root元素之前，执行时document.getElementById('root')会返回null，无法挂载React元素。

修复后的代码 #

HTML文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>React App</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>
    <!-- 脚本放在root元素之后，type设为text/babel让Babel处理JSX -->
    <script src="../src/index.js" type="text/babel"></script>
  </body>
</html>

index.js文件

// React 18+的正确渲染方式
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<h1>Hello World!</h1>);

补充说明 #

如果不想用CDN，建议使用官方的create-react-app脚手架搭建项目，它会自动配置好JSX转译、模块解析等环境，避免手动配置的麻烦。

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