本文详解在不使用构建工具（如 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 元素存在且可访问

确保

在

My Website

? 注意事项

• 本地文件协议限制：直接双击 .html 文件（file:// 协议）可能因浏览器安全策略导致 Babel 无法加载远程模块，务必使用本地服务器（如 npx serve、vs code Live Server 插件或 python 的