如何组织react项目结构

组织 React 项目结构的方法

React 项目结构的组织方式可以根据项目规模和团队偏好进行调整。以下是几种常见的结构模式：

按功能划分的结构

将文件按照功能模块划分，每个模块包含相关的组件、样式和逻辑。

• src/
  • components/
    • Button/
      • Button.js
      • Button.css
      • Button.test.js
    • Header/
      • Header.js
      • Header.css
  • pages/
    • Home/
      • Home.js
      • Home.css
    • About/
      • About.js
  • utils/
    • api.js
    • helpers.js

这种方式适合中小型项目，便于快速定位文件。

按文件类型划分的结构

将文件按照类型（组件、样式、工具等）分组。

• src/
  • components/
    • Button.js
    • Header.js
  • styles/
    • Button.css
    • Header.css
  • pages/
    • Home.js
    • About.js
  • services/
    • api.js

这种方式简单直观，但随着项目规模扩大可能变得混乱。

领域驱动设计（DDD）结构

适用于大型复杂应用，按业务领域划分模块。

• src/
  • auth/
    • components/
    • hooks/
    • services/
  • dashboard/
    • components/
    • hooks/
  • shared/
    • utils/
    • components/

每个领域包含完整的逻辑和 UI，适合团队协作和功能隔离。

结合路由的结构

将路由与页面组件直接关联。

• src/
  • routes/
    • Home/
      • index.js
    • Profile/
      • index.js
  • layouts/
    • MainLayout.js
  • store/
    • redux/

这种方式适合以路由为核心的 SPA 应用。

推荐的实践

• 保持组件小型化，每个组件专注于单一功能。
• 使用 index.js 作为模块入口，避免过深的导入路径。
• 将全局工具、配置和样式放在顶层目录（如 src/config/）。
• 对测试文件使用就近原则，与组件放在同一目录。

工具支持

• 使用 Create React App 或 Vite 初始化项目结构。
• 通过 ESLint 和 Prettier 统一代码风格。
• 考虑使用 Lerna 或 Nx 管理大型 Monorepo 项目。

根据项目需求选择合适结构，并确保团队遵循一致的约定。