REACT NATIVE & LARAVEL INTRODUCTION
-----------------------------------

React Native is a open source framework developed by [facebook](https://hackernoon.com/tagged/facebook) which make developer easier to develop truly native app or app that feels native whether on iOS or Android with only using [Javascript](https://hackernoon.com/tagged/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](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/](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](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)](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html) 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](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](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**

![](https://hackernoon.com/hn-images/1*SUcJpr_zXzh8N6TbPriYAQ.png)

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/](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](https://itunes.apple.com/us/app/xcode/id497799835?mt=12). 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

![](https://hackernoon.com/hn-images/1*3hpJeoqNGua7h-J5r0rkow.png)

Picture 1.3 Init StagOverheat Succeded

**2\. Change Directory to StagOverheat**

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

![](https://hackernoon.com/hn-images/1*8h1SjI0x3Iq7M-xn8DxKBA.png)

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.

![](https://hackernoon.com/hn-images/1*iKA_4cyOkNO_rQqCRxUdRQ.png)

Picture 1.5 Create xcodeproj on application folder

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

![](https://hackernoon.com/hn-images/1*J8HCopkLW3ELpkkMVOYV4A.png)

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:

![](https://hackernoon.com/hn-images/1*l8xiJ4U2VewjogiXNBd0cg.png)

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 .

![](https://hackernoon.com/hn-images/1*xWkB_Y2JGX3tQ5i2gotXUw.png)

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.

![](https://hackernoon.com/hn-images/1*lzonjoR-4mMTXOMFWWpQFg.png)

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:

![](https://hackernoon.com/hn-images/1*NRNk8Wkj1pv-FpwHw4DUHg.png)

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. I**f you are lucky, the first 100 buyer will got special discount, here is the link:**

[https://leanpub.com/rn\_laravel/c/uoMEakQzBH9g](https://leanpub.com/rn_laravel/c/uoMEakQzBH9g)

![](https://hackernoon.com/hn-images/1*Q1ISMfKQC4kQ4474Oj2uuQ.png)

Apple

Facebook

React Native and Laravel for Future Mobile Development

Too Long; Didn't Read

Companies Mentioned

@radiegtya

RELATED STORIES