Structure and Organize React Components for Enterprise Application
React is the most popular Javascript library for building user interfaces. Reac...
Some comments have been hidden by the post's author - find out more
For further actions, you may consider blocking this person and/or reporting abuse
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.
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.
Could you kindly share a link to said NextJS shared components presentation? Thank you!
GitHub NextJS Strapi DEMO
Thank you!
youtu.be/PWi-49ODKAs
Starts at 1:44:04
Starts at 1:44:04
youtu.be/PWi-49ODKAs
out of curiosity, how could the routes be separated as in the image above? Many thanks in advance
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
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?
Sure, Will write a separate post for it.
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?
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
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.
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?
It's one of the best project structures for CRA.
Thank u for sharing
The code of React JS is very straightforward. However, It helps to maintain the flexibility of the enterprise application. best tantrik in Srinagar
This kind of project structure looks so bad to people who learn and implement Hexagonal Architecture, Clean Architecture, DDD, etc.
React & Redux Application Architecture
I dont like this structure
Here is Top React forms libraries read this blog for details
javascript.plainenglish.io/top-5-r...
Can you share this example to git?
Awesome Dose of information
THANKS π―
Assets should be in public directory
So you say we can nest
__mocks__inside oftests/and automock will still work fine, am I accurate?God post, i would like to know what extension of icons you use. Thanks
Default icons from the IDE