DEV Community

Cover image for React Architecture for Enterprise Application

React Architecture for Enterprise Application

Nilanth on November 06, 2021

Structure and Organize React Components for Enterprise Application React is the most popular Javascript library for building user interfaces. Reac...
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
 
j755jj5 profile image
Evgeniy
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

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

Sure, Will write a separate post for it.

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
 
hannahwilso profile image
Info Comment hidden by post author - thread only accessible via permalink
HannahWilso • Edited

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
 
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
 
codingsnack profile image
codingsnack • Edited

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?

Collapse
 
felixhtoo30 profile image
Felix H. • Edited

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

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
 
ceoshikhar profile image
Info Comment hidden by post author - thread only accessible via permalink
Shikhar • Edited

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

Collapse
 
mrdulin profile image
official_dulin
Collapse
 
saeed_ghasemi72 profile image
Info Comment hidden by post author - thread only accessible via permalink
saeed πŸ˜‰

I dont like this structure

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
 
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?

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 • Edited

Default icons from the IDE

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