React Native – Introduction

React Native is a cross platform framework. Facebook team has developed this in order to give better user experience in cross platform. React Native allows us to develop cross-platform mobile application for iOS and Android. We can write simple javascript code using built-in react native components and deploy it on respective platform. We have seen so many cross-platform frameworks like Phonegap later know as Cordova, Ionic, Xamarin, NativeScript and so on, but react native has covered almost whole cross platform market very early.

Reason why react native is in demand :

  • Cross-platform framework : It allows us to develop application for iOS and Android by writing single code.
  • Open source : Though react native is developed by facebook team, it is open source, so anyone can contribute to the community. Whether it is bug fixing or new feature updates.
  • JavaScript : It allows user to write code in JavaScript and it is the language which is world wide famous. So any developer who is from web background can also write mobile applications by having little bit of native platform knowledge.
  • Supports native code : At any point of time if there is no support or feature update from react native, we can write native code and call it from react native application.
  • Performance : It gives nearly same performance to native application. Reason behind this is it converts JavaScript component to native component so when end user sees anything in the application it is native component and not the JavaScript.

Apart from these benefits we can also build part of our application with react native, it is not necessary to build whole application with react native. Now let’s see how to get started with react native development.

There are 2 ways to develop react native applications :

  1. Using Expo cli : Expo will be easiest way to get started with react native development. It allows you to write your code simply in javascript without any native dependencies of either Android Studio or Xcode. You just need to install expo through npm command.

    You can follow official react native guideline to setup expo-cli.
  2. Using React Native cli : It will help you to develop react native application with native code support. It allows you to write native module also for Android and iOS. If you are using react native in existing native application, you need to follow react native cli guideline.However installation is same as Expo cli, you just need to use command

    For detailed setup you can follow “Building Project With Native Code” tab in official document.

In this tutorial we will use react native cli to create our first hello world application.

Creating First React Native Application

Step 1 : After done with the above steps you are now having react native in your system. Open command prompt/terminal in your system and write below command to create our first project called HelloWorld with react native.

It will create folder called HelloWorld which will contain basic files which are needed to run react native application like below :

react native

Step 2 (Optional) : If you find node_modules in your HelloWorld directory, there is no need to follow this step. In earlier react native version we have to install node_modules by using following commands.

Step 3 : Final step is to run your application using either of the following commands.

or

Note : Before running above commands, make sure you have all the native setup available in your system, otherwise it will not run your application in given platform. Here is the reference link to setup android platform. For iOS you can follow default iOS development guideline which requires you to install xcode in your mac machine.

If there is no error in setup, you will be able to see your first react native project output.

react native

In next tutorial we will see how to code with react-native, how react-native works and how to modify code to perform some user actions.

Ravi Rupareliya
Follow me

Ravi Rupareliya

He is author of Android Gig. He loves to explore new technologies and have worked on Android, React Native, Action on Google and Flutter.
Ravi Rupareliya
Follow me

Latest posts by Ravi Rupareliya (see all)

Ravi Rupareliya January 5, 2019

Firebase Realtime Database In Android
Create WhatsApp Stickers Android Application