Basics Of React Native

Let’s start with a series called ‘Learn React-Native’. Sound familiar ?

I believe in the past few years Javascript has shifted gears from jquery to Angular, React, and D3 and it's still growing.

Here we will understand and learn what React-Native is

React-native is a mobile apps building framework using only Javascript. It uses the same design as React, letting you utilize/include a rich mobile UI library/ declarative components.

It uses the same fundamental UI building blocks as regular iOS and Android apps.

The best part of using react-native is to allow/adopt components written in Objective-C, Java, or Swift.

Let’s have a quick pictorial view of React vs React Native, though in this article, I am not talking about the basics of React:

How a React component is rendered to its client (WEB Or Mobile Interface) is using respective frameworks.

Since React-Native is open source, following is the github repo,


React-Native Basics

Code written in React-Native uses Javascript but is composed in .jsx file which turns/compiles into native classes. Lets see a pictorial representation.


Requirements/Pre-requisites for React-Native,

1. Node
2. Xcode
3. NPM

Node comes with npm, which lets you install the React Native command line interface.

npm install -g react-native-cli

If you get a permission error, try with sudo,

sudo npm install -g react-native-cli

Create your first ReactNnative project

react-native init firstap
cd firstap

After executing the above commands, you should see directory structure as shown in the  following picture.


Execute the following command in the terminal to run your first react-native ios app

react-native run-ios

OR

Open this project in xcode and run the application.

If you have successfully run the app, let's try to modify it and see action in liveit live in action.

Open index.ios.js in your text editor of choice and edit some lines. Hit Command + R in your iOS Simulator to reload the app and see your change.

You will see the immediate impact on your app. This is called hot reloading. No re-compile.

Congratulations! You've successfully run and modified your first React-Native app.

In the next article we will talk more about different types of components and more code in action.