Basic Folder Structure of a React App in React JS

When you create a React application using tools like Create React App (CRA), a standard folder structure is generated to organize your project. This structure is designed to help developers manage their code efficiently, and it can be customized as the project grows. This article explains the default folder structure of a React app and its purpose.

Default Folder Structure

The default folder structure for a React application looks like this:

          
          my-app/
          ├── node_modules/
          ├── public/
          │   ├── index.html
          │   ├── favicon.ico
          │   └── manifest.json
          ├── src/
          │   ├── App.css
          │   ├── App.js
          │   ├── App.test.js
          │   ├── index.css
          │   ├── index.js
          │   └── reportWebVitals.js
          ├── .gitignore
          ├── package.json
          ├── README.md
          └── yarn.lock or package-lock.json

Overview of Key Folders and Files

Here is a breakdown of the key components of the default folder structure:

1. node_modules/

This folder contains all the dependencies and libraries installed via npm. It is automatically generated and should not be modified manually.

2. public/

The public folder contains static assets that are publicly accessible and not processed by Webpack. Key files include:

  • index.html: The main HTML template where the React app is mounted.
  • favicon.ico: The default icon for the browser tab.
  • manifest.json: Provides metadata for Progressive Web App (PWA) support.

3. src/

The src folder contains the main source code for the application. Key files include:

  • App.js: The root component of the application, responsible for rendering the main UI.
  • App.css: The default CSS file for styling the App.js component.
  • index.js: The entry point for the React application, which renders the root component into the DOM.
  • index.css: The global CSS file for styling.
  • App.test.js: A default test file for unit testing the App.js component using Jest.
  • reportWebVitals.js: Used to measure performance metrics for the application.

4. .gitignore

Specifies which files and directories should be ignored by Git, such as node_modules and build artifacts.

5. package.json

Contains metadata about the project, including dependencies, scripts, and other configurations.

6. README.md

A markdown file with instructions and information about the project, generated automatically by Create React App.

Customizing the Folder Structure

As your project grows, you may want to customize the folder structure to organize components, assets, and utilities better. A common structure might look like this:

          
          src/
          ├── components/
          │   ├── Header.js
          │   ├── Footer.js
          │   └── Button.js
          ├── styles/
          │   ├── App.css
          │   ├── Header.css
          │   └── Footer.css
          ├── assets/
          │   ├── images/
          │   └── fonts/
          ├── utils/
          │   └── helperFunctions.js
          ├── App.js
          ├── index.js
          └── index.css

In this structure:

  • components/: Contains reusable components.
  • styles/: Contains CSS files for different components.
  • assets/: Stores images, fonts, and other static assets.
  • utils/: Contains utility functions used across the application.

Example: Adding a Component

Let’s add a simple Header component to the project:

          
          // src/components/Header.js
          import React from 'react';

          function Header() {
              return 
Welcome to My React App
;
          }

          export default Header;

          // src/App.js
          import React from 'react';
          import Header from './components/Header';

          function App() {
              return (
                  

                      

                      
This is the main content of the application.

                  

              );
          }

          export default App;

Conclusion

The default folder structure of a React app provides a solid foundation for building applications. By understanding and customizing this structure, you can better manage your code, improve scalability, and maintain a clean and organized project.




Advertisement