ReactJS / React Native module-based architecture

As we present an outsourcing software development company, let’s get into more details with technical questions, I know you like this kind of articles. I think one of the most important things when you start a new project based on ReactJS or React Native or any other technology — is architecture.

Based on what kind of architecture you prefer, or what application you are going to have, or even your experience or experience of people whose articles you found, you will probably select one of the ways how to create your app architecture.

There are a lot of different development approaches of your app architecture, but today I will explain how we migrated to module-based architecture after a number of projects developed from scratch based on ReactJS framework.

So what is module-based architecture:

It is an approach when you combine all code, files, components, constants, reducers related to a single module into completely independent module.

In fact, the structure of your project will be like this:

So, you will probably have main ‘Core’ module where you will place all your base components such as custom buttons, selects, etc. You will definitely have base logic which will be the same for all modules, like API calls which are completely same for all modules GET, POST, PUT, DELETE.

A very interesting trick we used here is — index.js file in each folder. For example, for core module folder you will have an index file which will export all your internal core logic, components, constants. The main index file for each module usually looks like this:

So, you simply export all internal stuff for using in external modules (to avoid direct references).

Then for all your components, you will need to add similar index file to export all core components:

Same thing for reducers, middleware, utilities, etc.

The completely same structure should be for all modules. And theoretically, when you need to add references between modules — you should use ONLY the main index file and import specific items from its export.

With such kind of architecture you will be able to easily manage your modules, dependencies and in case you need some kind of different subscription structure, you will be able to manage this without any problems.

Right after this module-based architecture was developed we got stuck with a different problem — how to reuse code of logical part of the solution for both React and React Native solutions? We will get back to this questions and publish another story how we deal with this 😉

I hope this piece of information was interesting for you and you will be able to use it later on. In case you have any related questions — feel free to comment and we will find answers to them together.