ReactJS Folder Structure

Once you’ve successfully created your first React app — whether using Vite, manual setup, or any other method — the next step is understanding how the React project folder structure works. This is the foundation of every React application.

Think of it like the blueprint of your project — it tells you where your files live, how components connect, and how data flows across your app.

Default React Folder Structure

When you create a React app using:


npm create vite@latest my-react-app

You’ll see this folder structure:


my-react-app/
│
├── node_modules/
├── public/
│   └── favicon.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

Note: Here, this folder structure can be different as per installation process but vary project to project.
Let’s go through each of these step by step.

1. node_modules/

This folder stores all your npm dependencies — libraries like React, ReactDOM, and any third-party packages you install.
It’s automatically created when you run npm install.

Note: Don’t edit or upload this folder to GitHub.

2. public/

The public folder contains static files that are not processed by React or bundled by Vite.
Anything inside public is copied directly to the final build folder.

Common files:
  • favicon.svg — the small icon in your browser tab
  • Images, JSON files, or manifest files

Note: Use this folder for assets that should be publicly accessible or unchanged.

3. src/

The src folder is where all the magic happens.
It contains your app’s actual code — React components, styles, hooks, and logic.

By default, you’ll see:
File Purpose
App.jsx The root React component (acts as your main layout).
main.jsx Entry point that connects React to the DOM.
index.css Global stylesheet.
assets/ Local images or icons.

4. .gitignore

This file tells Git which files or folders to ignore during version control.

Example contents:


node_modules
dist
.env
.vscode
.DS_Store

5. index.html

The only HTML file in your React app.

Example:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My React App</title>
  </head>

  <body>
    <div id="root"></div>

    <script 
      type="module" 
      src="/src/main.jsx"
    ></script>
  </body>

</html>

React uses the div with id="root" as a placeholder to inject your entire app dynamically.

Note: Think of this as your app’s container — React takes care of rendering everything inside it.

6. package.json

This file is the blueprint of your project. It defines dependencies, scripts, and project metadata.

Example: 

{
  "name": "my-react-app",
  "version": "1.0.0",

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

  "dependencies": {
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },

  "devDependencies": {
    "vite": "^5.0.0"
  }
}
Key points:
  • "dependencies" → Libraries your app uses in production
  • "devDependencies" → Tools needed only during development
  • "scripts" → Commands you can run via npm (like npm run dev)

8. README.md

This Markdown file explains your project — its purpose, how to install and run it, and any special notes.

Example:


# My React App
A simple React project built with Vite.

## Commands
- `npm run dev` → start dev server
- `npm run build` → build for production

Note: A good README improves credibility — especially on GitHub or for clients.

Suggested Folder Structure for Growing Apps

As your app expands, organizing files becomes crucial. Here’s a recommended professional folder structure for react applications :


src/
├── assets/         # Images, fonts, icons
├── components/     # Reusable UI components
├── pages/          # Page-level layouts
├── hooks/          # Custom hooks
├── context/        # Global state (Context API)
├── services/       # API calls
├── styles/         # CSS/styled components
├── App.jsx
├── main.jsx
└── index.css

Note: This helps teams scale efficiently while keeping the code maintainable.

Final Thoughts

Understanding your React folder structure is essential before diving into coding. It helps you:

  • Locate files faster
  • Keep your project organized
  • Avoid confusion when collaborating with others

Once you know how each part fits together — from index.html to vite.config.js — building and debugging become much easier.