React Native and Laravel for Future Mobile Development

REACT NATIVE & LARAVEL INTRODUCTION

React Native is a open source framework developed by facebook which make developer easier to develop truly native app or app that feels native whether on iOS or Android with only using Javascript. This is possible because React Native convert Javascript code using React Bridge to Native iOS (obj-c) or Native Android (Java). Its not like hybrid mobile app that is using webview such as cordova/phonegap.

I have tried develop React Native for my several enterprise application who had been used by many People and Companies for Android and iOS. React Native also help us to develop faster because its only need Javascript to develop.

React Native also used by some Giant Company. You can see the showcase at https://facebook.github.io/react-native/showcase.html.

You don’t needs to forced to use React Native for Mobile development. Real Native Android or iOS still a good alternative nowadays.

RN ANDROID INSTALLATION ON MAC OS

Node & Watchman

Facebook recommend to do installation using Node and Watchman using Homebrew (http://brew.sh/). Run the following commands in a Terminal after installing Homebrew:

$ brew install node$ brew install watchman

React Native CLI

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

Run the following command in a Terminal:

$ npm install -g react-native-cli

Android Development Environment

1. Download dan Install Android Studio

You can download Android studio using this link: https://developer.android.com/studio/install.html

Android studio needed to running and testing React Native application.

Android Studio requires a recent version of the Java SE Development Kit (JDK) version 8. To make sure java already installed, type “javac -version” on terminal/command prompt. If you don’t have JDK installed on your machine, please follow this link:

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

2. Install AVD dan HAXM

Android Virtual Devices allow you to run Android apps on your computer without the need for an actual Android phone or tablet. Choose Custom installation when running Android Studio for the first time. Make sure the boxes next to all of the following are checked:

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

Then, click “Next” to install all of these components.

https://developer.android.com/studio/run/emulator-acceleration.html#vm-linux

3. Install Android 6.0 (Marshmallow) SDK

Android Studio installs the most recent Android SDK by default. React Native, however, requires the Android 6.0 (Marshmallow) SDK. To install it, launch the SDK Manager, click on "Configure" in the "Welcome to Android Studio" screen.

The SDK Manager can also be found within the Android Studio “Preferences” menu, under Appearance & Behavior → System Settings → Android SDK.

Select “SDK Platforms” from within the SDK Manager, then check the box next to “Show Package Details”. Look for and expand the Android 6.0 (Marshmallow) entry, then make sure the following items are all checked:

• Google APIs
• Intel x86 Atom System Image
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atom_64 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 Android SDK Build-Tools 23.0.1 is selected.

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

4. Setup ANDROID_HOME environment variable

The React Native command line interface requires the ANDROID_HOME environment variable to be set up.

Add the following lines to your ~/.profile (or equivalent) config file:

export ANDROID_HOME=${HOME}/Android/Sdk

export PATH=${PATH}:${ANDROID_HOME}/tools

export PATH=${PATH}:${ANDROID_HOME}/platform-tools

Type source ~/.profile to load the config into your current shell.

Please make sure you export the correct path for ANDROID_HOME. If you installed the Android SDK using Homebrew, it would be located at /usr/local/opt/android-sdk.

Starting Android Virtual Device

Gambar 1.2 Starting AVD on Mac Os

You can see the list of available AVDs by opening the “AVD Manager” from within Android Studio. You can also run the following command in a terminal:

$ android avd

Once in the “AVD Manager”, select your AVD and click “Edit…”. Choose “Android 6.0 — API Level 23” under Device, and “Intel Atom (x86_64)” under CPU/ABI. Click OK, then select your new AVD and click “Start…”, and finally, “Launch”.

INSTALLATION RN iOS ON MAC OS

Node & Watchman

Facebook recommend to do installation using Node and Watchman using Homebrew (http://brew.sh/). Run the following commands in a Terminal after installing Homebrew:

$ brew install node

$ brew install watchman

React Native CLI

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

Run the following command in a Terminal:

$ npm install -g react-native-cli

Xcode

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.

INIT RN PROJECT STACK OVERFLOW CLONE (STAG OVERHEAT)

After doing a variety of installation, use the React Native command line interface to generate new React Native applications which will named “StagOverheat”, then run the command “react-native-run-ios”, or navigate Xcode to the destination folder.

$ react-native init StagOverheat

$ cd StagOverheat

$ react-native run-ios

In this article, the author will only use Xcode and iOS as the Emulator to simulate the application that will be made. For Android, you can easily run the Android emulator first and then simply run the command “react-native run-android”.

For beginners in programming, steps above may not really clear. So, let us practice visually.

1. Init RN Project named StagOverheat

You can always create a project in any folder you want. On my Mac, I use the directory ~/Documents/react-apps

$ cd Documents/react-apps/$ react-native init StagOverheat

Wait for a while so it appears as below

Picture 1.3 Init StagOverheat Succeded

2. Change Directory to StagOverheat

After StagOverheat project created perfectly, you can get into StagOverheat folder.

Picture 1.4 Change Directory to StagOverheat

3. Run iOS Simulator through Xcode

You can run the application by typing “react-native run-ios”, or by opening Xcode as the following in your application folder.

Picture 1.5 Create xcodeproj on application folder

Double click on StagOverheat.xcodeproj so Xcode appear on your Mac

Picture 1.6 XCODE Display

There are 3 main buttons you should note, seen from left, first there is the play button to start the iOS Simulator, second is Schema, ensure in accordance with the picture above, third is the device option that will be used to run the simulator, in the picture above we chose iphone 5s for more comfortable view. If everything is correct, click the play button, make sure it says “Build Success” and see your simulator as follows:

Picture 1.7 iOS Simulator Display

4. Code Structure

Open “StagOverheat” project folder with a text editor or IDE that you prefer. In this book I use Atom as Text Editor (https://atom.io/). To open, simply type the following command:

$ atom .

Picture 1.8 StagOverheat Code Structure

We can see that React Native structure code generated by react-native-cli. Since we are using iOS, then we will focus to a file “index.ios.js”. Do not worry for you who want to build Android applications, we will discuss it at the next discussion.

Picture 1.9 index.ios.js code

Let us discuss one by one the code:

1. Import Object Component from class React.
2. Import Components React Native that needed.

3. 
   

   Exporting Main class named StagOverheat, which inherit  from Component that we import from React.

4. 
   

   Rendering or display the results to the screen. Rendering functions should be owned by every component, that component can display all the data display. Text is used to  display the text. While View is used instead of “div” in html, and Styles will be described in the next chapter. For an explanation of the code, it will be easier to see the following image:

Picture 1.10 Render Detail

Thats all for now. Hope it helps you to understand the basic usage of React Native. This Article is part of my Ebook titled “React Native and Laravel for Future Mobile Development — First Series”. If you willing to learn more about React Native, this ebook is for you. If you are lucky, the first 100 buyer will got special discount, here is the link:

https://leanpub.com/rn_laravel/c/uoMEakQzBH9g