React 安装(CDN)
如果只想快速体验 React、写个小例子，或页面不需要复杂工程化，可以不安装 Node.js，直接用 CDN 在网页中引入 React。本节演示最快速的 CDN 用法。
CDN 引入哪几个库
通常需要引入三个脚本，放在 HTML 的 head 或 body 末尾：
- react：React 核心库。
- react-dom：负责渲染到 DOM。
- babel-standalone：让浏览器能直接运行 JSX。
<script crossorigin src="https://example.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://example.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://example.com/@babel/standalone/babel.min.js"></script>
实际使用时应把 https://example.com 换成具体的 CDN 地址（如 unpkg、jsdelivr 等公共 CDN）。
完整的 CDN 页面
把下面代码保存成 index.html，双击用浏览器打开即可看到效果：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>React CDN 示例</title>
<script crossorigin src="https://example.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://example.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://example.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Welcome() {
return <h1>你好，CDN 上的 React！</h1>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Welcome />);
// 渲染效果：页面显示"你好，CDN 上的 React！"
</script>
</body>
</html>
关键点：type="text/babel" 告诉浏览器这段脚本要交给 Babel 转译；ReactDOM.createRoot 是 React 18 的渲染方式。
运行原理
浏览器加载三个 CDN 脚本后，全局就有了 React 与 ReactDOM 对象；接着 Babel 把 JSX 编译成普通 JavaScript，createRoot(...).render(...) 把组件内容放进 id 为 root 的 div 中。
CDN 方式的优缺点
优点：零安装、一个文件就能跑，适合演示与学习。缺点：没有模块化、压缩与缓存优化，加载较慢，不适合正式项目。
小结
CDN 是体验 React 最快的方式：引入 react、react-dom、babel 三个脚本，在 text/babel 的脚本块里写 JSX 即可运行。正式开发建议回到 npm + Vite 的方案。