CLEAN architecture for React apps

Osman Cea
13 min readAug 24, 2024
You gotta love that reeact

I originally wrote this article (in Spanish) about 3 years ago and React has changed a lot since then, specially with Server Components and all that stuff, so don’t expect anything related to those features in this article.

On layered architecture 🍰

Layering is not a novel concept. It’s been around in the industry for more than a couple of years (some of you reading this document are probably younger than layering) and it’s one of the first architectural styles created. In short, layering is nothing more than dividing the concerns of your application into different layers, like in a cake, where the upper layers can talk to the bottom layers but no the other way around.

Layers interact through facades, so as long as the public APIs are honored, a layer doesn’t have to know anything about internal implementation details of other layers.

Let’s take a look at the following diagram:

Layered architecture, a diagram.

The most typical layered architecture has three layers: UI, Domain and Infrastructure. Our systems can have as many layers as needed, it doesn’t have to be just 3. It’s just that this is the most typical one.

--

--