React Project Structure

A newly created React project commonly contains several files and folders.

my-react-app/
│
├── node_modules/
├── public/
├── src/
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
└── vite.config.js

The main folder of the React application is called the project root directory.

my-react-app/
    ↓
Project Root

Important project files and folders are normally stored inside this directory.

The node_modules folder contains packages installed for the project and their dependencies.

my-react-app/
 |
 +-- node_modules/
       |
       +-- packages
       +-- dependencies

This folder is normally generated by the package manager rather than being written manually.

A project dependency can itself depend on other packages. As a result, the node_modules folder can contain a large number of files.

React Project
     ↓
Dependency
     ↓
Dependency of Dependency
     ↓
More Packages

The public folder can contain static assets that need to be served directly.

public/
 |
 +-- images/
 +-- icons/
 +-- other static files

The exact use of this folder depends on the project's build tool and configuration.

The src folder is where the main application source code is commonly stored.

src/
 |
 +-- App.jsx
 +-- main.jsx
 +-- assets/
 +-- components/

Most React development work happens inside this folder.

The App.jsx file commonly contains the main application component.

function App() {

    return (
        <h1>My React App</h1>
    );

}

export default App;

The exact contents of the file depend on the application.

The main.jsx file commonly serves as the entry point that connects the React component tree to the HTML page.

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

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

The index.html file provides the HTML document used by the application.

<!doctype html>
<html>

<head>
    <title>React App</title>
</head>

<body>

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

</body>

</html>

The React application is mounted into the root element.

The HTML page commonly contains an element with an ID such as root.

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

The React entry file finds this element and renders the React component tree into it.

HTML
 ↓
#root
 ↓
React
 ↓
App Component

The package.json file contains important information about a JavaScript project.

{
    "name": "my-react-app",
    "version": "0.0.0",
    "scripts": {},
    "dependencies": {}
}

It can contain project metadata, scripts, dependencies, and other configuration information.

The dependencies section of package.json lists packages required by the application.

{
    "dependencies": {
        "react": "...",
        "react-dom": "..."
    }
}

The exact versions depend on the project setup.

Projects can also contain devDependencies. These are packages commonly needed during development or building.

{
    "devDependencies": {
        "vite": "..."
    }
}

The exact packages depend on the project's configuration.

The package-lock.json file records detailed information about installed dependency versions and their dependency tree.

package.json
     ↓
Dependencies
     ↓
package-lock.json
     ↓
Resolved Packages

It helps npm reproduce dependency installations consistently.

In a Vite-based project, vite.config.js can be used to configure Vite.

import { defineConfig } from 'vite';

export default defineConfig({
    // configuration
});

The file may contain project-specific build and development configuration.

The .gitignore file tells Git which files and folders should normally not be tracked.

node_modules/
dist/
.env

The exact entries depend on the project and its requirements.

A React project can contain an assets folder inside src for files such as images, icons, fonts, or other resources that are imported into the application.

src/
 |
 +-- assets/
       |
       +-- logo.png
       +-- image.jpg

Developers often create a components folder to organize reusable React components.

src/
 |
 +-- components/
       |
       +-- Header.jsx
       +-- Footer.jsx
       +-- Button.jsx

This is a common organizational pattern rather than a requirement.

function Header() {

    return (
        <header>
            <h1>My Website</h1>
        </header>
    );

}

export default Header;

The component can then be imported into another component.

import Header from "./components/Header";

function App() {

    return (
        <div>
            <Header />
        </div>
    );

}

export default App;

This allows the application to use the reusable Header component.

As an application becomes larger, components can be grouped into logical folders.

src/
 |
 +-- components/
 |     +-- Header/
 |     +-- Footer/
 |     +-- Button/
 |
 +-- pages/
 |     +-- Home/
 |     +-- About/
 |
 +-- App.jsx
 +-- main.jsx

Some React projects use a pages folder to organize components that represent complete application pages or views.

src/
 |
 +-- pages/
       |
       +-- Home.jsx
       +-- About.jsx
       +-- Contact.jsx

This folder is a common convention, not a mandatory React feature.

A project may contain a folder for CSS or other styling files.

src/
 |
 +-- styles/
       |
       +-- App.css
       +-- main.css

The exact organization depends on the styling approach used by the project.

Larger applications may use a services folder to keep API-related or external-service logic separate from UI components.

src/
 |
 +-- services/
       |
       +-- api.js
       +-- userService.js

This organization can help separate UI code from application services.

Applications using React Context may organize context-related files in a separate folder.

src/
 |
 +-- context/
       |
       +-- AuthContext.jsx
       +-- ThemeContext.jsx

This is an optional project organization pattern.

my-react-app/
│
├── public/
│
├── src/
│   ├── assets/
│   ├── components/
│   ├── context/
│   ├── pages/
│   ├── services/
│   ├── styles/
│   ├── App.jsx
│   └── main.jsx
│
├── .gitignore
├── index.html
├── package.json
├── package-lock.json
└── vite.config.js

index.html
     ↓
main.jsx
     ↓
App.jsx
     ↓
Components
     ↓
Pages
     ↓
Services / Context
     ↓
User Interface

This gives a simplified view of how different parts of a React project can be connected.

Open Project
     ↓
Edit src/
     ↓
Run npm run dev
     ↓
Development Server
     ↓
Browser
     ↓
Test Application
     ↓
Edit Again

• Keep related files together.
• Use meaningful folder names.
• Separate reusable components.
• Keep application logic organized.
• Avoid putting every component in one large file.
• Use a structure that matches the size of the project.
• Do not create unnecessary folders for a very small project.
• Keep configuration files in the project root when appropriate.

A React project is made up of source code, configuration files, dependencies, and static assets. The exact structure can change according to the tools and architecture used by the project.

React Project
     |
     +-- public/
     |     └── Static Files
     |
     +-- src/
     |     +-- components/
     |     +-- pages/
     |     +-- services/
     |     +-- context/
     |     +-- assets/
     |     +-- App.jsx
     |     └── main.jsx
     |
     +-- package.json
     +-- package-lock.json
     +-- index.html
     +-- vite.config.js
     └── .gitignore

Understanding this structure will make it easier to create and organize React applications as you progress through the tutorial.