Cordova with React Js using Reco

Here we are going to see how I successfully ported my React JS project to a cross-platform mobile app using Apache Cordova. I will be using a very easy to use library called Reco (react.cordova). Reco is the bundle where both Cordova and React.js platforms merge and work together as one.

Prerequisites

• To create a React JS project and npm

Steps to port React JS to Apache Cordova

I already have my web app developed in React JS. We can see the step by step implementation of using Reco to convert it into a cross-platform hybrid app.

Step 1: Install Reco

npm install -g react.cordova

Step 2: Lets create a project folder and run the below command. It creates a Reco app (React app and Cordova app together)

reco init com.pratheesh.quizapp "Quiz App"

It will ask for two options: 1. Reco template 2. Empty. Choose Reco template.

Now if you go and open the package.json you can see both the react and cordova scripts. This command also adds both the platforms iOS and Android for Cordova as well.

Step 3: Now copy the entire src/ folder from you react project and paste it inside the src/ folder created by Reco.

src of React Project

Pasting at src of Reco project

Step 4: Copy the scripts, dependencies and browserList keys from the Package.json from you react project and add it inside the Package.json created by Reco so that the Package.json created by Reco contains all the your react project dependancies.

React ProjectPackage.json

React Package.json

Reco Project Package.json

Reco Package.json

Step 5: Run npm install to install all the react project dependancies in the project created by Reco.

npm install

Step 6: To run as mobile app simple run

For iOS,

npm run build ios

For Android

npm run build android

You will get this build success message

Step 7: Once build succeeds open your .xcworkspace inside the /platform/ios folder for iOS and the android project from the platform/android folder and run the app.

Your react app is now a successful platform hybrid mobile app.

React JS App

Hybrid Mobile App

Any doubts or queries please feel free to reach me at pratheesh_db@hotmail.com.