青海项目信息网整站排名优化公司

第1课：React开发环境搭建与第一个组件

学习目标

• 搭建React开发环境
• 创建第一个React项目
• 了解项目基本结构
• 编写并运行第一个React组件

一、环境准备

1. 安装Node.js

React开发需要Node.js环境，它包含了npm（Node Package Manager）工具。

安装步骤：

1. 访问 Node.js官网
2. 下载LTS版本（推荐大多数用户使用）
3. 运行安装程序，全部使用默认选项
4. 安装完成后，验证是否成功：

打开终端（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

操作步骤：

1. 在终端运行以下命令：请参考命名规则，别出了问题

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-managernpm installnpm run devG:\20250405>

2. 等待安装完成（可能需要几分钟）
   如果卡了。请参考：

• npm国内镜像源

4. 进入项目目录：

cd task-manager
npm install

4. 启动开发服务器：

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;

五、练习任务

现在轮到你自己动手了：

1. 创建一个名为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'

3. 这个组件应该显示：
   • 你的名字
   • 简短的个人介绍
   • 为什么想学习React
4. 在App组件中使用这个新组件

提示：

• 组件文件命名使用大写字母开头（如Introduction.jsx）
• 记得导出组件（export default）
• 记得在App.js中导入组件（import）

六、常见问题解答

Q: 安装时出现错误怎么办？
A: 尝试以下步骤：

1. 确保网络连接正常
2. 运行npm cache clean --force清理缓存
3. 重新运行上面的操作

Q: 修改代码后页面没有自动刷新？
A: 检查终端是否正常运行着npm run dev，如果没有，重新运行它。

Q: 如何停止开发服务器？
A: 在终端按Ctrl+C，然后输入y确认。

七、课程总结

今天我们学习了：

• 如何搭建React开发环境
• 使用create-react-app创建项目
• React项目的基本结构
• 如何创建和使用组件

课后作业

1. 完成练习任务中的Introduction组件
2. 尝试修改样式（可以编辑App.css）
3. 探索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