如何组织react项目结构

组织 React 项目结构的常见方法

按功能模块划分

将项目拆分为独立的业务模块，每个模块包含自身的组件、样式、逻辑和测试文件。例如：

src/
  ├── features/
  │   ├── auth/
  │   │   ├── components/
  │   │   ├── hooks/
  │   │   └── services/
  │   └── dashboard/
  │       ├── components/
  │       └── hooks/

按文件类型划分

传统分类方式，适合小型项目：

src/
  ├── components/
  ├── pages/
  ├── hooks/
  ├── utils/
  ├── styles/
  └── services/

领域驱动设计(DDD)结构

适用于复杂业务系统，强调领域模型：

src/
  ├── domains/
  │   ├── user/
  │   │   ├── models/
  │   │   ├── repositories/
  │   │   └── services/
  │   └── product/
  ├── infrastructure/
  └── presentation/

关键目录说明

核心目录

• components/: 存放通用UI组件
• pages/: 路由级页面组件
• hooks/: 自定义React Hooks
• services/: API请求层
• utils/: 工具函数
• styles/: 全局样式和主题

进阶目录

• store/: Redux或状态管理相关
• constants/: 应用常量
• assets/: 静态资源
• __tests__/: 测试文件

文件命名规范

• 组件使用PascalCase：UserProfile.jsx
• 非组件文件使用camelCase：apiService.js
• 样式文件与组件同名：UserProfile.module.css

状态管理组织

对于Redux项目推荐ducks模式：

features/
  └── user/
      ├── userSlice.js
      ├── userActions.js
      └── userSelectors.js

配置建议

1. 在src/config/存放环境配置
2. 使用绝对路径导入：

   // jsconfig.json
   {
   "compilerOptions": {
    "baseUrl": "src"
   }
   }

测试结构

保持测试文件靠近被测试代码：

components/
  ├── Button/
  │   ├── Button.jsx
  │   └── Button.test.jsx

样式管理方案

• CSS Modules：Component.module.css
• Styled-components：与组件同文件
• SCSS：单独目录结构

工具推荐

• 使用Plop.js生成组件模板
• 配置ESLint和Prettier统一代码风格
• 考虑使用Lerna管理多包仓库

项目初期建议从简单结构开始，随着规模增长逐步演进。保持目录结构扁平化，避免过度嵌套。