React folder structuring

Rakesh Shravz — Thu, 06 Jan 2022 19:14:11 +0000

Hey all great minds, this post is all about how I used to structure the react applications that I built so far. It's completely opinionated. Please comment with your thoughts.

Let's assume that we are building a simple application with some common modules and features in it.

I always do the structuring based on the features or routes. This is the most common approach by the react community.

From the above project view, when we open the "src" folder, all the folders with the feature name need to be aligned on the same vertical line. By looking at these folders inside the "src" folder, we should come to an idea of the nature of the application and what this project is about.

Every features folder should contain an "index.js" file that has the root component of this feature. The presentational and non-presentational components are placed inside the "Components" folder. The other files are styles.js, actions.js, actionTypes.js, and reducers.js are placed within the folder for all the features

Every feature folder should have all these files which help in code splitting and project folders looks identical which avoids chaos and helps better debugging.

The "Common" folder can contain the styles, constants, utils and components which we think can be used by other components.

DEV Community: Rakesh Shravz

React folder structuring