React 创建第一个项目
以下是在 macOS 系统上使用 React 创建第一个项目的中文讲解，结合 Visual Studio Code（VSCode）环境，通过 npm 方式创建项目，内容简洁清晰，适合初学者。讲解包括项目创建、运行、基本组件编写以及中文支持。
1. 准备工作
在创建 React 项目之前，需要确保环境准备就绪。
安装 Node.js 和 npm
- 下载 Node.js：
- 访问 Node.js 官网，下载 LTS 版本（如 20.x）。
- 双击下载的
.pkg文件，按照提示安装。
- 验证安装：
- 打开 VSCode 终端（
Cmd + ~）或 macOS 终端，运行：bash node -v npm -v - 应显示版本号（如
v20.17.0和v10.8.3）。
- 加速 npm（可选）：
- 设置中国镜像以提高下载速度：
bash npm config set registry https://registry.npmmirror.com
安装 VSCode
- 参考前述 macOS VSCode 安装指南，访问 code.visualstudio.com 下载并安装。
- 配置中文界面：
- 打开 VSCode，点击左侧“扩展”面板，搜索并安装“Chinese (Simplified) Language Pack”。
- 重启 VSCode，界面变为中文。
安装 VSCode 扩展
- 打开“扩展”面板，安装以下扩展：
- ESLint：检查代码规范。
- Prettier – Code formatter：自动格式化代码。
- Reactjs code snippets：快速插入 React 代码片段。
- Auto Rename Tag：同步编辑 HTML 标签。
- （可选）安装 Live Server，用于静态文件预览。
2. 创建第一个 React 项目
React 项目通常使用 create-react-app 或 Vite 创建，以下以 create-react-app 为例。
步骤 1：创建项目
- 打开 VSCode，点击“终端 > 新建终端”。
- 运行以下命令创建项目：
npx create-react-app my-first-react-appnpx：运行无需全局安装的工具。my-first-react-app：项目名称，可自定义（如my-app）。
- 等待安装完成，项目会自动生成所需文件和依赖。
步骤 2：进入项目并启动
- 进入项目目录：
cd my-first-react-app- 启动开发服务器：
npm start- 项目会在
http://localhost:3000自动打开浏览器，显示 React 默认页面。
步骤 3：项目结构说明
创建的项目包含以下关键文件：
src/App.js：主 React 组件，定义应用界面。src/index.js：入口文件，渲染 React 应用。public/index.html：HTML 模板，React 挂载点（id="root"）。package.json：管理依赖和脚本（如npm start、npm build）。src/App.css：组件样式文件。
3. 编写第一个 React 组件
修改 src/App.js，创建一个简单的组件，包含中文内容。
示例代码
在 VSCode 中打开 src/App.js，替换为以下代码：
import React from ‘react’;
import ‘./App.css’;
function App() {
return (
欢迎使用 React
这是我的第一个 React 项目！
);
}
export default App;
代码说明
import React from 'react'：引入 React 核心库。function App()：定义一个函数组件。<h1>和<p>：使用 JSX 语法，包含中文内容。export default App：导出组件，供index.js渲染。className="App"：对应App.css中的样式。
运行项目
- 确保终端运行
npm start。 - 保存
App.js，浏览器会自动刷新，显示“欢迎使用 React”和“这是我的第一个 React 项目！”。
4. 配置 VSCode 以优化 React 开发
配置 ESLint 和 Prettier
- 安装依赖：
npm install --save-dev eslint prettier eslint-plugin-react eslint-plugin-react-hooks- 创建
.eslintrc.json：
{
"env": { "browser": true, "es2021": true },
"extends": ["eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended"],
"parserOptions": { "ecmaVersion": 12, "sourceType": "module" },
"plugins": ["react", "react-hooks"],
"rules": {}
}- 创建
.prettierrc：
{
"semi": true,
"trailingComma": "es5",
"singleQuote": true,
"printWidth": 80
}配置调试
- 点击“运行和调试”面板，选择“创建 launch.json 文件”。
- 添加 Chrome 调试配置：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
}
]
}- 运行
npm start，按F5启动调试，设置断点检查代码。
5. 中文支持
- React 中的中文：JSX 支持 UTF-8 编码，可直接使用中文：
<h1>你好，React！</h1>- VSCode 配置：
- 确保源文件保存为 UTF-8（右下角点击编码，选择“通过 UTF-8 保存”）。
- 配置终端支持中文：
json { "terminal.integrated.env.osx": { "LANG": "zh_CN.UTF-8" } }
6. 使用 Vite 创建项目（可选，替代 create-react-app）
Vite 是更快速的构建工具，适合现代开发：
- 创建 Vite 项目：
npm create vite@latest my-vite-app -- --template react
cd my-vite-app
npm install
npm run dev- 项目会在
http://localhost:5173启动，结构类似但启动更快。
7. 常见问题
- npm 命令失败：
- 检查 Node.js 版本（建议 LTS）。
- 清理缓存：
bash npm cache clean --force - 使用中国镜像：
bash npm config set registry https://registry.npmmirror.com - 中文乱码：
- 确保 VSCode 和终端使用 UTF-8 编码。
- 检查
public/index.html包含<meta charset="UTF-8">。 - 端口被占用：
- 终止进程或更改端口：
bash npm start -- --port 3001 - 项目无法运行：
- 删除
node_modules和package-lock.json，重新安装：bash rm -rf node_modules package-lock.json npm install
8. 获取途径
- React：通过 npm 免费安装，访问 react.dev。
- VSCode：可通过 grok.com、x.com、VSCode iOS/Android 应用免费使用（有限额）。付费订阅（如 SuperGrok）提供更高配额，详情见 x.ai/grok.
- Node.js：免费下载，访问 nodejs.org.
如需更复杂的 React 项目示例（如添加路由、状态管理）或进一步指导，请提供具体需求！