React Project Structure

Imagine moving into a new house. The first thing you do is explore each room to know where the kitchen, bedroom, and bathroom are. Understanding your project structure is exactly like that – it helps you know where to find things and where to put new code.

When you create a React app using Create React App, it generates a standard folder and file structure. Let's explore it room by room.

The Top-Level Structure

my-react-app/
  ├── node_modules/
  ├── public/
  ├── src/
  ├── .gitignore
  ├── package.json
  ├── package-lock.json (or yarn.lock)
  └── README.md

1. node_modules/

This folder contains all the third-party libraries and dependencies that your project needs. React itself, ReactDOM, testing libraries, and many other tools live here.

Important Notes:

This folder is huge (can be thousands of files). You never need to manually change anything here.

It's listed in `.gitignore`, so it's not committed to version control. Anyone cloning your project can run `npm install` to recreate it.

2. public/

This folder contains static assets that won't be processed by Webpack. Files here are copied directly to the build folder.

public/
  ├── index.html
  ├── favicon.ico
  ├── manifest.json
  └── robots.txt

public/index.html

This is the single HTML file that serves your entire React application. It contains a `

` element where your React app will be injected.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>React App</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
</body>
</html>

3. src/

This is where you'll spend most of your time. The `src` (source) folder contains your application's source code – JavaScript, CSS, images, and components.

src/
  ├── App.js
  ├── App.css
  ├── App.test.js
  ├── index.js
  ├── index.css
  ├── logo.svg
  └── reportWebVitals.js

src/index.js

This is the JavaScript entry point. It's the first file that runs. Its job is to render your main `App` component into the DOM.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

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

src/App.js

This is your main application component. It's the root component of your app. You'll start building your UI here, and later break it into smaller components.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello, React!</p>
      </header>
    </div>
  );
}

export default App;

src/App.css

This file contains the CSS styles specifically for the `App` component. By convention, each component can have its own CSS file.

4. package.json

This is the heart of your project. It contains metadata about your project and lists all dependencies and scripts.

{
  "name": "my-react-app",
  "version": "0.1.0",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

Important Scripts

npm start: Runs the app in development mode with hot reloading.

npm run build: Creates an optimized production build.

npm test: Runs the test suite.

5. Other Important Files

.gitignore: Tells Git which files/folders to ignore (like `node_modules`).

README.md: A markdown file with information about your project. You should update this.

Best Practices for Organizing Your `src` Folder

As your app grows, you'll want to organize your `src` folder better. A common structure is:

src/
  ├── components/     <!-- Reusable components -->
  │   ├── Button.js
  │   ├── Header.js
  │   └── Footer.js
  ├── pages/          <!-- Page-level components -->
  │   ├── Home.js
  │   └── About.js
  ├── hooks/          <!-- Custom hooks -->
  ├── utils/          <!-- Helper functions -->
  ├── assets/         <!-- Images, fonts -->
  ├── App.js
  └── index.js

Two Minute Drill

node_modules/: Contains all dependencies. Never modify manually.

public/: Static assets. `index.html` is the single HTML file.

src/: Your source code. `index.js` is the entry point, `App.js` is the main component.

package.json: Lists dependencies and scripts (start, build, test).

As your app grows, organize your `src` folder into subfolders like `components`, `pages`, `hooks` for maintainability.

The `build` command creates optimized files for deployment.

Practice Exercises Interview Questions Take Quiz

Need more clarification?

Drop us an email at career@quipoinfotech.com

Welcome to Quipoin

Quipoin Menu

React Project Structure

Need more clarification?