Project structure overview in React

Introduction

Organizing your React project helps you find files easily and keeps your code neat. It makes working on your app simpler and faster.

Starting a new React app to keep code clean from the beginning

Working with a team so everyone understands where to put code

Adding new features and wanting to keep related files together

Debugging or updating code and needing to find files quickly

Scaling your app so it stays organized as it grows

Syntax

React

my-react-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   └── Button.jsx
│   ├── pages/
│   │   └── Home.jsx
│   ├── App.jsx
│   ├── index.jsx
│   └── styles/
│       └── main.css
├── package.json
└── README.md

public/ holds static files like the main HTML page.

src/ contains all React code and styles.

Examples

Separate components and pages into folders for clarity.

React

src/components/Header.jsx
src/components/Footer.jsx
src/pages/About.jsx
src/pages/Contact.jsx
src/App.jsx
src/index.jsx

Static files that the browser loads directly go in public/.

React

public/index.html
public/robots.txt
public/favicon.ico

Keep all CSS files in a styles folder inside src/.

React

src/styles/main.css
src/styles/theme.css

Sample Program

This simple React app shows how files are organized: Greeting.jsx is a component inside components/. App.jsx uses it, and index.jsx starts the app.

React

/* File: src/components/Greeting.jsx */
import React from 'react';

export default function Greeting() {
  return <h1>Hello, welcome to the app!</h1>;
}

/* File: src/App.jsx */
import React from 'react';
import Greeting from './components/Greeting';

export default function App() {
  return (
    <main>
      <Greeting />
    </main>
  );
}

/* File: src/index.jsx */
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

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

Important Notes

Keep components small and focused on one job.

Use folders to group related files like components, pages, and styles.

Always name your main entry file index.jsx or index.js for clarity.

Summary

Organizing your React project helps keep code clean and easy to find.

Use folders like components/, pages/, and styles/ inside src/.

The public/ folder holds static files like index.html.