React Clean Architecture

See how React Clean Architecture helps to write Clean, Structured, Modularized and Best Coding Practices for React Developers.

Hello Developers! Many of us use various design patterns with React Development to make React Apps more clean, clearly understandable, and more structured. But still we are facing issues with coding standards, we changed at one place and it breaks at another place. Is there any resolution for this? Yes, Try React Clean Architecture!

Quick Highlights — React Clean Architecture — which makes your code more structured, clean and anyone can easily take over your code and start working with you. So Let’s continue next. Which include everything API, State Management (Redux, Redux Saga), Storybook, Utilities, Component/Container and you can add more relevant features in defined structure hierarchy.

Download React Clean Architecture Source Code

Pattern -

React Clean Architecture Covered -

react-clean-architecture
├── android
├── ios
├── src
│   ├── application
│   │   ├── common
│   │   ├── filters
│   │   ├── logger
│   │   ├── models
│   │   ├── persist
│   │   ├── plugins
│   │   ├── store
│   ├── infrastructure
│   │   ├── api(services)
│   │   ├── components (common components)
│   ├── presentation
│   │   ├── container
│   │   ├── component
├── index.js
├── package.json
└── README.md

Ignite — React Native Boilerplate

Application -

Application directory contains the State Management and Common utilities functions and constants. For State Management — I have used Redux Rematch, you can use Redux, Redux Saga, MobX State Management. For Common — I have used Fonts, Colours, Global Constants and Common Functions.

Let’s check some parts of Rematch and Understand what it does and what it means.

Store -

Here, I am initialise Redux Store, to initialise Redux Store we require models, plugins, middleware (optional).

PlugIns -

PlugIns itself means to add some value to Redux Store.Here, we are using Loading PlugIns means it will show loading indicator while API is fetching data. So we can show Loader to user, once data is fetched Loading plugin update loading State and based on that we can hide loaders in components.

Persist -

Persist itself means to Persist something, Here, it will persist Rematch Store. To create persist store it will take few argument, key, whitelist (model — save in persist store), blacklist (model — not saved in persist store), version — help while upgrading application, storage — AsyncStorage (store persist store in AsyncStorage), transform — contains — filters which applied while persist store.

Models -

Models will contain State, Reducer, Effect (Actions).

Filters -

Common -

Here, You can define your Global Constant, Common Files — Fonts, FontSize, Device Specification, Colours many more as per custom solution.

JavaScript Tips, Tricks and Best Practices

Infrastructure -

Infrastructure contains API (Services) Files, API Handlers, Common Components like Loader, Common TextField, Buttons, etc. Here, I have used AXIOS, you can use JavaScript Fetch and create your API Wrapper class here.

Let’s check some parts of Infrastructure and Understand what it does and what it means.

API (Services) -

Components (Common Components) -

Presentation -

Presentation contains Component/Container. Component return design of your component, While Container contain wrapper of Component, HOC Wrapper Of Connect (Redux) to use Redux Store | Props into Components.

Let’s check some parts of Component/Container, what it does and what it means.

Download React Clean Architecture Source Code

Thanks for reading Article! || Read More Technical Articles

KPITENG | DIGITAL TRANSFORMATION

www.kpiteng.com || hello@kpiteng.com