React Folder Structure - Complete Guide for Beginners to Advanced

React Folder Structure

1. 1When we create a React project using tools like Create React App (CRA) or Vite, it automatically generates a folder structure for us.
2. 2This structure helps us organize our code properly and keeps everything clean and manageable as the project grows.
3. 3📦 Create React App (CRA) Folder Structure:
   • node_modules/ – This folder contains all the packages (libraries) that your project depends on. It is auto-managed by npm or yarn.
   • public/ – This folder stores static files like index.html, images, and the site favicon. The browser can directly access files from here.
   • src/ – This is where we write all our React code. It includes components, styles, logic, and assets used in the application.
   • src/index.js – This is the starting point of the app. It renders the App component into the DOM.
   • src/App.js – This is the root component where we structure our UI and import other components.
   • package.json – This file keeps track of dependencies, scripts (like start or build), and basic project information.
4. 4

   Example: CRA Folder Structure

   Copy code

   Copy code

   1my-app/
   2    ├── node_modules/
   3    ├── public/
   4    │   └── index.html
   5    ├── src/
   6    │   ├── App.js
   7    │   └── index.js
   8    ├── package.json

5. 5⚡ Vite Project Folder Structure:
   • index.html – In Vite, this file is placed directly in the root folder (not inside public/). It serves as the template for the app.
   • src/ – Just like CRA, all main logic, components, and styles are written inside the src folder.
   • main.jsx or main.tsx – This is the entry point for Vite apps, similar to index.js in CRA.
   • vite.config.js – This is the configuration file for Vite. We can use it to define custom behavior, add plugins, or configure path aliases.
6. 6

   Example: Vite Folder Structure

   Copy code

   Copy code

   1vite-project/
   2    ├── node_modules/
   3    ├── src/
   4    │   ├── App.jsx
   5    │   └── main.jsx
   6    ├── index.html
   7    ├── package.json
   8    ├── vite.config.js

7. 7🔍 Important Points for Interviews:
   • In CRA, the index.html is inside the public folder, but in Vite, it's placed directly in the root.
   • Both tools use a src/ folder where we write our React code.
   • In CRA, the entry point is index.js. In Vite, it’s main.jsx.
   • CRA uses Webpack under the hood, while Vite is faster and uses ESBuild.
   • Vite’s config file vite.config.js is used to customize project setup, similar to Webpack configs.
8. 8💡 Why do we need this structure?
   • It separates logic from static assets like HTML and images.
   • It keeps our codebase organized and scalable.
   • It makes it easier for teams to collaborate and understand the project quickly.
9. 9By understanding the folder structure, we can easily add new components, manage assets, and keep the app clean and professional.
10. 11🏢 Production-Level Folder Structure in React Projects (for experienced developers):
    
    • Once your project grows (team members, features, API integrations), it's important to organize the code for real-world maintainability.
    • A common pattern is called Feature-based folder structure or Modular architecture.
11. 12

    Example: Production Folder Structure

    Copy code

    Copy code

    1my-app/
    2├── public/
    3├── src/
    4│   ├── assets/           # Images, icons, logos, fonts, etc.
    5│   ├── components/       # Reusable UI components (Button, Modal, Card, etc.)
    6│   ├── features/         # Feature-based folders (e.g. auth, dashboard, posts)
    7│   │   ├── auth/
    8│   │   │   ├── AuthPage.jsx
    9│   │   │   ├── authSlice.js
    10│   │   │   └── authAPI.js
    11│   │   └── posts/
    12│   │       ├── PostList.jsx
    13│   │       ├── postSlice.js
    14│   │       └── postAPI.js
    15│   ├── hooks/            # Custom hooks like useAuth, useFetch, etc.
    16│   ├── pages/            # Route-level components (used in react-router)
    17│   ├── layouts/          # AppShells or wrappers like Sidebar + Main Layout
    18│   ├── services/         # API logic (axios configs, endpoints)
    19│   ├── store/            # Redux store or Zustand/Context state management
    20│   ├── utils/            # Helper functions and utilities
    21│   ├── App.jsx           # Root component with router setup
    22│   └── main.jsx          # Entry point (same as index.js in CRA)
    23├── .env                  # Environment variables
    24├── package.json
    25├── vite.config.js
    26└── README.md

12. 13📘 Folder Descriptions:
    • components/ – Contains common UI pieces reused across different features (like Button, Input, Modal).
    • features/ – Grouped by business logic or domain (e.g., auth, posts, profile). Keeps feature code self-contained.
    • hooks/ – Custom React hooks to avoid repetition. Example: useDebounce, useScroll.
    • pages/ – Used with routing, each file becomes a route like /login, /dashboard.
    • layouts/ – Shared layout components like Sidebars, Headers, or TabNavigations.
    • services/ – All API call logic, usually grouped by resource (authService, postService).
    • store/ – Central state management (Redux, Context API, Zustand) setup and files.
    • utils/ – Helper functions like dateFormat, currencyFormatter, validators, etc.
    • assets/ – Static files like images, icons, logos, CSS files.
13. 14✅ Why This Structure is Better for Large Apps?
    • Helps team members quickly find and understand code.
    • Makes each feature isolated and easier to test/debug.
    • Improves code reuse and modularity.
    • Prepares your app to scale as features grow.
14. 15🗣 Interview Points:
    • In real-world apps, we follow modular folder structure based on features or domains.
    • We separate components, hooks, services, pages, and state logic to improve maintainability.
    • React Router pages go in pages/, reusable UI goes in components/.
    • API calls and logic are usually kept in services/ or inside features/ folders.
15. 16With this production-ready structure, you can confidently scale the app, add teams, and keep everything organized!