React项目常用目录结构

---

基础目录结构

1. Create React App 标准结构

当使用 create-react-app 创建项目时，会生成以下基础结构：

my-react-app/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   └── manifest.json
├── src/
│   ├── components/
│   ├── pages/
│   ├── utils/
│   ├── styles/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
├── package-lock.json
└── README.md

2. 详细目录说明

public/ 目录

• index.html: 应用的HTML模板文件
• favicon.ico: 网站图标
• manifest.json: PWA配置文件
• robots.txt: 搜索引擎爬虫规则

src/ 目录（核心开发目录）

• components/: 可复用组件
• pages/: 页面级组件
• utils/: 工具函数和辅助方法
• styles/: 全局样式文件
• App.js: 根组件
• index.js: 应用入口文件

进阶目录结构

1. 按功能模块组织

src/
├── components/
│   ├── common/          # 通用组件
│   │   ├── Button/
│   │   ├── Modal/
│   │   └── Loading/
│   └── layout/          # 布局组件
│       ├── Header/
│       ├── Footer/
│       └── Sidebar/
├── pages/               # 页面组件
│   ├── Home/
│   ├── About/
│   └── Contact/
├── hooks/               # 自定义Hooks
├── services/            # API服务
├── store/               # 状态管理
├── utils/               # 工具函数
├── constants/           # 常量定义
├── styles/              # 样式文件
└── assets/              # 静态资源├── images/├── icons/└── fonts/

2. 企业级项目结构

src/
├── components/
│   ├── ui/              # 基础UI组件
│   │   ├── Button/
│   │   │   ├── Button.jsx
│   │   │   ├── Button.module.css
│   │   │   ├── Button.test.js
│   │   │   └── index.js
│   │   └── Input/
│   ├── layout/          # 布局组件
│   └── business/        # 业务组件
├── pages/
│   ├── Dashboard/
│   │   ├── Dashboard.jsx
│   │   ├── Dashboard.module.css
│   │   ├── components/  # 页面私有组件
│   │   └── hooks/       # 页面私有Hooks
│   └── Profile/
├── features/            # 功能模块
│   ├── auth/
│   │   ├── components/
│   │   ├── services/
│   │   ├── store/
│   │   └── utils/
│   └── dashboard/
├── shared/              # 共享资源
│   ├── components/
│   ├── hooks/
│   ├── utils/
│   ├── constants/
│   └── types/
├── store/               # 全局状态管理
├── services/            # API服务层
├── router/              # 路由配置
└── styles/              # 全局样式

最佳实践

1. 组件文件组织

每个组件应该有自己的文件夹，包含：

• 组件文件 (.jsx 或 .js)
• 样式文件 (.css 或 .module.css)
• 测试文件 (.test.js 或 .spec.js)
• 类型定义 (.types.js 或 .d.ts)
• 入口文件 (index.js)

Button/
├── Button.jsx
├── Button.module.css
├── Button.test.js
├── Button.types.js
└── index.js

2. 命名规范

• 组件: 使用PascalCase命名 (UserProfile)
• 文件夹: 使用PascalCase命名组件文件夹，kebab-case命名其他文件夹
• 文件: 组件文件使用PascalCase，其他文件使用camelCase或kebab-case
• 常量: 使用UPPER_SNAKE_CASE

3. 导入顺序

// 1. React相关
import React, { useState, useEffect } from 'react';// 2. 第三方库
import axios from 'axios';
import { Button } from 'antd';// 3. 内部组件
import Header from './components/Header';
import { userService } from './services/userService';// 4. 样式
import './App.css';

不同场景的目录结构

1. 小型项目 (< 50个组件)

src/
├── components/
├── pages/
├── utils/
├── styles/
├── App.js
└── index.js

2. 中型项目 (50-200个组件)

src/
├── components/
│   ├── common/
│   └── layout/
├── pages/
├── hooks/
├── services/
├── store/
├── utils/
├── constants/
└── styles/

3. 大型项目 (200+个组件)

src/
├── components/
├── features/
├── shared/
├── store/
├── services/
├── router/
├── utils/
├── types/
└── styles/

配置文件管理

环境配置

config/
├── development.js
├── production.js
├── testing.js
└── index.js

构建配置

build/
├── webpack.config.js
├── babel.config.js
└── eslint.config.js

状态管理目录结构

Redux示例

store/
├── slices/
│   ├── authSlice.js
│   ├── userSlice.js
│   └── postsSlice.js
├── middleware/
├── selectors/
└── index.js

Zustand示例

store/
├── authStore.js
├── userStore.js
├── postsStore.js
└── index.js