react如何规划项目目录
规划 React 项目目录结构
React 项目的目录结构可以根据项目规模和团队需求灵活调整，以下是一些常见的目录规划方案：
按功能划分
src/
├── components/ # 通用组件（按钮、输入框等）
├── features/ # 业务功能模块（每个功能独立文件夹）
│ ├── auth/ # 认证相关
│ ├── dashboard/ # 仪表板相关
├── pages/ # 页面级组件
├── hooks/ # 自定义 hooks
├── utils/ # 工具函数
├── services/ # API 请求层
├── store/ # 状态管理（Redux/Zustand）
├── styles/ # 全局样式
├── assets/ # 静态资源
└── App.js # 主入口按文件类型划分
src/
├── components/
├── containers/
├── redux/
├── api/
├── styles/
└── routes/关键目录说明
components/
- 存放可复用的 UI 组件
- 可按原子设计理论细分：
- atoms/ 基础元素（按钮、图标）
- molecules/ 简单组合（搜索框）
- organisms/ 复杂组件（导航栏）
features/
- 业务功能模块采用 feature-based 结构
- 每个功能包含自己的组件、hooks 和逻辑
- 示例：
features/ ├── user/ │ ├── UserList.js │ ├── useUsers.js │ └── userSlice.js └── products/ ├── ProductCard.js └── api/
services/
- 集中管理 API 请求
- 建议按资源分类：
services/ ├── authService.js ├── userService.js └── productService.js
进阶建议
类型安全项目
- 添加
types/目录存放 TypeScript 类型定义 - 或使用
*.d.ts文件与对应模块共存
测试文件
__tests__/目录与对应模块平级- 或使用
Component.test.js命名约定
配置分离
- 环境变量放入
config/目录 - 区分
config/dev.js,config/prod.js
路由组织方案
基础路由
routes/
├── publicRoutes.js # 公开路由
└── privateRoutes.js # 需要鉴权的路由动态加载
pages/
├── Home/
│ ├── index.js
│ └── Home.module.css
└── About/
└── index.js样式管理方案
CSS Modules
- 每个组件附带自己的
.module.css文件 - 避免全局样式冲突
Styled Components
- 样式组件与逻辑组件共存
- 或集中放在
styles/目录
状态管理方案
Redux Toolkit
store/
├── slices/ # Redux slices
├── actions/ # 传统 action creators
└── store.js # Store 配置Context API
- 每个 context 在
contexts/目录独立管理 - 包含 Provider 和自定义 hook
构建工具适配
Vite 项目
- 静态资源建议放在
public/ - 插件配置可放入
config/vite/
Next.js 项目
- 遵循 pages/ 和 app/ 路由约定
- API 路由放入
pages/api/或app/api/
项目模板参考
社区流行结构
bulletproof-react（防御式编程结构）feature-sliced（功能切片架构）atomic-design（原子设计模式）
企业级推荐
src/
├── core/ # 框架扩展/基础配置
├── modules/ # 业务模块
├── shared/ # 跨模块共享代码
└── app/ # 应用入口层选择目录结构时需考虑：
- 项目复杂度
- 团队协作需求
- 长期维护成本
- 框架特性（如 Next.js 的特殊要求）
