React项目文件结构介绍

在 React 项目中，src 目录是源代码的核心区域。虽然具体结构可能因团队规范而异，但以下是常见的文件夹结构及其用途：

📁 核心文件夹

1. components/

   • 用途：存放可复用的 UI 组件（如按钮、卡片、模态框）
   • 文件类型：.jsx/.tsx + .css/.scss（或 CSS-in-JS）
   • 建议：按功能/模块划分子目录（如 components/Button）

2. pages/ 或 views/

   • 用途：页面级组件（每个文件对应一个路由页面）
   • 文件类型：.jsx/.tsx + 专属样式
   • 示例：HomePage.jsx, UserProfile.jsx

3. assets/

   • 用途：存放静态资源
   • 文件类型：图片（.png/.svg）、字体、视频等
   • 子目录建议：images/, fonts/, icons/

4. styles/

   • 用途：全局样式和主题变量
   • 文件类型：.css/.scss、样式工具（mixins.scss）、主题配置
   • 关键文件：global.css, variables.scss

5. utils/ 或 helpers/

   • 用途：工具函数（数据处理、格式转换等）
   • 文件类型：.js/.ts（纯逻辑，无 UI）
   • 示例：dateFormatter.js, apiUtils.js

6. hooks/

   • 用途：自定义 React Hooks
   • 文件类型：.js/.ts（如 useLocalStorage.js）
   • 命名规范：以 use 开头（如 useFetchData.js）

⚙️ 进阶文件夹（按需添加）

7. context/ 或 store/

   • 用途：全局状态管理
   • 技术栈相关：
     • context/：React Context 文件
     • store/：Redux（含 slices/, actions/）或 MobX

8. services/ 或 api/

   • 用途：API 请求层
   • 文件类型：封装网络请求（如 authService.js, userAPI.js）

9. routes/

   • 用途：路由配置（React Router 等）
   • 文件类型：router.jsx 或路由守卫组件

10. constants/

    • 用途：存放常量（如 API 端点、配置项）
    • 文件类型：const.js（如 export const API_URL = "..."）

🧪 测试相关

11. __tests__/
    • 用途：单元测试/集成测试（与组件同级目录更常见）
    • 文件类型：.test.js（如 Button.test.js）

📂 其他常见文件

• 入口文件：
  • index.js：ReactDOM 渲染入口
  • App.jsx：根组件（通常包含路由）
• 配置文件：
  • setupProxy.js（CRA 代理配置）
  • 全局类型声明（如 types.d.ts for TypeScript）

🏷️ 示例结构

src/
├── assets/
│   ├── images/
│   └── fonts/
├── components/
│   ├── Button/
│   ├── Card/
│   └── Header/
├── pages/
│   ├── Home.jsx
│   └── Profile.jsx
├── styles/
│   ├── global.scss
│   └── variables.scss
├── utils/
│   └── httpClient.js
├── hooks/
│   └── useAuth.js
├── context/
│   └── AuthContext.jsx
├── services/
│   └── authService.js
├── App.jsx
└── index.js

📌 关键原则

1. 模块化：每个文件/目录职责单一
2. 一致性：遵循团队命名规范（如帕斯卡命名法组件）
3. 可伸缩性：小型项目可合并目录（如 utils/ 代替 helpers/），大型项目可细化（如 components/common/ 和 features/）

💡 提示：使用 index.js 在各目录暴露公共接口（如 components/Button/index.js 导出组件），简化导入路径。