本文详解在不使用构建工具（如 vite、webpack）的前提下，通过 cdn 引入 react 18 和 babel standalone，在静态 html 中成功渲染 jsx 组件的关键步骤与常见误区。
要在纯 HTML 页面中运行 React 组件（即“CDN 模式”），必须满足三个核心条件：正确的全局库加载顺序、JSX 编译支持，以及符合浏览器执行环境的语法规范。你原始代码未渲染的根本原因在于：
- ❌ 错误使用 import 语句（浏览器原生不支持 ES 模块语法，且 CDN 加载的 UMD 版本已挂载为全局 React/ReactDOM）；
- ❌ 缺少 Babel Standalone —— 它是将
Hello World
这类 JSX 语法实时编译为 React.createElement() 调用的必需桥梁； - ❌ ReactDOM.render() 在 React 18 中已被弃用（严格来说，它仍可在 legacy 模式下工作，但需注意 API 变更）。
✅ 正确做法如下：
1. 补全必要 CDN 脚本（含 Babel）
在
中按顺序引入：⚠️ 注意：@babel/standalone 必须在 react-dom 之后引入，否则 type="text/babel" 脚本无法被识别和转译。
2. 使用函数组件 + JSX 语法（无需 import）
直接定义函数组件，并用
立即学习“前端免费学习笔记（深入）”；
3. 确保 DOM 元素存在且可访问
确保
在