Understanding React Folder Structure

Organizing a React project with well-planned folder structure is very important for readability, scalability, and maintainability. A clear structure helps in managing code, configurations, modules, and other assets effectively. This article outlines the recommended folder structure for the application.

Project Root Overview:

Husky folder:

This folder is created upon installing Husky in our React project. Additional files are also added, which we will discuss further, although they are not inside this folder.

Vite folder:

Similarly, when we install Vite in our project, folders are created. Additional files are also added, which we will discuss further as they are not inside this folder.

public folder:

This folder includes the updates that need to be integrated into our entire project, such as fonts, images, and configurations.

src folder:

This folder contains the project's actual code. The internal structure of the folders will be detailed in the following sections of the document. 

other files:

Other files contain environment settings, ESLint rules applied to our React project, package information with versions, and various other details.

Public folder:

Following is the folder structure of "public" folder.

• fonts folder:

  • This folder contains the font family that needs to be implemented in the React project.
  • Currently we have used "Poppins" font family for the React project.

• images folder:

  • This folder contains all the product images displayed on "product-catalog" page.

  • To add the image for specific product "product_id.file_extension". The image will be fetched for particular product.

    • ebConfig.json file:

      • This file contains all the project configurations like service path, images path, default image extensions, session expire time, and other details.
        

    • web.config file:

      • It is one of the configuration files.

For information on setup for development and deployment refer to Setting Up the Code for Development and Deployment document.

SRC folder:

Following is the folder structure of "src" folder

• api folder:

  • This folder contains APIClient.js" file ".
  • This file has all the API get, delete, patch, post like functions.
  • For further details on the functions within APIClient.js, please refer to Integrating with React APIs document. 

• assets folder:

  • This folder contains the images that have been used in our projects for illustrations and cards.
  • Below is the folder structure of the assets folder.

• components folder:

  •  The components folder contains all the necessary components required throughout the project.

  • These components are mainly divided into three folders.

• • atoms: 

    • As name suggests this folder contains small components used in a React project, such as various types of buttons, checkbox, various types of text fields, loader, shimmer effect of loading and all such small components.
    • In this folder, there is an "index.js" file. Whenever a component is added to this folder, its path is included for routing in this file.
•  

  • molecules:

    • The molecules folder contains components that are sub-components used on web pages. These are formed by including 'atoms' components to create the molecules.
    • This folder primarily consists of forms built from atomic components, as well as minor functional components that will be integrated into web pages, such as coupons, payment summaries, profiles, shopping carts, dialog boxes, search bars, and other similar elements.
•  

  • templates:

    • This folder is used to create a template for managing the molecules to render on the page.
    • In our React project, we manage pagination, sorting, and searching on the product catalog page, as well as navigation between profile tabs, using these templates.

For more information on the process of creating reusable components in React, refer to Creating Reusable Components in React document.

• configuration folder: 

  • This folder includes "ebConfig.js", which fetch the values at runtime form ebConfig.json file in the public folder.
  • These files gather all the information from the ebConfig.json file located in the public folder and integrate it into our React project such as service path, images, etc.

• constants folder:

  • Each project contains certain constant variables, structures, and error messages, which are included in this folder.

• • Similar to other folder structure, we have an index.js file that includes all the paths for other files we have added, such as Common.js, ErrorMessages.js and JSON.js.

• context folder:

  • This folder includes some of the common contexts, such as toasters.

• css folder:

  • This folder is mainly used for styling various items in the project.

• hooks folder:

  • This folder includes custom hooks which helps the component to interact with redux store. It is like a global state store. 
  • This folder contains some custom hooks for storing user and cart information within the redux store.

• pages folder:

  • This folder contains all the component pages which are built for React project. such as login, sign-up, product-catalog, etc.
  • These pages are build using various components like atoms and molecules.

• routes folder:

  • This folder includes all routing paths, which may be public or private, and are utilized in the React project.

• • Similar to all folder structure we have index.jsx which includes all routing paths.

For information on how to configure routing, refer to Configuring Routing to existing or new page

• store folder:

  • This folder contains the code for the redux store.
  • Here, we maintain various values within the Redux store, and below is the folder structure of the store directory.

• • This store maintains information about the user, cart, currency, and all other relevant details.

For information on how to configure store, refer to Setting Up and Configuring the Redux Store in a React Application document.

• utils folder:

  • This folder contains all the utility functions, which are common functions used for formatting.
  • This folder includes some common utility functions and are used for creating structure, maintaining single date format for whole project, etc.

   

• validations folder:

  • Various forms have been incorporated into the project, each containing numerous fields. These form fields include Yup validations such as mandatory fields or numeric-only constraints.
  • These all validations are added into these folders.

• main.jsx

  • The main.jsx file serves as the entry source for the script in the index.html within the React folder.

Other files:

Following is the structure of other files in React folder.

• These files are rule sets used for setting up the environment, configuring ESLint, Prettier, and so on.
• index.html is entry point of react project.
• package.json contains list of all packages and version which is install and used in the project.

Related Topics

Creating a New Page in React Project
Creating Reusable Components in React
Configuring Routing to an Existing or a New page
Configuring ESlint, Husky and Prettier