Make a Robust Structure for React Application

As a React developer, you have flexibility to make a structure as you wish. So there is no best project architecture that will fit any project. Anyway if you have a robust structure in your project then it eases to understanding, refactoring and sustainability.

Here I have built a structure that suits for many scenarios. You can utilize some parts or all of them for your project.

Use index.ts file in each and every folder in order to expose to outside. However It’s a little bit annoying to have to make extra file but it is worth. And Follow the consistent naming conversations throughout the project.

Assets
It contains assets of project. Such as images, audios ,videos, json and here we can put global styles as well.

Components
Here, we can keep components that are used more than once place in our application.

There is a specific folder which is called common that is used to define core UI elements like button, inputs, checkbox or we can import third party UI library components and re-import them from here.

Other components can be added outside of the common folder. Here I have added registerForm component which is used multiple places in project.

• Nested folders
  If some component has specific child components, functions and models put them in nested folders. Don’t worry about models folder, we’ll discuss later.

Constants
Keep constants which are used more than one function or component. Put them into single file instead of creating separate files for each constants.

Context
As the name says, it contains contexts available to the whole project.

Helpers
This folder has two subfolders.

• APIs — keeps files that relate to library which is used to make API calls. Ex:- axios, fetch.
• utils — refers to a collection of small, general-purpose function that can be used throughout the project.

Hooks
Keep common custom hooks.

Layouts
It contains layouts available to the whole project. We can keep the header, footer, sidebar code file here.

Models
If you preferred TypeScript this folder will be useful. There are two ways to define type in TypeScript. Those are interface and type alias. That is the reason why I created a folder called models to keep all common interfaces and type alias. We aren’t going to keep any component specific or function specific interfaces and type alias here.

Some developers use interfaces folder and keep all type alias and interfaces. If you like this approach go forward with it.

Pages
In this folder we keep our pages. A page usually consists of various component grouped. The files in here indicate the route of the application. A page can contain subfolders.

Routes
This folder consists of all routes of the application. It consists of private, protected, public and all types of routes. Here we can add sub-route as well.

Services
Keep the files that are used to handle APIs call for application.

Store
This folder consists of all state management things of the application. Assuming that you use Redux tool kit I have suggested folder structure as below. For more information read this article.

Eventually, A robust folder structure will look like this.

This is just one possible folder structure. Keep in mind, you should always structure your project.