XenonStack Recommends

Service Design

Understanding ReactJs Project Structure and Folder Setups

Navdeep Singh Gill | 12 September 2022

Subscription

XenonStack White Arrow

Thanks for submitting the form.

Introduction to ReactJs Project Structure

Before we get discussion the basis, before deep diving into specifics

What is React?

It is a JavaScript library created by Facebook, a User Interface(UI) library, and a tool for building UI components. 

Best practices are followed for doing projects in the right structure. Almost all the time, the create-react-app we use creates an app with no build configuration. In this blog, we will build our boilerplate. Let us look at the best boilerplate structures that most of the community prefers.

What is the architecture of its Application?

React library is just a UI library. It does not enforce any pattern to writing a complex application. The Developers are free to choose the design pattern. The community advocates specific design patterns. One of the patterns is the Flux pattern. React library also has a lot of concepts like Higher Order component, Context, Render props, Refs, etc., to write better code. 

How to Structure React Project?

We have read many articles where each article explains the 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

There is no "best project architecture" that will fit with any project and coding style.
But you should always structure your project. It 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. The discussion here is simply an opinionated way to structure a 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

  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, React developer tools and Redux DevTools are very useful.

Now we can use 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.

What is the Folder Structure for React Project?

The folder structure looks like this.

  • Assets Folder
  • Layouts Folder
  • Components Folder
  • Pages Folder
  • Middleware Folder
  • Routes Folder
  • Config Folder
  • Services Folder
  • Utils Folder

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 it. 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.

xenonstack-optimizing-cloud-application-development
Building highly powerful react-native-based enterprise web applications and cross-platform application capabilities.eds. 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.