How to modularize a react application with an established UI Pattern

A lot of us have heard about software architecture in traditional back-end software, but what about the front-end world? Aren't they actually software that needs to scale and handle logic?

Juntao QIU has explained how layering architecture can help organize React applications for improved responsiveness and future changes. His article (linked at the bottom of this post) is published on Martin Fowler's website, who is a pioneer in software architecture discussions.

He starts with the point that front-end software can be seen like traditional GUI desktop applications and therefore can follow the three-tier architecture (data, logic, view).

The final goal is to modularize the app in a way that, for implementing a new requested feature, there is no need to change or even know all layers. You just focus on your favorite part. Also, changing the implementation of each layer and substituting it can be done more easily. For example, changing React (view layer) with Vue.js.

I suggest reading this if you want to create flexible and scalable front-end code. In the next post, I want to describe how we can handle this concept with a component explorer like Storybook to have a well-modularized app.

you can read this article from here.