XenonStack Recommends

Understanding ReactJs Project Structure and Folder Setups

Acknowledging Data Management
          Best Practices with DataOps

Subscription

XenonStack White Arrow Image

Introduction to ReactJs Project Structure

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.

A process which is used for increasing the quality of a software or a product and for improving it by identifying defects, problems, and errors. Click to explore about, Javascript and ReactJS Unit Testing, TDD and BDD

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

  1. VS Code with various extensions as a code editor.
  2. Google Chrome as a browser provides multiple developer-friendly tools for debugging.
  3. As a debugging tool, I like React developer tools and Redux DevTools as they are very useful.

Now we can use react CLI to create a new project.

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.

Directory Structurexenonstack-react-directory-structure

Assets Folder

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.

Layouts Folder

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 Folder

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.

Pages Folder

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.

An asynchronous programming model where the developer process the stream of coming data to propagate the changes in code. Click to explore about, Reactive Programming Solutions for Monitoring Platform

Middleware Folder

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.

Routes Folder

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.

Config Folder

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.

Services Folder

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

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.

Java vs Kotlin
Our solutions cater to diverse industries with a focus on serving ever-changing marketing needs. Click here for our React.JS Application Development Services

Conclusion

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.

Related blogs and Articles

Overview of The New Component-Driven Responsive Design

Enterprise Digital Platform

Overview of The New Component-Driven Responsive Design

Introduction Responsive Design Today, when we talked about the term: "responsive design," the first thought that came to our mind was using media queries to change layout when resizing a design from desktop size to tablet size to mobile size. But shortly, this insight of responsive design could also be considered outdated using tables for page layout.