当前位置：首页 > news >正文

快速开始React开发（一）

news 来源：原创 2025/6/10 12:08:26

快速开始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

一点点开始吧。。。