Introduction

Starting a new React project is exciting, but one of the most common challenges for beginners is understanding the folder structure. Questions like Where should components go?, What belongs in src vs public?, and How do I keep things organized as the app grows? come up very quickly.
Understanding the purpose of each file and folder helps you keep your codebase clean, scalable, and easy to maintain. In this 2025 guide, we’ll break down the default React folder structure (created by Create React App) and a recommended custom structure used in real-world React applications.

Why Project Structure Matters in React

A well-planned project structure makes development smoother and more predictable. It helps you keep code modular and reusable, makes debugging and testing easier, improves team collaboration, ensures consistency across features, and supports long-term scalability as the application grows.

Default React Project Structure

When you create a new React project using:

npx create-react-app my-app

You’ll get a structure like this:

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── logo.svg
├── .gitignore
├── package.json
└── README.md

Folder & File Breakdown

1. node_modules/

Purpose: Contains all third-party dependencies installed via npm or Yarn.
Key points:

Automatically generated
Should never be edited manually
Excluded from version control using .gitignore

2. public/

Purpose: Holds static files that are not processed by the build system.
Important files:

index.html: The base HTML file where React mounts the app using <div id="root"></div>
favicon.ico: Browser tab icon
manifest.json: Configuration for Progressive Web Apps (PWA)
robots.txt: Instructions for search engine crawlers

3. src/

Purpose: This is where all application logic lives—components, styles, state, and services.
Key files:

index.js: Entry point that renders the root React component
App.js: The main application component, often containing routes or layout
App.css: Styles specific to the App component
logo.svg: Sample asset included for demonstration

Recommended Custom Folder Structure for Real Projects

As applications grow, the default structure becomes limiting. A more scalable and professional structure looks like this:

src/
├── assets/
├── components/
├── pages/
├── services/
├── hooks/
├── context/
├── utils/
├── routes/
├── styles/
├── App.js
└── index.js

1. assets/

Purpose: Stores static resources such as images, fonts, icons, and videos.
Keeping assets here helps maintain a clean and organized src directory.

2. components/

Purpose: Reusable UI building blocks like buttons, cards, modals, navbars, and inputs.
Best practices:

Group components by feature (e.g., components/button/, components/navbar/)
Keep related styles and test files close to the component

3. pages/

Purpose: Components that represent entire pages and are linked to routes.
Examples include Home, About, Contact, and Dashboard pages.
These are commonly used with routing libraries like react-router-dom.

4. services/

Purpose: Centralized API and external service logic.
Common files include:

axios.js        // Axios configuration
apiService.js  // fetchUsers(), loginUser(), etc.

This approach keeps API logic separate from UI components.

5. hooks/

Purpose: Custom React hooks that encapsulate reusable logic.
Examples include useAuth, useFetch, and useDebounce.
This improves code reuse and keeps components focused on UI.

6. context/

Purpose: Files related to React Context API for global state management.
Common use cases include authentication, theme handling, and shared user data.
Typical files might be AuthContext.js or ThemeProvider.js.

7. utils/

Purpose: Generic helper functions used across the app.
Examples include:

Formatters (formatDate, truncateText)
Validators (validateEmail, isPhoneNumber)
Constants and enums
This keeps component code clean and focused.

8. routes/

Purpose: Central place for defining application routes and navigation logic.
Example file:

AppRoutes.js

This helps separate routing logic from UI components and supports route guards.

9. styles/

Purpose: Global or shared styles such as CSS/SCSS files, theme variables, typography rules, or Tailwind configuration.
Organizing styles here ensures visual consistency across the app.

Conclusion

A clear and consistent folder structure is a habit every React developer should develop early. While the default Create React App structure is excellent for learning, real-world applications benefit from a structure that emphasizes separation of concerns, modularity, and scalability.
Whether you’re building a side project or working in a team, following this approach will help you write cleaner code, onboard developers faster, and maintain your React application with confidence over the long term.

React Project Folder Structure Guide (2025) – Best Practices & File Breakdown