React Project Folder Structure

What is Project Folder Structure in React?

A fresh Vite React project contains index.html at the root, a src folder holding main.jsx and App.jsx, a public folder for static files, and package.json describing dependencies and scripts. Everything you write day to day lives inside src.

Why Project Folder Structure matters

Knowing which file is the entry point and where the app is mounted removes most of the confusion beginners feel when opening a generated project for the first time, and it is the foundation for organising a larger codebase later.

Project Folder Structure example

my-app/
├── index.html          # single HTML page with <div id="root">
├── package.json        # dependencies and npm scripts
├── vite.config.js      # build configuration
├── public/             # static files copied as-is
└── src/
    ├── main.jsx        # entry point — mounts React into #root
    ├── App.jsx         # root component
    ├── components/     # reusable UI components
    ├── pages/          # route-level screens
    ├── hooks/          # custom hooks
    └── assets/         # images, fonts imported by code

How this works

index.html holds one empty div. main.jsx finds that div and tells React to render App inside it. From then on every visible element is produced by React components, which is why the page source looks almost empty when you view it.

src/main.jsx — where React attaches to the page

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.jsx';
import './index.css';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
);

Key points to remember

• Group by feature once the app grows past roughly twenty components — not by file type.
• Files in public/ are served unchanged; reference them with a leading slash, for example /logo.png.
• Images imported from src/assets are hashed and optimised by the build.
• Component files conventionally use PascalCase names that match the component inside.

Common mistakes with Project Folder Structure

• Editing index.html to add UI — that page stays almost empty by design.
• Importing files from public/ with a relative path instead of an absolute one.
• Creating deeply nested component folders too early; flat is easier to navigate at the start.