Getting started – Learn the basic React Native

Getting started – Learn the basic React Native

React Native is a framework for building mobile applications with JavaScript and leveraging Reactjs. It uses native UI components. If you are familiar with Reactjs, or come from front end development background, Reactjs uses a virtual DOM which acts as a shadow to real DOM available. When an element changes, that change is reflected in the real DOM by Virtual DOM using a node that corresponds to each element. However, in React Native, there is no DOM rather than Native Components which are provided by platforms such as iOS and Android. There are no web views here.

React Native has an instance of JavaScriptCore to execute JS code when an application starts. React Native uses RCTBridgeModule to make a connection between native code and JavaScript code. It is assumed that as you dwell more in development with React Native, you might come across using a third-party SDK for a specific mobile platform. This bridging will be very helpful.

Difference between React Native and Reactjs

React Native has its own wrappers around the native components and do not make use of every HTML element. For example, <View> which is considered similar to div of HTML. This is a major difference between React Native and Reactjs. This also means that you cannot reuse every library that renders HTML and is available for Reactjs. It has its own navigation modules.

Platform Specific Designing

Designing a mobile application for multiple platforms available with the same set of code can be a bit overwhelming. In this case, a developer or a development team is left with two choices. Either they come up with a user interface that universal to their application. This means the UI of the app looks the same on every platform. However, this is not going to be the case with every application you develop. React Native can detect the platform you are running and conditions can be used to apply the styling.

Diving deeply in the bridging part or platform-specific designing part of this article is out of the scope. This is written to familiarize you with the basic ecosystem of React Native but I wanted to discuss these topics briefly such that to give an idea of what you are getting into.

Android development environment

You will need Node, Watchman, the React Native command-line interface, a JDK, and Android Studio.

While you can use any editor of your choice to develop your app, you will need to install Android Studio in order to set up the necessary tooling to build your React Native app for Android.

The React Native CLI

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

$npm install -g react-native-cli

1. Install Android Studio

Choose a “Custom” setup when prompted to select an installation type. 

Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device

2. Install the Android SDK

Android Studio installs the latest Android SDK by default. Building a React Native app with native code, however, requires the Android 9 (Pie) SDK in particular. Additional Android SDKs can be installed through the SDK Manager in Android Studio.

The SDK Manager can be accessed from the “Welcome to Android Studio” screen. Click on “Configure”, then select “SDK Manager”.

Select the “SDK Platforms” tab from within the SDK Manager, then check the box next to “Show Package Details” in the bottom right corner. Look for and expand the Android 9 (Pie) entry, then make sure the following items are checked:

Android SDK Platform 28

Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image

Next, select the “SDK Tools” tab and check the box next to “Show Package Details” here as well. Look for and expand the “Android SDK Build-Tools” entry, then make sure that 28.0.3 is selected.

Finally, click “Apply” to download and install the Android SDK and related build tools.

3. Configure the ANDROID_HOME environment variable

Add the following lines to your $HOME/.bash_profile or $HOME/.bashrc config file:

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

IOS development environment

The easiest way to install Xcode is via the Mac App Store. Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app.

If you have already installed Xcode on your system, make sure it is version 9.4 or newer.

Make a new application

react-native init TestProject

Running your React Native application

$cd TestProject
$react-native run-ios || react-native run-android

Hello World
In accordance with the ancient traditions of our people, we must first build an app that does nothing except say “Hello, world!”. Here it is:

“`
import React, { Component } from ‘react’;
import { Text, View } from ‘react-native’;

export default class App extends Component {

  render() {

    return (

      <View style={{ flex: 1,

 justifyContent: “center”, alignItems: 

“center” }}>

        <Text>Hello, world!</Text>

      </View>

    );

  }

}“`

_

If you are familiar with Reactjs, you can easily understand this code. <View>stands for wrapper element such as div in HTML and <Text> stands for <p> in HTML.

You will be prompted with a success message and in a new terminal window, Metro Bundler (developed by Facebook) will be running until the application closes.

react native

The file that renders this App component is index.js in the root directory. You will see this code:

https://cdn-images-1.medium.com/max/1600/0*NsVZtz_ZooVZxt1F.png

Conclusion

This is a tutorial about how to start using React Native. The simplest example of React Native. React Native is awesome for multiplatform developing, I hope you will have successfully work with these technologies. Happy coding!

Stefan @ Vicert

Author: Stefan @ Vicert

Leave a Reply

Your email address will not be published. Required fields are marked *