React Native

Dinuka Fernando
4 min readApr 19, 2018

--

I think that all of us heard about native,Hybrid,Mobile web.

Native ? Hybrid? Mobile web? 😱😱

Confused???

Don’t worry lets have a look😊

When we are going to implement a mobile application we says that we are going to build native mobile app,so simply what that means is we are going to use mobile native code.

Mobile native code ?? 😱

Simply every mobile device runs on native code.

  • IOS- objective c or swift
  • Android-java

If the developers uses Native code to create mobile applications that app gives best performance,But have to spend more cost because that need to develop separate applications for IOS and Android.

So what is Hybrid??

Hybrid apps contain browser view its uses HTML5. When the developers uses Hybrid app development so it takes less cost to development because it just need to write one code for both ios and android.

Then what is Mobile web ???

Mobile web simply loaded in your browser.User just need to open the URL they do not need to download an application from the play store(android).

Like in Hybrid applications you just need to write only one source code.

But this gives poor performance compare with native and Hybrid.

So now lets jump into React Native 😊

What is React Native?

It’s a java script code library developed by Facebook and Instagram in 2013.We cannot say it as a mobile web, hybrid or any other because React native uses fundamental UI building blocks in normal ios and android apps.Simply in react native java script uses for put those building blocks together.

React native give chance to the developers to reuse the code(Web and mobile)😀

Simply we can say React native is a framework for building mobile apps using java script and react library.

Why do we use react native??

  • It’s a cross platform because of that we can use same code base.
  • React native compile code back into natively written code and it increase the performance.
  • Building blocks are treated as native component so it can be compile directly into a native code and that component is reusable for both ios and android.
  • Easy to maintain.

Now lets talk basics of react native and how to configure your machine to start with react native app development?

How to setup a React Native development environment?

Software requirements

  • Android studio and sdk
  • java
  • node
  • react native cli

React native setup for windows

First of all you have to install node on your machine.If you already installed node just skip to next step otherwise you can follow the basic steps.

Step 1

Node JS installation- download the relevant .msi file from the given URL.

node — https://nodejs.org/en/

Just download .msi file and installed it on your machine.

You can run npm version in your cmd and you can make sure that it was installed.

Step 2

You can use following npm command to install react native cli.

Command — npm install -g react-native-cli

Step 3

Setup android development environment — please follow my Android App Development article.

After you configure the environment now you can start with react native.

Lets build our first application 😊

Step 1

we can create our first project by running following commands.

react-native init MyFirstReactApp

Step 2

Change direction to your project folder and run following command

react-native run-android

Open android studio and select project

Then run emulator.

you can see following in your cli.

After it 100% done,you can see your first application on your emulator .

Hope this information will helpful for you !!

Bye till next article!!

Thank you. 😊

--

--