<!DOCTYPE html>
在构建小型应用时，几乎任何结构都能跑得起来。但一旦项目开始增长——组件变多、业务逻辑复杂、接入 API、引入 state ——如果文件夹结构一开始没想清楚，很快就会陷入混乱。
在这篇文章中，我会分享一个我在 2025 年个人常用、并且非常认可的现代化、可扩展 React 文件夹结构。无论你是在做个人项目，还是打算扩展一个企业级应用，这套结构都能帮助你保持组织清晰、一致，并且心态稳定。
为什么文件夹结构这么重要
在开始之前，先问一句——为什么要在意这些？
因为一个干净的结构可以：
- 让新成员（或者未来的你）更容易上手：明确职责边界（UI、逻辑、数据获取）。
- 明确职责边界（UI、逻辑、数据获取）：减少 bug 和重复代码。
- 减少 bug 和重复代码：鼓励可扩展性和模块化。
结构设计（清晰、可扩展、对开发者友好）
以清晰度为核心构建
.
├── eslint.config.js
├── index.html
├── package.json
├── public
│ └── vite.svg
├── README.md
├── src
│ ├── App.css
│ ├── App.tsx
│ ├── assets # 图片，字体，图标等等
│ │ └── react.svg
│ ├── components # 可重复使用的纯 UI 组件
│ │ └── Button
│ │ ├── Button.module.css
│ │ ├── Button.test.ts
│ │ └── index.tsx
│ ├── features # 业务逻辑和特定功能相关
│ │ └── auth
│ │ ├── AuthPage.tsx
│ │ ├── components
│ │ ├── hooks
│ │ └── services
│ ├── hooks # 自定义 hooks
│ ├── layouts # 可重复调用的Layout封装(DashBoradLayout、AuthLayout)
│ ├── pages # 与路由结构保持一致(映射到routes)
│ ├── routes # 路由的集中配置(React Router)
│ ├── services # API调用
│ ├── store # 全局状态
│ ├── types # 类型定义
│ ├── utils # 工具函数、常量、帮助文件等
│ ├── config # 环境配置、主题、应用设置等等
│ ├── index.css
│ └── main.tsx
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
1. Components vs. Features
- 使用 /components 存放 纯 UI 组件——无状态、可复用、跨应用使用（例如：Button、Input、Modal）。
- 使用 /features 存放 业务逻辑和特定功能相关的文件。每个领域（如 auth 、 chat 、 profile ）都有自己的文件夹，内部通常包含：
-
components/services/hooks/pages/甚至可以有自己的 state（ store/ ）
这种方式可以让逻辑就近收敛，避免文件膨胀或混乱的全局 state。
2. Pages = Routes
让 /pages 文件夹与路由结构保持一致。
每一个 page 对应一个 route，内部可以自由引入 feature 模块或 layout。
3. 集中的 Services 层
API 调用不应该写在组件里。
使用 /services 文件夹来统一定义所有后端请求。例如：
export const login = (credentials) => axios.post('/login', credentials)
让 UI 专注于 UI。它应该在 /services/auth.js 。
这样当后端接口发生变化时，你只需要修改一个地方。
4. 全局 Store？只在真正需要时才用
不要从第一天就上全局 state。
优先把 state 保持在 feature 内部。只有当 state确实需要在距离很远的组件之间共享时，才考虑 Redux、Zustand 或 Context API。
5. Hooks：无痛复用逻辑
自定义 hooks 是救命稻草。
无论是 useAuth 、 useDebounce 还是 useForm ，把它们放在统一的 /hooks 文件夹里，可以在不复制代码的情况下复用逻辑。
它们尤其适合处理：
- API fetching、表单处理
- 表单处理、动画或副作用
- 动画或副作用、LocalStorage / session 相关逻辑
没有一种文件夹结构可以适用于所有场景。但我在这里分享的这套布局，已经在个人项目、团队项目以及 hackathon 中被反复验证，具备良好的扩展性。
保持模块化。
保持干净。
保持清晰。
RECOMMEND
推荐阅读
