当前位置：首页 > React

react如何规划项目目录

2026-02-26 19:41:55React

规划React项目目录结构

React项目的目录结构可以根据项目规模和团队习惯进行灵活调整。以下是几种常见的目录规划方式：

按功能划分的目录结构

这种结构将代码按功能模块划分，适合中大型项目：

react如何规划项目目录

src/
  ├── components/         # 通用组件
  ├── features/          # 功能模块
  │   ├── auth/          # 认证相关
  │   ├── dashboard/     # 仪表板相关
  │   └── settings/      # 设置相关
  ├── hooks/             # 自定义hooks
  ├── lib/               # 工具函数/辅助库
  ├── pages/             # 页面组件
  ├── routes/            # 路由配置
  ├── stores/            # 状态管理
  ├── styles/            # 全局样式
  ├── types/             # 类型定义
  └── utils/             # 实用工具

按文件类型划分的目录结构

这种结构更适合小型项目或初学者：

react如何规划项目目录

src/
  ├── assets/            # 静态资源
  ├── components/        # 可复用组件
  ├── containers/        # 容器组件
  ├── context/           # Context API
  ├── helpers/           # 辅助函数
  ├── pages/             # 页面组件
  ├── services/          # API服务
  └── styles/            # 样式文件

原子设计目录结构

基于原子设计理念的目录结构：

src/
  ├── atoms/             # 基础组件(按钮、输入框等)
  ├── molecules/         # 组合原子组件
  ├── organisms/         # 复杂组件
  ├── templates/         # 页面模板
  ├── pages/             # 实际页面
  └── utils/             # 工具函数

最佳实践建议

保持一致性：整个项目使用相同的命名和结构约定
避免过深嵌套：目录层级不宜超过3-4层
分离关注点：将UI、逻辑和状态管理分开
区分公共与私有：明确哪些组件/模块是可复用的
考虑测试：为测试文件预留位置，可以与源码并列或单独目录

示例配置

对于使用React Router和Redux的项目：

src/
  ├── app/               # 应用配置和根组件
  ├── common/            # 跨项目可复用代码
  ├── features/          # 功能切片(Redux推荐)
  ├── pages/             # 路由页面组件
  ├── services/          # API通信层
  ├── store/             # Redux配置
  └── test/              # 测试文件

选择哪种结构取决于项目需求，关键是要保持逻辑清晰且易于维护。随着项目发展，结构可以逐步调整优化。