React Architecture for Enterprise Application

Structure and Organize React Components for Enterprise Application

React is the most popular Javascript library for building user interfaces. React does not have any standard folder structure to group the components and logic. React App can be structured in any way based on the project needs. 

But the improper structuring of the React App will lead to affect the app scalability and maintainability. As the App grows, We might add new and remove some old features, so each component needs to be loosely coupled with each other. Let see how to structure the React app to avoid such issues.

We need to group files based on the feature. That is, All files of a feature are in the same folder. Please check the below image for folder structure

In the above image we can see the folders of the react app, let's break down each folder purpose.

app

Global app setup and configuration used by the entire app are defined in app folder as below, which includes axiosClient, rootReducer, saga and store.

common

Reusable helpers, shared components, hooks, etc are defined in common folder.

features

Feature specific components, Slice (Redux reducer logic and associated actions - Redux Toolkit), APIs and styles are placed in the features folder.

routes

Components private, public routes are defined in routes folders. Route restriction based on authentication is handled here.

assets

Static assets like Images, files, icons are placed in the assets directory.

tests

Unit test cases and their mock goes to the tests directory. 

style

Global styles, theme configuration is placed in the style folder.

Using the above feature folder structure, We can easily remove or add a feature related code without issues. The feature folder structure is recommended by the redux style guide. By using Redux Toolkit, We have avoided boilerplate code like actions and reducers.

Need to know more about Redux ToolKit. Check out my article related to the redux toolkit.

Resources

1. Ducks Proposal
2. File Structuring
3. Redux Toolkit

Conclusion

Feature folder based file structuring will make react app more maintainable, scalable and loosely coupled.

Thank you for reading.

Get more updates on Twitter.

You can support me by buying me a coffee ☕

eBook

Debugging ReactJS Issues with ChatGPT: 50 Essential Tips and Examples

ReactJS Optimization Techniques and Development Resources

More Blogs

1. Laravel Sanctum Authentication for React App Using Breeze
2. Twitter Followers Tracker using Next.js, NextAuth and TailwindCSS
3. Don't Optimize Your React App, Use Preact Instead
4. How to Reduce React App Loading Time By 70%
5. Build a Portfolio Using Next.js, Tailwind, and Vercel with Dark Mode Support
6. No More ../../../ Import in React
7. 10 React Packages with 1K UI Components
8. 5 Packages to Optimize and Speed Up Your React App During Development
9. How To Use Axios in an Optimized and Scalable Way With React
10. 15 Custom Hooks to Make your React Component Lightweight
11. 10 Ways to Host Your React App For Free
12. How to Secure JWT in a Single-Page Application

Comments

[official_dulin]

React & Redux Application Architecture

[codingsnack]

Just curious. How does this work when you have multiple product teams? You obviously don't want all of them working on same monolith. Just like how we have microservices for backend with different teams working on their release cycles with their own technologies and tech stacks, is there a way to apply this for frontend?

[saeed 😉]

I dont like this structure

[Fahad Ahmad]

Here is Top React forms libraries read this blog for details
javascript.plainenglish.io/top-5-r...

[Rei Krom]

Could you explain more about feature folder, how many sub folders should it have or should it better be kept flat.
How would a complex feature folder look with lot of specific components that don't really fit in common folder?

[cucheng]

Can you share this example to git?

[SamiyahKate]

The code of React JS is very straightforward. However, It helps to maintain the flexibility of the enterprise application. best tantrik in Srinagar

[HannahWilso]

As we've seen, React can be used to build functional enterprise applications and web and mobile applications powerful wazifa to make someone mad in love with you

[Prathamesh Dukare]

Awesome Dose of information
THANKS 💯

[SHIVANSH PATEL]

Assets should be in public directory