REACT NATIVE & LARAVEL INTRODUCTION React Native is a open source framework developed by which make developer easier to develop truly native app or app that feels native whether on iOS or Android with only using . 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. facebook Javascript 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 ( ). Run the following commands in a Terminal after installing Homebrew: http://brew.sh/ $ 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 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 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: Java SE Development Kit (JDK) 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 installation when running Android Studio for the first time. Make sure the boxes next to all of the following are checked: Custom 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 SDK. To install it, launch the SDK Manager, click on "Configure" in the "Welcome to Android Studio" screen. Android 6.0 (Marshmallow) 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 entry, then make sure the following items are all checked: Android 6.0 (Marshmallow) 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 is selected. Android SDK Build-Tools 23.0.1 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 environment variable to be set up. ANDROID_HOME Add the following lines to your (or equivalent) config file: ~/.profile export ANDROID_HOME=${HOME}/Android/Sdk export PATH=${PATH}:${ANDROID_HOME}/tools export PATH=${PATH}:${ANDROID_HOME}/platform-tools Type to load the config into your current shell. source ~/.profile Please make sure you export the correct path for . If you installed the Android SDK using Homebrew, it would be located at . ANDROID_HOME /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 ( ). Run the following commands in a Terminal after installing Homebrew: http://brew.sh/ $ 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 . Installing Xcode will also install the iOS Simulator and all the necessary tools to build your iOS app. Mac App Store 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. 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: Import Object Component from class React. Import Components React Native that needed. Exporting Main class named StagOverheat, which inherit from Component that we import from React. 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 . If you willing to learn more about React Native, this ebook is for you. I “React Native and Laravel for Future Mobile Development — First Series” f you are lucky, the first 100 buyer will got special discount, here is the link: https://leanpub.com/rn_laravel/c/uoMEakQzBH9g
