React基础启动环境渲染失败：Hello World无法显示（新手求助）

问题根源 #

1. 浏览器原生不识别JSX语法：你代码里的<h1>Hello, world</h1>是React专属的JSX语法，必须经过转译才能被浏览器解析
2. 缺少核心依赖与转译配置：直接用import导入react-dom/client但未引入对应库文件，同时没有配置JSX转译工具

修复方案 #

1. 引入必要的CDN资源 #

在HTML头部添加React、ReactDOM和Babel的CDN链接，提供核心库和JSX转译能力：

<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>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

2. 修改脚本加载类型 #

将原来的type="module"改为type="text/babel"，让Babel自动处理JSX语法：

<script type="text/babel" src="../src/index.js"></script>

3. 调整JS代码 #

使用CDN引入时无需import语句，直接调用全局暴露的ReactDOM变量：

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

4. 用本地服务器运行 #

不要直接双击打开本地HTML文件，必须通过本地服务器（比如VS Code的Live Server插件）启动，避免文件协议下的资源加载限制

完整可运行代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>React</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <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>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel" src="../src/index.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

src/index.js #

const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<h1>Hello, world</h1>);

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