快速开始React开发（一）
React是一个JavaScript库，用于构建交互式网站，并且能够快捷创建SPA（Single Page App），其组件化的思想也是被一再传播，无论是普通的Web网站还是嵌入移动端交互都常见到其身影，那么，搞起~~
1、快速创建项目（CRA）
CRA (Create React App) 是 React 官方提供的一个脚手架工具，用于快速创建和搭建 React 项目
在此之前，我们先配置一下马上需要用到的node环境，nvm也推荐大家看一下，考虑到可能需要不同node版本管理，这里不过多介绍，提供传送门，回来时候的状态应该是node和npm是能用的了
Node.js安装教程（2025)
（零基础）Node包管理器（nvm）安装及nodejs安装教程（2025年版）
接下来，什么都不需要做，运行这行代码就可以生成一个完整的项目
npx create-react-app my-app
这里我打算使用TypeScript作为主要的开发语言，添加--template参数指定模板
npx create-react-app my-app --template typescript
啊哦，别慌，小状况，提示需要升级了，那就妥协一下
升级到最新的create-react-app
npm uninstall -g create-react-app
npm install -g create-react-app@latest
好了，升到5.1.0，满足要求，Let’s try again!
耐心等待一小会儿，看到这个就说明项目创建成功啦，我们可以用下面红框的命令进入项目，并运行一下看看
此时，会需要选择一下浏览器，页面自动跳转，“小”功告成！
2、项目结构
使用Trae打开项目目录，肉眼可见这几项
我们简要看看每一项的作用：
node_modules/- 存放项目所有的依赖包
- 通过
npm/yarn安装的包都在这里 - 注：不需要提交到代码仓库（运行命令就能下）
public/- 存放静态资源文件
- 包含主页面模板
index.html - 存放网站图标、
manifest等公共资源
src/- 项目源代码目录
- 包含入口文件和主要组件
- 开发主要在这个目录下进行
package.json：项目配置文件README.md：项目说明文档.gitignore：Git忽略配置package-lock.json：依赖版本锁定文件tsconfig.json：TypeScript 编译和类型检查的配置文件（ts项目特有）
以上大概有些印象即可，主要开发用到比较多的还是src/，这里将会不断随着业务的复杂程度扩充，之后则需要更加细致进行分类管理，比方说下面这样：
my-app/
├── src/
│ ├── api/ # API 接口管理
│ │ ├── user.ts # 用户相关接口
│ │ └── index.ts # API 统一导出
│ │
│ ├── assets/ # 静态资源
│ │ ├── images/ # 图片资源
│ │ ├── styles/ # 全局样式
│ │ └── fonts/ # 字体文件
│ │
│ ├── components/ # 公共组件
│ │ ├── Button/
│ │ │ ├── index.tsx
│ │ │ └── style.module.scss
│ │ └── index.ts
│ │
│ ├── constants/ # 常量配置
│ │ ├── api.ts # 接口地址
│ │ └── enum.ts # 枚举值
│ │
│ ├── hooks/ # 自定义 Hooks
│ │ └── useAuth.ts
│ │
│ ├── layouts/ # 布局组件
│ │ └── MainLayout.tsx
│ │
│ ├── pages/ # 页面组件
│ │ └── Home/
│ │ ├── components/ # 页面级组件
│ │ ├── index.tsx
│ │ └── style.module.scss
│ │
│ ├── store/ # 状态管理
│ │ ├── modules/ # 模块分类
│ │ └── index.ts
│ │
│ ├── types/ # TypeScript 类型
│ │ └── user.d.ts
│ │
│ ├── utils/ # 工具函数
│ │ ├── request.ts # 请求封装
│ │ └── storage.ts # 存储相关
│ │
│ ├── App.tsx
│ └── index.tsx
│
├── public/ # 静态公共资源
├── tests/ # 测试文件目录
├── package.json
└── tsconfig.json
一点点开始吧。。。
