Structuring your React/Redux Projects
Unlike AngularJS which provides a default folder structure as we generate components and services using its powerful CLI, the story with React is quite different. Since React is just a JavaScript Library whereas Angular is a proper JavaScript Framework, it is important to keep in mind its differences along with their perks and shortcomings. From my personal experience, I came to realize that I had to and also had the freedom to put a little bit more thought into the folder structure while working with React as opposed to Angular. Even while using Create React App which is a really awesome and powerful tool to bootstrap your React applications, it still only provides a fairly simple folder structure.
Generally, we also use some type of state management along with React in order to maintain the state of the application into a single tree like structure /Store which in return makes the application robust and scalable instead of using react components to store the states. While using Redux or Flux or any state management on top or React, the folder structure as well as the development experience can become a bit confusing and foggy.
To streamline the structure of the project, I follow a certain folder structure which I find very helpful while developing React applications. Obviously, this is not a definite solution but this is what I feel the most comfortable with.
- Actions
- Assets
- Components
- Constants
- Containers
- Mocks
- Reducers
- Routes
- Services
- Store
- Styles
- Utils
- index.js
You can check out this project developed using similar folder structure.
If you want a perfect approach, do follow Dan the Man’s advice on maintaining folder structure which can be found here. 😋
