DEV Community

Cover image for React Architecture for Enterprise Application
Nilanth
Nilanth

Posted on • Updated on • Originally published at javascript.plainenglish.io

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

folder

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.

app

common

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

common

features

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

features

routes

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

routes

assets

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

assets

tests

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

tests

style

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

style

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.

Free eBook

ReactJS Optimization Techniques and Development Resources

More Blogs

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

Discussion (27)

Collapse
ausmurp profile image
Austin Murphy

This is obviously an opinionated subject. Ever since NextJS became popular I follow their folder structure, so src/pages, then do something similar to what you have outside of pages. Except I've never been a fan of the module based folder structure, so I always have folders for models, hooks, context, components (dumb components), containers (smart components).

Also there's a really good presentation from the NextJS conference about how to set up your project with shared components for NextJS (web) and React Native (app). This was just a few days ago, so I've changed my approach to mimic that with CRA as well.

Collapse
meatboy profile image
Meat Boy

I worked with both module based and container based structure of React. IMO container approach has lower entry level but in long term modules allow to easily extracting and reusing entire modules as dependency in different application.

Collapse
cb86at profile image
Christian

Could you kindly share a link to said NextJS shared components presentation? Thank you!

Collapse
zettend profile image
Evgeniy Koryakin
Thread Thread
cb86at profile image
Christian

Thank you!

Collapse
ausmurp profile image
Austin Murphy

youtu.be/PWi-49ODKAs

Starts at 1:44:04

Collapse
ausmurp profile image
Austin Murphy

Starts at 1:44:04
youtu.be/PWi-49ODKAs

Collapse
ottimax profile image
Giuseppe Bianchino

out of curiosity, how could the routes be separated as in the image above? Many thanks in advance

Collapse
seanblonien profile image
Sean Blonien • Edited on

not the author - BUT in my CRA app, I put all my static route config and page config in routes.ts. routes.ts only imports from my router library. I specifically don't couple the page components in the route config because they need to be separate to prevent circular dependency problems. In the root of the app in React code, I have an object that maps each route to a page component, and it uses typescript which will ensure all routes have some page component.

Now anywhere in my app I can import the routes and have typesafe, no-circular dependency issues because of it

Collapse
ottimax profile image
Giuseppe Bianchino

I did a test with 3 components:

1) PublicRoutes
2) AdminRoutes (only auth confirmed)
3) StoreRoutes (only store route)

Each component is formed by a fragment with the various routes inside, this method does not work as the switch takes only the routes of the first component. How can I solve this malfunction?

Collapse
nilanth profile image
Nilanth Author

Sure, Will write a separate post for it.

Collapse
hannahwilso profile image
Info Comment hidden by post author - thread only accessible via permalink
HannahWilso • Edited on

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

Collapse
reikrom profile image
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?

Collapse
samiyahkate profile image
Info Comment hidden by post author - thread only accessible via permalink
SamiyahKate

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

Collapse
hijazi313 profile image
Info Comment hidden by post author - thread only accessible via permalink
Muhammad Hamza Hijazi

Sorry to say it's not at all scalable structure. That's just an opinionated react application structure for a team of devs. Study about Atomic Design Pattern and some others as well. Everything should be as much as possible loosely coupled, sharable not only within one app But multiple apps, in future if we want to move to Microfrontends it should be easy. Some components and hooks should be publishable and sharable . That's what we senior developers call an Enterprise React Architecture.

Collapse
felixhtoo30 profile image
Htoo Ant Hlaing (Felix) • Edited on

It's one of the best project structures for CRA.
Thank u for sharing

Collapse
sskido profile image
Joel sandoval

God post, i would like to know what extension of icons you use. Thanks

Collapse
nilanth profile image
Nilanth Author • Edited on

Default icons from the IDE

Collapse
ceoshikhar profile image
Info Comment hidden by post author - thread only accessible via permalink
Shikhar Sharma • Edited on

This kind of project structure looks so bad to people who learn and implement Hexagonal Architecture, Clean Architecture, DDD, etc.

Collapse
fahadprod profile image
Fahad Ahmad

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

Collapse
trangchongcheng profile image
cucheng

Can you share this example to git?

Collapse
saeed_ghasemi72 profile image
Info Comment hidden by post author - thread only accessible via permalink
saeed 😉

I dont like this structure

Collapse
prathameshkdukare profile image
Prathamesh Dukare

Awesome Dose of information
THANKS 💯

Collapse
imshivanshpatel profile image
SHIVANSH PATEL

Assets should be in public directory

Collapse
skyboyer profile image
Yevhen Kozlov

So you say we can nest __mocks__ inside of tests/ and automock will still work fine, am I accurate?

Some comments have been hidden by the post's author - find out more