React页面未加载ReactDOM.render()中内容的问题求助

你的代码存在几个关键问题，导致"Hello World"无法显示：

• 根元素选择器不匹配：HTML里的根元素用的是class="root"，但JS里用document.getElementById('root')查找id为root的元素，两者不匹配。
• 浏览器无法直接解析JSX和ES模块：你直接引入了包含JSX和import语句的JS文件，浏览器本身不支持这些语法，需要引入React、ReactDOM和Babel的CDN来处理。
• script标签位置错误：script放在了root div内部，可能导致执行JS时root元素还未完全加载，或者渲染结果被覆盖。

修复后的代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Practice</title>
    <!-- 引入React和ReactDOM的CDN -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入Babel转译JSX语法 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <!-- 将class改为id，与JS中的选择器匹配 -->
    <div id="root"></div>
    <!-- 将script移到root外部，指定type为text/babel让Babel处理 -->
    <script src="../src/index.js" type="text/babel"></script>
</body>
</html>

index.js #

// 移除import语句，直接使用CDN提供的全局React、ReactDOM对象
ReactDOM.render(
  <h1>Hello World</h1>,
  document.getElementById('root')
);

修改后浏览器就能正确加载并渲染React组件：CDN提供的全局对象让你无需配置打包工具，Babel实时转译JSX语法，同时修正的选择器和脚本位置确保渲染逻辑能找到目标元素并执行。

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