本文详解在无构建工具的纯 html 环境下集成 react 18 的完整步骤，包括必需的 cdn 脚本顺序、babel 编译器引入、jsx 正确写法及 reactdom 渲染调用方式，解决组件不显示的常见问题。
在浏览器中直接通过 CDN 引入 React 并渲染组件，是一种快速验证或轻量集成的常用方式。但需注意：React 18 不再支持 ReactDOM.render() 的旧式调用方式，且纯 HTML 环境下无法使用 ES 模块语法（如 import）或原生 JSX 解析——必须依赖 Babel 浏览器端编译器。
✅ 正确配置要点
-
按顺序引入三个关键 CDN 脚本（缺一不可）：
- react.development.js
- react-dom.development.js
- @babel/standalone/babel.min.js（提供浏览器内 JSX 编译与箭头函数等语法支持）
移除所有 import 语句：浏览器原生不支持 ES 模块动态导入；React 和 ReactDOM 已挂载为全局变量 React 和 ReactDOM。
-
使用函数组件 + JSX 元素调用：推荐写法为 const Component = () => <h1>Hello World</h1>，并以 <Component /> 形式传入 ReactDOM.createRoot()。
立即学习“前端免费学习笔记（深入）”；
React 18 必须使用 createRoot API：ReactDOM.render() 已废弃，否则控制台虽无报错，但组件完全不会挂载。
✅ 正确可运行代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>React in HTML</title>
<link rel="stylesheet" href="styles.css">
<!-- ✅ 严格按此顺序引入 -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<h1>My Website</h1>
<div id="react-container"></div>
<script type="text/babel">
// ✅ 正确：定义函数组件（无需 import）
const Greeting = () => <h1>Hello World from React 18!</h1>;
// ✅ 正确：React 18 渲染入口（必须使用 createRoot）
const root = ReactDOM.createRoot(document.getElementById("react-container"));
root.render(<Greeting />);
</script>
</body>
</html>⚠️ 常见错误与注意事项
- ❌ 错误：保留 import React from 'react' —— 浏览器会静默忽略并导致 React is not defined 或 JSX 编译失败。
- ❌ 错误：遗漏 @babel/standalone —— <h1>Hello</h1> 将被当作字符串字面量而非 JSX，最终不渲染。
- ❌ 错误：仍使用 ReactDOM.render(...) —— React 18 中该方法已移除，页面无任何提示，但组件永不出现。
- ✅ 提示：开发阶段建议使用 development.js 版本（含详细警告）；上线前切换为 production.min.js 以提升性能。
- ✅ 提示：若需状态管理，可直接使用 React.useState()，它在全局 React 对象中已可用。
掌握这套轻量集成模式，你就能在静态页面、文档站点或教学演示中快速嵌入交互式 React 组件，无需配置 Webpack 或 Vite。
