Recommended Folder Structure for React 2025

For a React project in 2025, a well-organized folder structure is essential for maintainability, scalability, and ease of collaboration. The structure should be modular, flexible, and adaptable to different types of projects, whether you're building a small app or a large-scale enterprise application.

Here's an updated folder structure for modern React projects, keeping in mind best practices, scalability, and performance:

1. Root Directory

At the root of your project, you should have these typical files and directories:

/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. Folder Structure

/public

The public folder contains static files that are served directly to the browser, such as the index.html, images, and other assets.

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

/src

The src folder is where all of your React application code resides. This is where you'll spend most of your time.

/src
├── /assets/     # Static assets (images, fonts, etc.)
├── /components/ # Reusable components
├── /features/   # Feature-specific logic and components (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. Folder Details

/assets

• Store images, fonts, and other media assets here.
• Optionally break into subfolders (e.g., /images, /fonts).

/components

• Contains all reusable UI components shared across the app.
• Example:

  /components
  ├── Button.tsx
  ├── Modal.tsx
  └── Navbar.tsx

/features

• Organize components, hooks, and logic by features (domain-based structure).
• Example:

  /features
  ├── /auth/        # Authentication-related
  ├── /dashboard/   # Dashboard features
  └── /profile/     # Profile features

/hooks

• Store custom hooks reusable across the app.
• Example:

  /hooks
  ├── useAuth.ts
  ├── useFetch.ts
  └── useForm.ts

/layouts

• Layout components used across multiple pages.
• Example:

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

/pages

• Page-level components mapped to routes.
• Example:

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

/services

• Functions for API requests, external service integration.
• Example:

  /services
  ├── authService.ts   # Auth API
  └── apiService.ts    # General API calls

/store

• State management logic and actions (Redux, Zustand, Context API).
• Example:

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

/styles

• Global styles, theme files, CSS/SASS, CSS-in-JS.
• Example:

  /styles
  ├── index.css
  ├── theme.ts      # styled-components theme config
  └── global.scss   # App global styles

/types

• TypeScript types or interfaces for easier management.
• Example:

  /types
  ├── auth.d.ts   # Auth types
  ├── api.d.ts    # API response types
  └── user.d.ts   # User types

/utils

• General utility functions shared across the app.
• Example:

  /utils
  ├── formatDate.ts
  └── validateEmail.ts

/config

• Environment variables, config settings, feature flags, etc.
• Example:

  /config
  ├── index.ts  # Export env/config
  ├── config.ts # App config file

Conclusion

This folder structure provides a flexible, scalable, and maintainable setup for React applications in 2025, emphasizing:

• Modularity: Organizing by features/domains.
• Reusability: Shared components, hooks, utilities.
• Scalability: Easy to add features or pages.
• Separation of Concerns: Dedicated space for state, services, components.

Suitable for both small projects and large-scale apps. Adjust specifics based on the project's needs!