React Project Folder Structure Explained: Complete Beginner's Guide (2026)

 React Project Folder Structure: Complete Guide with Examples

1. Introduction

When you create your first React application, you will notice that it contains several folders and files. At first, understanding their purpose can be confusing, especially for students who are new to frontend development. However, learning the React project folder structure is an important step in becoming a React developer.

A React project is organized into different folders to keep source code, images, stylesheets, configuration files and installed packages separate. Every file has a particular purpose, and knowing where to write your code makes development easier.

In this tutorial, we will understand the React project folder structure created using Vite. You will learn about important folders such as src, public and node_modules, along with files like App.jsx, main.jsx, package.json and index.html.

We will also create our own folders and components with practical code examples. This guide uses simple English so beginners can understand how a React project is organized.

Create React App Using Vite: Complete Beginner's Guide

2. What Is React Project Folder Structure?

React project folder structure refers to the way files and folders are arranged inside a React application. It helps developers organize their code and manage different parts of a website.

When you create a React project using Vite, it automatically generates some important folders and files. Each one has a different responsibility.

For example, the src folder contains the main application code, the public folder stores static files, and package.json contains project information and dependencies.

Default React Project Folder Structure Using Vite

After creating a React project using Vite, you will see a structure similar to this:

my-react-app/

│

├── node_modules/

│

├── public/

│   └── vite.svg

│

├── src/

│   ├── assets/

│   │   └── react.svg

│   │

│   ├── App.jsx

│   ├── App.css

│   ├── index.css

│   └── main.jsx

│

├── .gitignore

├── index.html

├── package.json

├── package-lock.json

├── README.md

└── vite.config.js

The exact files may change depending on the Vite version and template you select. Let's understand the important folders and files one by one.

2.1 node_modules Folder

The node_modules folder contains the packages and libraries installed in your React project.

For example, when you install React and Vite using npm, their required packages are stored inside this folder.

You normally do not need to edit these files manually. npm manages the installed packages.

2.2 public Folder

The public folder contains static files that can be accessed directly by the browser.

You can store files such as:

• Website icons
• Favicon images
• Robots.txt
• Static images
• Other public resources

For example, a file named logo.png inside the public folder can be accessed using:

/logo.png

Files in public are served as-is rather than imported and processed through the usual Vite asset module pipeline.

2.3 src Folder

The src folder is one of the most important folders in a React application. It contains the main source code of your website.

Developers usually write React components, JavaScript code, CSS styles and application logic inside this folder.

You can also create additional folders inside src, such as:

• components
• pages
• assets
• hooks
• services
• utils

2.4 App.jsx File

App.jsx contains the main or root React component of the application.

You can use this file to organize the main user interface and include other components.

For example, your App.jsx file can contain a header, navigation menu, homepage content and footer.

2.5 main.jsx File

main.jsx is the entry point of a typical Vite React application.

It imports the React libraries and renders the App component inside the HTML element with the id root.

2.6 App.css File

App.css contains styles related to the App component. You can use CSS to change colours, fonts, spacing, backgrounds and layouts.

2.7 index.css File

index.css usually contains global styles that apply throughout your application.

For example, you can define the default font, body margin, background colour and general styling.

2.8 index.html File

The index.html file is located in the root directory of a standard Vite React project.

It contains the basic HTML structure and the root element where React displays the application.

2.9 package.json File

package.json contains important information about your project, including its name, scripts, dependencies and development dependencies.

For example, it defines commands such as:

npm run dev

npm run build

npm run preview

2.10 vite.config.js File

vite.config.js contains configuration settings for the Vite development and build tool.

Developers can use this file to configure plugins, aliases, development server settings and other build options.

What is SPA? Single Page Application Explained

3. How Does React Project Structure Work?

A React application uses different files together to display a website in the browser. Understanding the relationship between these files makes it easier to follow the application flow.

Let's understand the process step by step.

Step 1: Browser Loads index.html

When you open your React application, the browser loads the root index.html file.

This file contains an HTML element where the React application will appear.

Step 2: main.jsx Starts the Application

The main.jsx file imports React, ReactDOM and the App component.

It uses createRoot() to connect the React application to the HTML root element.

Step 3: App.jsx Displays the Main Component

App.jsx contains the main application interface. It can also import other components such as Header, Footer and Home.

Step 4: Components Display the Content

React components display different sections of the website. They can also receive information through props and manage changing data through state.

Step 5: CSS Files Style the Application

App.css and index.css provide the styles needed to make the application attractive and user-friendly.

In this way, different files work together to display a complete React application.

4. Features of React Project Folder Structure

A well-organized React project provides several useful features for developers.

4.1 Easy Code Management

Different files have different responsibilities, making it easier to find and manage application code.

4.2 Reusable Components

You can create separate components and reuse them in multiple parts of your application.

4.3 Better Project Organization

Folders such as components, pages and assets help keep related files together.

4.4 Easy Maintenance

When your application becomes larger, an organized structure makes it easier to update and maintain code.

4.5 Separation of Responsibilities

HTML entry files, React components, CSS styles and configuration settings are kept in their appropriate locations.

4.6 Supports Large Applications

You can add more folders and files as your project grows without keeping everything in one place.

4.7 Easy Team Collaboration

A consistent folder structure helps different developers understand the project and work on separate features.

4.8 Flexible Organization

React does not force developers to follow one fixed folder structure. You can organize files according to the size and requirements of your application.

5. Advantages and Disadvantages of React Project Structure

Understanding the benefits and limitations of project organization helps developers choose a suitable structure.

Advantages

1. Easy navigation: Developers can quickly find the required files.
2. Code reusability: Components can be reused across different pages.
3. Better maintenance: Related files are easier to manage and update.
4. Teamwork: A clear structure makes collaboration easier.
5. Scalability: New folders and components can be added as the application grows.

Disadvantages

1. Initial confusion: Beginners may find many folders and files difficult to understand.
2. Extra organization: Creating too many folders can make small projects unnecessarily complicated.
3. Import management: Moving files may require updating import paths.
4. No fixed standard: React does not provide one compulsory folder structure for every project.

The best approach is to start with a simple structure and add folders when your application needs them.

6. Best Practices for Organizing React Project Folders

Good folder organization helps developers write readable and maintainable code.

Here are some useful practices for beginners.

6.1 Create a Components Folder

Store reusable UI components such as Header.jsx, Footer.jsx, Button.jsx and Navbar.jsx inside the components folder.

6.2 Create a Pages Folder

Keep main page components such as Home.jsx, About.jsx and Contact.jsx inside the pages folder.

6.3 Use an Assets Folder

Store images, icons, fonts and other imported resources inside the assets folder.

6.4 Use Clear File Names

Use meaningful names such as ProductCard.jsx instead of unclear names like file1.jsx.

6.5 Avoid Unnecessary Folders

Do not create many folders for a small application. Add new folders when they provide a clear organizational benefit.

6.6 Keep Related Files Together

When a component has its own CSS file and tests, keeping these files together can make the project easier to maintain.

7. React Code Examples

Now let's understand how to organize a React project using practical examples.

For this example, we will create a simple website with a Header component and a Home component.

7.1 Create Additional Folders

Inside the src folder, create two new folders:

src/

├── components/

├── pages/

├── assets/

├── App.jsx

├── App.css

├── index.css

└── main.jsx

The components folder stores reusable UI components, while the pages folder stores complete page components.

7.2 Create Header Component

Inside components, create a file named Header.jsx.

Write the following code:

function Header() {

  return (

    <header>

      <h1>Web Designing Theory</h1>

      <nav>

        <a href="/">Home</a>

        <a href="/about">About</a>

      </nav>

    </header>

  );

}

 

export default Header;

This component displays the website title and navigation links.

7.3 Create Home Component

Inside the pages folder, create Home.jsx.

function Home() {

  return (

    <main>

      <h2>Welcome to React</h2>

      <p>

        Learn React step by step with

        practical examples.

      </p>

    </main>

  );

}

 export default Home;

This component displays the main homepage content.

7.4 Import Components into App.jsx

Open App.jsx and add the following code:

import Header from "./components/Header";

import Home from "./pages/Home";

 function App() {

  return (

    <div>

      <Header />

      <Home />

    </div>

  );

}

 export default App;

Here, we import the Header and Home components and display them inside the App component.

7.5 Connect React Using main.jsx

Open main.jsx and check that your application is connected to the root HTML element.

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>

);

This file starts the React application and displays the App component inside the browser.

7.6 Add CSS Styling

Open index.css and add:

body {

  margin: 0;

  font-family: Arial, sans-serif;

  background: #f5f5f5;

} 

header {

  background: #20232a;

  color: white;

  padding: 20px;

}

 nav a {

  color: white;

  margin-right: 15px;

  text-decoration: none;

}

 main {

  padding: 30px;

}

This CSS makes the header dark and adds spacing to the homepage content.

7.7 Run Your React Application

Open your terminal and run:

npm run dev

Open the local URL displayed in your terminal.

You should now see your website with the header and homepage content.

Through this example, you have learned how to create folders, organize components, import files and display them in a React application.

8. Frequently Asked Questions (FAQs)

Q1. What is React project folder structure?

React project folder structure is the organization of files and folders used to develop and manage a React application.

Q2. What is the src folder in React?

The src folder contains the main application source code, including components, JavaScript files, CSS styles and imported assets.

Q3. What is the public folder used for?

The public folder stores static files that are served directly to the browser, such as favicons and other public resources.

Q4. What is App.jsx in React?

App.jsx is commonly used as the root component of a React application. It organizes the main user interface.

Q5. What is main.jsx in Vite?

main.jsx is the entry point that renders the React application inside the root HTML element.

Q6. What is the use of node_modules?

node_modules stores the installed packages and dependencies required by your application.

Q7. What is package.json in React?

package.json stores project information, dependencies and useful npm scripts.

Q8. Can we create our own folders in React?

Yes. Developers can create folders such as components, pages, hooks, services and utils according to project requirements.

Q9. Does React have a fixed folder structure?

No. React does not require one fixed folder structure. Developers can choose an organization that suits their project.

Q10. Which folder contains React components?

React components are commonly stored inside the src folder, often organized in a separate components folder.

10. Conclusion

Understanding the React project folder structure is an important part of learning React.js. It helps beginners understand where application code, images, stylesheets and configuration files are stored.

In this tutorial, we explored the Vite React project structure and learned about important folders such as src, public and node_modules. We also understood files such as App.jsx, main.jsx, index.html and package.json.

Finally, we created our own components and organized them into separate folders using practical code examples.

Remember that good project organization makes development easier as your application grows. Start with a simple structure, practise regularly and gradually build more advanced React projects.

Keep learning and keep building with Web Designing Theory!

Visit our blog for more web development tutorials:

https://webdesigningtheory.blogspot.com/