When we’re working on React, we always think about making our projects in proper structure. Almost all the time, the create-react-app that we use to create an app with no build configuration. In this blog, we will build our boilerplate. We’re going to use some of the best boilerplate structures that most of the react community prefers.
How to Structure React Project?
We have read many articles where each article explains boilerplate, and we might get confused about which one is the best approach.
There is no "best project architecture" that will fit with any project and coding style. But you should always structure your project. React doesn't follow any particular project structure, and the positive thing about this is that it allows us to make up a structure to suit our needs. What I will discuss here is simply an opinionated way to structure a react project. You can utilize some parts or all of them for your project. So let’s get started.
Project Setup for React
First, let’s set up the development environment for working on react js. I like to use
React js that is created using ‘create-react-app gives some default code. Let’s delete almost everything like logos, images, styling, etc., and keep the skeleton application, and now we can start doing our folder structure.
Folder Structure for React Project
Our folder structure looks like this.
As the name says, it contains assets of our project. It consists of images and styling files. Here we can store our global styles. We are centralizing the project so we can store the page-based or component-based styles over here. But we can even keep style according to the pages folder or component folder also. But that depends on developer comfortability.
As the name says, it contains layouts available to the whole project like header, footer, etc. We can store the header, footer, or sidebar code here and call it.
Components are the building blocks of any react project. This folder consists of a collection of UI components like buttons, modals, inputs, loader, etc., that can be used across various files in the project. Each component should consist of a test file to do a unit test as it will be widely used in the project.
The files in the pages folder indicate the route of the react application. Each file in this folder contains its route. A page can contain its subfolder. Each page has its state and is usually used to call an async operation. It usually consists of various components grouped.
This folder consists of middleware that allows for side effects in the application. It is used when we are using redux with react. Here we keep all our custom middleware.
This folder consists of all routes of the application. It consists of private, protected, and all types of routes. Here we can even call our sub-route.
This folder consists of a configuration file where we store environment variables in config.js. We will use this file to set up multi-environment configurations in your application.
This folder will be added if we use redux in your project. Inside it, there are 3 folders named actions, reducers, and constant subfolders to manage states. The actions and reducers will be called in almost all the pages, so create actions, reducers & constants according to pages name.
Utils folder consists of some repeatedly used functions that are commonly used in the project. It should contain only common js functions & objects like dropdown options, regex condition, data formatting, etc.
Final Project Structure
So our final architecture of the react project is complete, and it looks something like this. You can customize this according to your requirements.
This is one of the most used architectures. As I have already mentioned, no best architecture will suit every project. I change requirements but always remember to maintain a folder structure so that every code is centralized and easily understood by any developer.