第1课：React开发环境搭建与第一个组件
第1课：React开发环境搭建与第一个组件
学习目标
- 搭建React开发环境
- 创建第一个React项目
- 了解项目基本结构
- 编写并运行第一个React组件
一、环境准备
1. 安装Node.js
React开发需要Node.js环境，它包含了npm（Node Package Manager）工具。
安装步骤：
- 访问 Node.js官网
- 下载LTS版本（推荐大多数用户使用）
- 运行安装程序，全部使用默认选项
- 安装完成后，验证是否成功：
打开终端（Windows: cmd/PowerShell, Mac: Terminal）输入：
node -v
npm -v
应该能看到版本号（如v18.x.x），说明安装成功。
二、创建React项目
我们将使用官方推荐的create-react-app工具来快速搭建项目。
# 1. 升级 npm
npm install -g npm@latest
# 2. 使用 npx 创建 React 项目（推荐）
npx create-react-app my-app
cd my-app
npm start
# 3. 若需全局安装，清理缓存后重试
npm cache clean --force
npm install -g create-react-app
# 4. 查看资金详情或关闭提示
npm fund # 查看需要支持的包
npm config set fund false --location=global # 全局关闭提示
注意：React 团队已明确表示不再推荐使用 create-react-app（CRA），而是推荐使用 Vite 或其他现代工具（如 react-create-app）。
官方提示链接：https://react.dev/link/cra
# 清理当前目录
del package.json
rmdir /s /q node_modules
# 创建 Vite React 项目
npm create vite@latest task-manager -- --template react
# 进入项目目录并启动
cd task-manager
npm install
npm run dev
操作步骤：
- 在终端运行以下命令：请参考命名规则，别出了问题
npm create vite@latest task-manager -- --template react
- npm 命名规则
G:\20250405>npm create vite@latest task-manager -- --template react
Need to install the following packages:
create-vite@6.3.1
Ok to proceed? (y) y
> npx
> cva task-manager --template react
|
o Scaffolding project in G:\20250405\task-manager...
|
— Done. Now run:
cd task-manager
npm install
npm run dev
G:\20250405>
- 等待安装完成（可能需要几分钟）
如果卡了。请参考：
- npm国内镜像源
- 进入项目目录：
cd task-manager
npm install
- 启动开发服务器：
npm run dev
项目会自动在浏览器中打开（通常是http://localhost:5173），你会看到React的欢迎页面。
三、项目结构介绍
让我们看看create-react-app生成的文件结构：
task-manager/
├── node_modules/ # 所有依赖的库
├── public/ # 静态文件
│ ├── index.html # 主HTML文件
│ └── ...
├── src/ # 主要工作目录
│ ├── App.css # 主样式文件
│ ├── App.js # 主组件文件
│ ├── App.test.js # 测试文件
│ ├── index.css # 全局样式
│ ├── index.js # 应用入口文件
│ └── logo.svg # React图标
├── package.json # 项目配置文件
└── ... # 其他配置文件
四、编写第一个组件
用vscode打开文件夹 然后进行以下的操作。
1. 修改App组件
打开src/App.jsx，将其内容替换为：
function App() {
return (
<div className="App">
<h1>我的第一个React应用</h1>
<p>欢迎来到任务管理系统！</p>
</div>
);
}
export default App;
保存后，浏览器会自动刷新，你会看到更新后的内容。
2. 创建HelloWorld组件
在src文件夹中新建HelloWorld.jsx文件：
function HelloWorld() {
return (
<div>
<h2>Hello, World!</h2>
<p>这是我的第一个自定义组件</p>
</div>
);
}
export default HelloWorld;
3. 在App中使用HelloWorld组件
修改App.jsx：
import HelloWorld from './HelloWorld';
function App() {
return (
<div className="App">
<h1>我的第一个React应用</h1>
<p>欢迎来到任务管理系统！</p>
<HelloWorld />
</div>
);
}
export default App;
五、练习任务
现在轮到你自己动手了：
- 创建一个名为
Introduction的新组件
参考：
function Introduction() {
return (
<div>
<h1>Welcome to the Introduction Page</h1>
<p>This is a simple introduction page.</p>
</div>
);
}
export default Introduction;
// import React from 'react'
- 这个组件应该显示：
- 你的名字
- 简短的个人介绍
- 为什么想学习React
- 在
App组件中使用这个新组件
提示：
- 组件文件命名使用大写字母开头（如
Introduction.jsx） - 记得导出组件（export default）
- 记得在App.js中导入组件（import）
六、常见问题解答
Q: 安装时出现错误怎么办？
A: 尝试以下步骤：
- 确保网络连接正常
- 运行
npm cache clean --force清理缓存 - 重新运行
上面的操作
Q: 修改代码后页面没有自动刷新？
A: 检查终端是否正常运行着npm run dev，如果没有，重新运行它。
Q: 如何停止开发服务器？
A: 在终端按Ctrl+C，然后输入y确认。
七、课程总结
今天我们学习了：
- 如何搭建React开发环境
- 使用create-react-app创建项目
- React项目的基本结构
- 如何创建和使用组件
课后作业
- 完成练习任务中的
Introduction组件 - 尝试修改样式（可以编辑
App.css） - 探索
public/index.html文件，了解React应用的HTML基础
下一节课我们将深入学习JSX语法和组件props的使用！
附加资源
- create-react-app文档
- React官方快速入门
- Node.js下载指南
记得保存你的工作！你可以使用Git来管理代码版本（可选）：
- 本项目地址
- Git 换行符警告（LF replaced by CRLF）的解决方案
git init
git add .
git commit -m "完成第一课的学习"
git remote -v
