DEV Community

Cover image for Reuse business logic between React and React Native
d3mn8
d3mn8

Posted on

Reuse business logic between React and React Native

React ecosystem encourages the Learn Once Write Everywhere style. Once we know the core concepts of react, we can write both web and mobile applications with ease. Even though there are small differences like types of components etc, the core of applications remains same.

React being a library, we generally need help from some state management package to develop large applications. Redux is the more preferred one. Using redux helps us define the flow, business logic and application state.

When we were developing projects for our customers, we realised that even though the view layer of web and mobile application is different, we were writing lot of duplicate code as well.
For example, both our web and mobile applications had a login screen. Now the UI layer of this is different in react and react native. But once we get past that, we need to dispatch same action, make same service call, use same reducer and many more.
So we decided to take this business logic and put it in a separate npm package. We called this npm package Core. Both mobile and web applications can load this as a dependency or link to this package via symlink.

This helped us reduce the duplication of code. We were able to reuse almost 60% of code between React and React Native application. This also helped us in better predictability and consistent error reproduction. If something worked or failed it would happen in both web and mobile applications.

So ultimately we were able to deliver a product with faster turnaround and with less budget.

I created a working repository with sample todo app built in.
Here is the link
https://github.com/spoman007/reactXstarter

What is this Repository?

  1. Demo of how the code can be reused between React and React Native Application
  2. Extracts the business logic to a seperate npm package
  3. Uses Redux to write application business logic: Actions and Reducers are extracted to a seperate npm package.

Top comments (3)

Collapse
 
boddashaker profile image
𝕄𝕣. 𝔾𝕣𝕒π•₯𝕖𝕗𝕦𝕝 πŸ‡΅πŸ‡Έ

Iam trying to use your approach in some project, but im facing some issues if you are around to give some advices, would appreciate it , thanks

Collapse
 
d3mn8 profile image
d3mn8

What is the issue you are facing?
Feel free to buzz me on dev.to

Collapse
 
hurmain7 profile image
Hurmain Khalid

Can you please refer me tutorial like how to create this packge like you've created it?