本文详解在无构建工具的纯 html 环境下集成 react 18 的完整步骤，包括必需的 cdn 脚本顺序、babel 编译器引入、jsx 正确写法及 reactdom 渲染调用方式，解决组件不显示的常见问题。

在浏览器中直接通过 CDN 引入 React 并渲染组件，是一种快速验证或轻量集成的常用方式。但需注意：React 18 不再支持 ReactDOM.render() 的旧式调用方式，且纯 HTML 环境下无法使用 ES 模块语法（如 import）或原生 JSX 解析——必须依赖 Babel 浏览器端编译器。

✅ 正确配置要点

1. 按顺序引入三个关键 CDN 脚本（缺一不可）：

   • react.development.js
   • react-dom.development.js
   • @babel/standalone/babel.min.js（提供浏览器内 JSX 编译与箭头函数等语法支持）

2. 移除所有 import 语句：浏览器原生不支持 ES 模块动态导入；React 和 ReactDOM 已挂载为全局变量 React 和 Reac

   

   tDOM。

3. 使用函数组件 + JSX 元素调用：推荐写法为 const Component = () =>

   Hello World

   ，并以 形式传入 ReactDOM.createRoot()。

4. React 18 必须使用 createRoot API：ReactDOM.render() 已废弃，否则控制台虽无报错，但组件完全不会挂载。

✅ 正确可运行代码示例

  
  
  

  
  
  
  


  
My Website
  

  

⚠️ 常见错误与注意事项

• ❌ 错误：保留 import React from 'react' —— 浏览器会静默忽略并导致 React is not defined 或 JSX 编译失败。
• ❌ 错误：遗漏 @babel/standalone ——

  Hello

  将被当作字符串字面量而非 JSX，最终不渲染。
• ❌ 错误：仍使用 ReactDOM.render(...) —— React 18 中该方法已移除，页面无任何提示，但组件永不出现。
• ✅ 提示：开发阶段建议使用 development.js 版本（含详细警告）；上线前切换为 production.min.js 以提升性能。
• ✅ 提示：若需状态管理，可直接使用 React.useState()，它在全局 React 对象中已可用。

掌握这套轻量集成模式，你就能在静态页面、文档站点或教学演示中快速嵌入交互式 React 组件，无需配置 Webpack 或 Vite。