React 2025 的推荐文件夹结构

对于2025 年的React 项目来说，一个井然有序的文件夹结构对于可维护性、可扩展性和协作便利性至关重要。无论您构建的是小型应用还是大型企业级应用，该结构都应该模块化、灵活，并能适应不同类型的项目。

以下是针对现代 React 项目的更新文件夹结构，同时考虑到最佳实践、可扩展性和性能：

1.根目录

在项目的根目录中，您应该具有以下典型文件和目录：

/my-app
  ├── /public/
  ├── /src/
  ├── /assets/
  ├── .gitignore
  ├── package.json
  ├── README.md
  ├── tsconfig.json (for TypeScript projects)
  ├── vite.config.js (for Vite projects)
  └── .eslintrc.json (or .eslint.js)

2.文件夹结构

/public

公共文件夹包含直接提供给浏览器的静态文件，例如index.html、图像和其他资产。

/public
  ├── index.html
  ├── favicon.ico
  └── /images/

/src

该src文件夹存放着你所有的 React 应用程序代码。你大部分的时间都会花在这里。

/src
  ├── /assets/           # Static assets (images, fonts, etc.)
  ├── /components/       # Reusable components
  ├── /features/         # Feature-specific logic and components (could be feature folders)
  ├── /hooks/            # Custom React hooks
  ├── /layouts/          # Layout components (e.g., Header, Footer, Sidebar)
  ├── /pages/            # Page components (routes)
  ├── /services/         # API requests, utilities, external service integrations
  ├── /store/            # State management (Redux, Zustand, Context API)
  ├── /styles/           # Global styles (CSS, SASS, Styled Components)
  ├── /types/            # TypeScript types (if using TS)
  ├── /utils/            # Utility functions, helpers, and constants
  ├── /app.tsx           # App component (entry point)
  ├── /index.tsx         # Main entry point for React
  ├── /router.tsx        # Routing (React Router setup)
  └── /config/           # Environment variables and configuration files

3. 文件夹详情

/assets：
- 在此存储图像、字体和其他媒体资产。
- 可以选择将其分成子文件夹（例如/images，/fonts）。
/components：
- 包含可在应用程序不同部分之间共享的所有可重复使用的UI 组件。
- 例子：
```
/components
  ├── Button.tsx
  ├── Modal.tsx
  └── Navbar.tsx
```

/features：

按功能（也称为基于域的结构）组织组件、钩子和逻辑。这有助于根据功能（而不是组件类型）分离代码，从而提高可扩展性和可维护性。

例子：

/features
  ├── /auth/           # Authentication-related components, hooks, reducers
  ├── /dashboard/      # Dashboard components, hooks, etc.
  └── /profile/        # Profile-related components

/hooks：
- 存储可以在您的应用程序中重复使用的自定义挂钩，例如数据获取、表单处理等。
- 例子：
```
/hooks
  ├── useAuth.ts
  ├── useFetch.ts
  └── useForm.ts
```

/layouts：

跨多个页面使用的布局组件，如页眉、侧边栏、页脚等。

例子：

/layouts
  ├── MainLayout.tsx
  ├── AdminLayout.tsx
  └── DashboardLayout.tsx

/pages：

包含使用来自或的组件的页面级组件（通常映射到路由）。/features/components

例子：

/pages
    ├── Auth/
    │   └── SignInPage.tsx
    │   └── SignUpPage.tsx
  ├── Dashboard.tsx
  ├── Home.tsx
  ├── Users.tsx
  ├── Prodcuts.tsx
  └── ContactUs.tsx

/services：
- API 请求的功能、集成第三方服务或处理外部通信的实用程序。
- 这也可能是服务挂钩或 API 相关逻辑的地方。
- 例子：
```
/services
  ├── authService.ts   # Authentication API
  └── apiService.ts    # General API calls
```

/store：

如果您使用Redux、Zustand 或 Context API 等状态管理解决方案，请将逻辑和操作保留在此处。

示例（如果使用 Redux）：

/store
  ├── /auth/          # Auth-related Redux slices
  ├── /user/          # User-related Redux slices
  └── store.ts        # Global store configuration

/styles：

在此存储全局样式、主题文件或任何CSS/SASS或CSS-in-JS样式。

例子：

/styles
  ├── index.css
  ├── theme.ts        # For theme configuration in styled-components
  └── global.scss     # Global styles for the app

/types：

如果使用 TypeScript，请将您的自定义类型或接口存储在这里，以便于管理和重用。

例子：

/types
  ├── auth.d.ts       # Types for authentication-related data
  ├── api.d.ts        # Types for API responses
  └── user.d.ts       # Types for user objects

/utils：
- 在您的应用程序中使用的通用实用程序功能（例如，日期格式、数据验证等）。
- 例子：
```
/utils
  ├── formatDate.ts
  └── validateEmail.ts
```

/config：

在此存储环境变量或应用程序配置设置，例如 API 基本 URL、功能标志等。

例子：

/config
  ├── index.ts        # Export environment variables and configurations
  ├── config.ts       # Configuration file for app set

结论

此文件夹结构为 2025 年的 React 应用程序提供了灵活、可扩展且可维护的设置。它侧重于：

模块化：按功能或领域组织（而不是仅按组件组织）。
可重用性：组件、钩子和实用程序可以轻松共享。
可扩展性：随着项目的增长，该结构允许轻松添加新功能或页面。
关注点分离：应用程序的每个部分（状态、服务、组件）都有自己的专用空间。

此结构适用于小型项目和大型应用程序。您可以根据应用程序的复杂性和要求随时调整具体细节。

喜欢这篇文章吗？

随时掌握最新科技趋势！在 Instagram 上关注我：@pramodboda.codevik 和 @pramodboda.art。
分享你的想法！👇

文章来源：https://dev.to/pramod_boda/recommended-folder-struct-for-react-2025-48mc