前端项目选型及搭建：React技术栈

为什么推荐用React搭建项目

各个主流框架的使用情况

1. npm下载量

数据来源：npm trends 框架对比数据

通过下面这张图可以看出react的全球下载量在最近一年的下载量稳居第一；

GitHub上的一些数据也可以通过对比明显看出，无论是Star数还是开源库的维护频率都是非常高的；

框架	Stars	Issues	最后一次更新（2025.1.05）	总开源时长
React	231,030	933	1个月前	13年
Vue	48,294	920	2个月前	11年
Angular	96,575	1740	17天前	9年
jQuery	59,282	91	1年前	14年
Svelte	80750	803	2天前	8年

2. Stack Overflow 标签数量排行

数据来源：Stack Overflow 标签数量排行

通过该标签排行可以看出在Stack Overflow社区里React目前是最受欢迎的现代前端框架、社区活跃度最高、技术问题解决资源最丰富；

3. JS现状调查

数据来源：JS现状调查

通过该图可以看到目前主流js库的【使用量】中，react一直是多年来排名最高的，但近几年前端发展迅速有了新的js库，后面几个tag里的【关注量】和【留存量】，react并没有始终排在第一，但也在前几名里；

4. 百度搜索指数

数据来源：百度搜索指数

国内开发在不借助魔法网络的情况下基本依赖百度搜索，以下是几个主流框架的搜索指数：

综合搜索及AI总结：

评估维度	React	Vue	Angular
学习曲线	中等	较低	较陡
生态系统	非常成熟（国内外）	成熟,但相对国内使用者较多	成熟，国外使用较多
灵活性	高	中等	中等
社区活跃度	极高	高	中等
工程化支持	完善	完善	完善

哪些常见国内应用是基于React开发的？

云效、飞书、蚂蚁数据可视化、飞猪、虾米音乐、斗鱼直播、知乎、豆瓣、美团外卖H5、石墨文档、36氪、优酷、携程、滴滴官网、今日头条…

哪些AI产品是基于React开发的？

AI应用：Openai、讯飞星火、通一千问、Deepseek…

AI应用开发平台：Coze、Dify、Lobechat…

结论

综上所述，React 凭借其组件化开发、虚拟 DOM、单向数据流等优势，以及庞大的生态系统（组件库、UI库）和活跃的社区，成为构建现代 Web 应用的理想选择。众多知名 AI 应用和平台的成功案例也证明了 React 的可靠性和高效性。因此，推荐使用 React 作为项目开发的首选框架。

项目搭建

环境依赖

Node >= 18+ (本地版本：18.20.4)

路由、工具、组件库

类别	依赖包	版本	说明
核心框架	React	^18.3.1	用于构建用户界面的 JavaScript 库
	TypeScript	^5.4.5	JavaScript 的超集，添加了类型系统
	Vite	^5.2.11	现代化的前端构建工具，开发体验好，构建速度快
	@vitejs/plugin-react-swc	^3.7.0	基于 SWC 的 React 插件，提供更快的编译速度
状态管理与路由	Zustand	^4.5.2	轻量级状态管理库，使用简单，支持 Hooks
	React Router	^6.23.1	React 官方路由方案
	Ahooks	^3.8.4	阿里出品的 React Hooks 库，提供丰富的自定义 Hooks
UI组件库	Ant Design	^5.22.7	企业级 UI 组件库，提供丰富的组件和主题定制
	@iconify/react	^4.1.1	图标库，支持多个图标集合
	@livekit/components-react	^2.6.7	LiveKit 的 React 组件库，用于实时音视频
	@livekit/components-styles	^1.1.4	LiveKit 组件样式库
工具库	Axios	^1.7.2	基于 Promise 的 HTTP 客户端
	Dayjs	^1.11.11	轻量级日期处理库，支持链式操作
	Lodash-unified	^1.0.3	实用工具库，提供数组、对象等操作方法
	Qs	^6.13.0	URL 参数解析和字符串化工具
	axios-mock-adapter	^1.22.0	Axios 的模拟请求适配器，用于开发调试

整体项目结构

├── src/ # 源代码目录
├── public/ # 静态资源目录
├── node_modules/ # 依赖包目录
├── index.html # HTML 入口文件
├── vite.config.ts # Vite 配置文件
├── package.json # 项目配置和依赖管理
├── tsconfig.json # TypeScript 配置
│
├── 环境配置文件
│ ├── .env.dev # 开发环境配置
│ └── .env.prod # 生产环境配置
│
├── 代码规范配置
│ ├── .eslintrc.cjs # ESLint 配置
│ ├── .prettierrc.cjs # Prettier 配置
│ ├── .stylelintrc.cjs # StyleLint 配置
│ ├── .editorconfig # 编辑器配置
│ └── .commitlintrc.cjs # Git 提交规范配置
│
├── 忽略文件配置
│ ├── .gitignore # Git 忽略文件
│ ├── .eslintignore # ESLint 忽略文件
│ ├── .prettierignore # Prettier 忽略文件
│ └── .stylelintignore # StyleLint 忽略文件
│
└── 项目文档
├── README.md # 项目说明文档
└── LICENSE # 开源协议

源代码目录结构

src/
├── apis/ # API 接口管理
│ ├── request.ts # Axios 请求封装
│ └── modules/ # 按模块划分的 API
│
├── assets/ # 静态资源
│ ├── images/ # 图片资源
│ ├── icons/ # 图标资源
│ └── styles/ # 全局样式
│
├── components/ # 全局公共组件
│ ├── Layout/ # 布局组件
│ ├── Button/ # 按钮组件
│ └── Form/ # 表单组件
│
├── constants/ # 常量定义
│ ├── index.ts # 公共常量
│ └── routes.ts # 路由常量
│
├── hooks/ # 自定义 Hooks
│ ├── useRequest.ts # 请求 Hook
│ └── useAuth.ts # 认证 Hook
│
├── pages/ # 页面组件
│ ├── Home/ # 首页
│ ├── Login/ # 登录页
│ └── User/ # 用户页面
│
├── router/ # 路由配置
│ ├── index.tsx # 路由入口
│ └── routes.tsx # 路由定义
│
├── store/ # 状态管理
│ ├── index.ts # Store 入口
│ └── modules/ # 状态模块
│
├── types/ # TypeScript 类型定义
│ ├── global.d.ts # 全局类型
│ └── api.d.ts # API 相关类型
│
├── utils/ # 工具函数
│ ├── storage.ts # 存储工具
│ └── validator.ts # 验证工具
│
├── App.tsx # 应用根组件
├── main.tsx # 应用入口
└── env.d.ts # 环境变量类型声明

项目命令

命令	说明
npm run dev	启动开发服务器，默认端口 8000
npm run build	构建生产环境代码
npm run analyzer	构建并分析打包结果
npm run serve	预览生产环境构建
npm run lint:js	JavaScript/TypeScript 代码检查
npm run lint:css	CSS 代码检查
npm run check	TypeScript 类型检查
npm run commit	规范化的 Git 提交

开发规范

• 使用 ESLint 进行代码检查
• 使用 Prettier 进行代码格式化
• 使用 StyleLint 进行样式检查
• 使用 Commitlint 进行提交信息检查
• 遵循 TypeScript 开发规范