0% completed
When you create a new React application using Create React App (CRA) or Vite, it comes with a predefined file and folder structure. Understanding this structure is crucial for organizing your code, maintaining scalability, and ensuring a smooth development experience.
In this lesson, we’ll explore the common files and folders in a React project and how they work together.
You will see a folder structure like this:
my-app/
│── node_modules/
│── public/
│── src/
│── .gitignore
│── package.json
│── package-lock.json (or yarn.lock)
│── README.md
Let’s break down these folders and files in detail:
node_modules/ FolderThis folder contains all the dependencies (packages) installed for the project. It is automatically generated when you run npm install or yarn install, so you should never modify its contents manually.
public/ FolderThe public folder holds static files that are directly served without any processing.
Key Files in the public/ folder:
index.html – The main HTML file where the React app is injected. It contains the <div id="root"></div> where React components are rendered.favicon.ico – The website’s icon displayed in the browser tab.manifest.json – Provides metadata for Progressive Web Apps (PWAs).robots.txt – Instructs search engines on how to crawl your site.You can place images and other static assets in
public/, but in most cases, storing assets insrc/is recommended for better performance.
src/ FolderThe src (source) folder is where most of your application logic and React components reside.
Common Files in src/:
| File | Purpose |
|---|---|
index.js or index.jsx | Entry point of the React app, responsible for rendering the App component. |
App.js or App.jsx | The main component that serves as the root of your application. |
App.css | Contains styles for the App component. |
index.css | Global styles applied across the app. |
You will mostly work inside the
src/folder, creating and organizing components, styles, and logic.
package.json, .gitignore, etc.)| File | Purpose |
|---|---|
.gitignore | Specifies files to exclude from version control (e.g., node_modules/). |
package.json | Lists dependencies, scripts, and project metadata. |
package-lock.json / yarn.lock | Ensures consistent package versions. |
README.md | Contains project documentation. |
Note: The package.json file is important as it defines scripts (e.g., npm start, npm build) and installed dependencies.
Understanding the file and folder structure of a React app helps you navigate and maintain projects more efficiently. As your project scales, you can customize the structure to fit your needs.
.....
.....
.....