A guide to understanding the folder and file structure of a standard React application (created with create-react-app).

my-react-app/
├── node_modules/
├── public/
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── index.js
│   ├── index.css
│   ├── App.js
│   ├── App.css
│   └── reportWebVitals.js
├── package.json
└── package-lock.json

Contains all the third-party libraries and dependencies your project needs to run — things like react, react-dom, babel, and more.

Important: You should never commit node_modules/ to Git. It is listed in .gitignore by default because it can contain thousands of files and is very large.

Anyone cloning your project can recreate it by running:

npm install

This reads package.json and installs everything automatically.

This folder holds static assets — files that do not need any processing or transformation before being served to the browser.

The single HTML page that serves as the entry point for your React app. React mounts the entire application inside the <div id="root"> element here.

A configuration file for Progressive Web App (PWA) settings. You can define:

• App name and short name
• Theme and background colors
• Icons for home screen installation

Example:

{
  "short_name": "MyApp",
  "name": "My React Application",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Tells search engine crawlers (like Googlebot) which pages or files they are allowed or not allowed to index.

User-agent: *
Disallow: /admin        # Search engines will NOT index /admin
Allow: /                # Search engines CAN index everything else

This is where all your application code lives. Files here are written in JSX (HTML-like syntax inside JavaScript), which needs to be processed and compiled by Babel before the browser can understand it.

The JavaScript entry point of your app. It connects the React component tree to the index.html file by rendering the root <App /> component into the DOM.

Global styles that apply across your entire application.

Each React component typically has two files:

• A .js file — contains the component logic and JSX structure (HTML + JavaScript)
• A .css file — contains styles specific to that component

Think of each component as a self-contained unit of UI with its own HTML, CSS, and JavaScript.

Used to measure and report performance metrics of your web app (e.g., page load time, interactivity, layout stability). You can log results to the console or send them to an analytics service.

The central configuration file for your project. It describes:

Lists all the libraries your project needs. When someone clones your repo and runs npm install, npm reads this file to install the correct packages.

{
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Defines shortcut commands you can run with npm run <script-name>.

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "runmyjs": "node ./index.js"
  }
}

Running npm run runmyjs will look up "runmyjs" in the scripts section and execute node ./index.js.

Records the exact version of every package (and its sub-dependencies) that was installed. This ensures every developer on the team gets the same dependency tree.

npm uses semantic versioning: MAJOR.MINOR.PATCH (e.g., 18.2.3)

When package-lock.json is present, npm install will always install the exact versions recorded in it, regardless of what ranges are specified in package.json. This guarantees consistency across all environments.

Browser
  └── public/index.html         ← Static entry point
        └── src/index.js        ← React entry point (processed by Babel)
              └── App.js        ← Root component
                    └── Other Components...
npm install
└── reads package.json / package-lock.json
└── downloads to node_modules/

Last updated for React 18 / Create React App