React 安装(CDN)
以下是在 macOS 系统上通过 CDN（内容分发网络）安装和使用 React 的中文讲解，结合 Visual Studio Code（VSCode）环境，内容简洁清晰，适合初学者。使用 CDN 方式无需安装 Node.js 或 npm，适合快速原型开发或学习 React 的基本功能。
1. 通过 CDN 使用 React 的简介
CDN 方式通过在 HTML 文件中引入 React 的 JavaScript 文件来使用 React 库，无需本地构建工具（如 npm）。这种方法适合：
- 快速测试 React 功能。
- 小型项目或学习环境。
- 不需要复杂构建流程的场景。
然而，CDN 方式不适合生产环境，因为它依赖外部网络，且无法使用现代 React 生态工具（如 JSX 编译、模块化）。
2. 准备工作
确保安装 VSCode
- 参考前述 macOS VSCode 安装指南，访问 code.visualstudio.com 下载并安装。
- 配置中文界面：
- 打开 VSCode，点击左侧“扩展”面板，搜索并安装“Chinese (Simplified) Language Pack”。
- 重启 VSCode，界面变为中文。
无需 Node.js 或 npm
- 使用 CDN 方式无需安装 Node.js，直接通过浏览器加载 React 库。
- 推荐使用 VSCode 的 Live Server 扩展实时预览 HTML 文件。
3. 通过 CDN 安装 React
以下是通过 CDN 在 HTML 文件中使用 React 的步骤。
步骤 1：创建 HTML 文件
- 在 VSCode 中创建一个新文件夹（如
react-cdn）。 - 创建一个
index.html文件，输入以下代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>React CDN 示例</title>
</head>
<body>
<div id="root"></div>
<!-- 引入 React 和 ReactDOM -->
<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
<!-- 你的 React 代码 -->
<script>
// 创建 React 组件
const App = () => {
return React.createElement('h1', null, '你好，React！');
};
// 渲染组件到 DOM
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(App));
</script>
</body>
</html>代码说明
- CDN 链接：
react.development.js：React 核心库。react-dom.development.js：ReactDOM，用于将 React 组件渲染到网页。- 使用
unpkg.com的 CDN 链接，版本为 React 18.2.0（截至 2025 年 8 月稳定版）。 - React 代码：
- 使用
React.createElement创建组件（因无 JSX 编译器）。 ReactDOM.createRoot创建渲染根节点，root.render渲染组件。- 中文支持：
<meta charset="UTF-8">确保浏览器正确解析中文。- 直接在组件中使用中文字符串（如
你好，React！）。
步骤 2：运行和预览
- 安装 Live Server 扩展：
- 在 VSCode 的“扩展”面板搜索并安装 Live Server。
- 运行页面：
- 右键
index.html，选择“Open with Live Server”。 - 浏览器会自动打开
http://127.0.0.1:5500，显示“你好，React！”。
- 手动预览（无 Live Server）：
- 双击
index.html在浏览器中打开（需联网以加载 CDN 文件）。
4. 使用 JSX（可选，需额外配置）
CDN 方式默认不支持 JSX（需要编译），但可以通过引入 Babel 的 CDN 启用 JSX 语法。
示例代码（带 JSX）
修改 index.html：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>React CDN JSX 示例</title>
</head>
<body>
<div id="root"></div>
<!-- 引入 React 和 ReactDOM -->
<script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
<!-- 引入 Babel 编译 JSX -->
<script src="https://unpkg.com/@babel/standalone@7.22.5/babel.min.js"></script>
<!-- React 代码，使用 JSX -->
<script type="text/babel">
const App = () => {
return <h1>欢迎使用 React (JSX)</h1>;
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
</body>
</html>代码说明
- Babel CDN：
@babel/standalone在浏览器中编译 JSX。 <script type="text/babel">：标记代码为 JSX，交给 Babel 处理。- JSX 语法：直接使用
<h1>而非React.createElement，更直观。
运行
- 使用 Live Server 打开
index.html，浏览器显示“欢迎使用 React (JSX)”。
5. 配置 VSCode 以优化开发
安装扩展
- 在 VSCode 的“扩展”面板安装：
- Live Server：实时预览 HTML 文件。
- ESLint：检查 JavaScript 代码规范。
- Prettier：格式化代码。
- Auto Rename Tag：同步编辑 HTML 标签。
- 配置 Prettier（可选）：
- 创建
.prettierrc：json { "semi": true, "trailingComma": "es5", "singleQuote": true, "printWidth": 80 }
中文支持
- 确保
index.html保存为 UTF-8 编码（右下角点击编码，选择“通过 UTF-8 保存”）。 - 配置 VSCode 终端支持中文：
{ "terminal.integrated.env.osx": { "LANG": "zh_CN.UTF-8" } }6. CDN 方式的局限性
- 不支持模块化：无法使用
import或现代 React 生态工具。 - 性能问题：CDN 依赖网络，生产环境推荐使用 npm 构建。
- 无构建工具：不支持 JSX 预编译、热重载等高级功能。
- 建议：学习阶段可使用 CDN，生产项目推荐 npm（参考前述 React npm 安装指南）。
7. 常见问题
- 页面空白：
- 检查网络连接，确保 CDN 链接可访问。
- 确认
<div id="root">和root.render正确匹配。 - 中文乱码：
- 确保
<meta charset="UTF-8">在<head>中。 - 使用支持 UTF-8 的浏览器（如 Chrome、Safari）。
- JSX 不生效：
- 确认引入 Babel CDN 和
type="text/babel"。 - 检查浏览器开发者工具（F12）是否有错误。
- Live Server 无法启动：
- 安装扩展后重启 VSCode。
- 确保端口（默认 5500）未被占用：
bash lsof -i :5500
8. 获取途径
- React：通过 CDN 免费使用，访问 react.dev 获取最新 CDN 链接。
- VSCode：可通过 grok.com、x.com、VSCode iOS/Android 应用免费使用（有限额）。付费订阅（如 SuperGrok）提供更高配额，详情见 x.ai/grok.
- Babel：CDN 链接从 babeljs.io 获取。
如需更复杂的 React 示例（如组件、状态管理）或 npm 方式的进一步讲解，请提供具体需求！