Lesson 6 — React Folder Structure Explained

by

Introduction

When you create a new React application, you will see many folders and files.
For beginners, this structure may look confusing at first.

But don’t worry 😊
Once you understand the purpose of each folder and file, working with React becomes much easier.

In this lesson, you will learn:

  • Default React folder structure
  • Purpose of important files
  • Which files you should edit and which you should not
  • Best practices for beginners

Default React Folder Structure

After creating a React app (using CRA or Vite), your project looks like this:

my-app/
│
├── node_modules/
├── public/
├── src/
├── package.json
├── package-lock.json
├── README.md

Let’s understand each part one by one.

node_modules Folder

The node_modules folder contains all the dependencies and libraries used in your React project.

Important points:

  • It is created automatically
  • It can be very large
  • You should never modify files inside this folder
  • Do not upload it to GitHub

👉 React uses this folder to run your application.

public Folder

The public folder contains static files.

Common files inside public folder:

  • index.html
  • Images
  • Favicon

index.html

This is the main HTML file of your React app.

React injects your entire application into this line:

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

👉 You usually don’t edit this file frequently.

src Folder (MOST IMPORTANT)

The src (source) folder is where you write most of your React code.

This is the heart of your React application ❤️

Important Files Inside src Folder

App.js

App.js is the main component of your application.

Example:

function App() {
  return <h1>Hello React</h1>;
}

export default App;

👉 Most beginners start writing code inside App.js.

index.js / main.jsx

This file is the entry point of your React app.

Its job is to:

  • Load the App component
  • Attach React to the browser DOM

Example:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(&lt;App />);

👉 You usually don’t change this file often.

App.css

This file contains styles related to App component.

Example:

h1 {
  color: blue;
}

index.css

This file contains global CSS styles used across the app.

Other Common src Files

Depending on setup, you may also see:

  • logo.svg
  • reportWebVitals.js
  • setupTests.js

👉 These are optional and not required for beginners.

Recommended Folder Structure for Beginners

As your app grows, keeping everything in one file becomes messy.

A better structure is:

src/
│
├── components/
├── pages/
├── services/
├── styles/
├── App.js
├── index.js

components

Reusable UI parts like:

  • Header
  • Footer
  • Button
  • Navbar

pages

Full pages like:

  • Home
  • Login
  • Register
  • Dashboard

services

API calls and business logic.

styles

CSS or styling-related files.

Which Files Should Beginners Focus On?

As a beginner, focus mainly on:

  • src/App.js
  • src/components/
  • src/pages/

👉 Ignore advanced files until you gain confidence.

Common Mistakes to Avoid

❌ Editing files inside node_modules
❌ Deleting index.js or main.jsx
❌ Writing all code in one file
❌ Mixing API logic and UI code

Summary

In this lesson, you learned:

  • React default folder structure
  • Purpose of important folders
  • Role of src folder
  • Best practices for organizing files

Understanding folder structure will help you:

  • Write clean code
  • Debug easily
  • Scale your application

Frequently Asked Questions (FAQs)

Is src folder mandatory in React?

Yes. All React logic and components live inside the src folder.

Can I rename App.js?

Yes, but you must update its import wherever it is used.

Should I delete unused files?

Yes. Removing unused files helps keep your project clean.

What’s Next?

👉 In the next lesson, we will learn:

Lesson 7 — JSX Explained
Understanding JSX syntax and how React uses it internally.

Leave a Comment