React Native and Native Mobile Applications

What is React Native?

React Native combines with React for developing the mobile application. What is React? It is a javascript library, A powerful Javascript library used for building user interfaces. It works on Virtual Dom which removes the old Real Dom concept, it loads only the changes to the component by diffing algorithm which traverses through the node to check changes which improve performance and time.

React Native DOM structure

  • Entire Virtual DOM gets updated.
  • Virtual DOM gets compared to previous version.
  • Figures out which objects have been changed or different.
  • The changed objects, and the changed objects only, gets updated to the DOM.

React Native can be used in your existing Android and iOS projects or you can create a whole new app from the beginning.

Best of React Native

JavaScript rendered with Mobile native code.

We can write code in JavaScript and that will render as a native platform, As javascript code gets converted into native platform mobile API with the help of REACT NATIVE BRIDGE. It provides interaction between JavaScript code and the native code, will explain it later how it converts the code into the specific native platform. But As code gets converted into native API, it makes smooth and native user experience to Application.

React Native Architecture

React Native Architecture

Setting up React Native Project

If you are already familiar with mobile development, you may want to use React Native CLI. It requires Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running within a few minutes. If they are not installed, you should expect to spend about an hour installing and configuring them.

We have two ways to setup in this tutorial we will setup with REACT NATIVE CLI other way is with the help of expo which will check next tutorial.

MAC OS:- 

Run the following command in terminal

brew install node
brew install watchman

Install node if it is not installed in your system. Node version should be greater than 8.3 or latest. Below is the command to check the installed node version.

node -v

If it works then great, Else download from https://nodejs.org/en/download/

That’s it. If you have setup the environment successfully then run the below command to get started with your first project.

npx react-native init FirstProject

This command will create your first react project which can be run by the following command.

cd FirstProject
npx react-native start
For Android:
react-native run-android
For iOS:
react-native run-ios — simulator="iPhone X"

Thanks for reading, will discuss more in details later in the next blog that how React native works like charm as a native application. Which is better native or React Native and why?

Write a comment

Twitter