react-native-ubuntu

Cara Setting development environment react-native di Ubuntu, beserta contoh aplikasi. Pada contoh ini saya menggunakan Ubuntu 14.04 LTS dan sudah terinstall git. Semua download zip ditaruh di folder

$ /home/(user)

Jika ada pertanyaan, silahkan bertanya di group Facebook ReactJS Indonesia.

Contoh Aplikasi

Setting development environment react-native di ubuntu

Checklist yang harus dilakukan:

• Install node.js v4.0 keatas atau menggunakan NVM
• Install Watchman (beserta setting compability watchman di ubuntu)
• Install Flow
• Install & Setting Environment Variabel Android JDK dan SDK
• Install SDK yang akan digunakan untuk react-native android
• Install VirtualBox dan GenyMotion
• Download dan Run virtual Device android
• Install react-native-cli & init project
• Contoh menggunakan library 3rd party dari npm
• Deploy APK

Install node.js v4.0 keatas atau menggunakan NVM

Pastikan node -v anda v4.0 keatas untuk mengecek versi node anda

$ node -v

jika belum v4.0 keatas install NVM

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

Close dan buka terminal anda, Install node 4.2.3 menggunakan NVM

$ nvm install 4.2.3
$ nvm use 4.2.3

$ node -v
$ #v4.2.3
$ nvm alias default node

Install Watchman

Install Watchman. Jika './autogen.sh' tidak jalan, anda mungkin perlu menginstall automake 'sudo apt-get install automake' dan python-dev.

$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v4.1.0  # the latest stable release
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install

Setting Compability watchman pada ubuntu

Pada kondisi default, watchaman pada ubuntu hanya bisa jalan 1 user. Sehingga perintah 'react-native start' pada ubuntu hanya bisa jalan 1 kali (untuk start lagi harus merestart komputer).

Untuk memperbaikinya anda harus menambah value inotify watchers pada ubuntu.

Install Flow

Flow saat ini support untuk arsitektur 64 bit, untuk ubuntu versi lain silahkan kunjungi website flow.

$ wget https://facebook.github.io/flow/downloads/flow-linux64-latest.zip
$ unzip flow-linux64-latest.zip
$ cd flow
$ echo -e "\nPATH=\"\$PATH:$(pwd)/\"" >> ~/.bashrc && source ~/.bashrc

$ flow version
$ #Flow, a static type checker for JavaScript, version 0.19.1

Install & Setting Environment Variabel Android JDK dan SDK

untuk ubuntu 64bit 13.10 keatas, anda harus menginstall additional pacckage ini terlebih dahulu

sudo dpkg --add-architecture i386
sudo apt-get update
sudo apt-get install libncurses5:i386 libstdc++6:i386 zlib1g:i386

Download JDK copy hasil download ke /home/(user) lalu jalankan perintah

$ tar -xvzf jdk-8u65-linux-x64.tar.gz

Download standalone android SDK copy hasil download ke /home/(user) lalu jalankan perintah

$ tar -xvzf android-sdk_r24.4.1-linux.tgz

$ nano ~/.bashrc

Akan terbuka nano text editor, lalu masukan kode berikut

#JavaDev PATH
export JAVA_HOME=~/jdk1.8.0_65
export PATH=$PATH:~/jdk1.8.0_65/bin
#AndroidDev PATH
export ANDROID_HOME=~/android-sdk-linux
export PATH=${PATH}:~/android-sdk-linux/tools
export PATH=${PATH}:~/android-sdk-linux/platform-tools

setelah itu save dengan menekan ctr+x enter, lalu Y dan enter.

$ nano ~/.bash_profile

Akan terbuka nano text editor, lalu masukan kode berikut

#JavaDev PATH
export JAVA_HOME=~/jdk1.8.0_65
export PATH=$PATH:~/jdk1.8.0_65/bin
#AndroidDev PATH
export ANDROID_HOME=~/android-sdk-linux
export PATH=${PATH}:~/android-sdk-linux/tools
export PATH=${PATH}:~/android-sdk-linux/platform-tools

Tutup dan buka lagi terminal. lalu ketik

$ javac -version
$ #javac 1.8.0_65

$ android

Setelah dialog Android SDK Manager muncul tinggal menginstall SDK yang diperlukan

Install SDK yang akan digunakan untuk react-native android

Install SDK seperti gambar dibawah ini

Install VirtualBox dan GenyMotion

Silahkan download GenyMotion & Virtualbox, ikuti langkah-langkah pada websitenya tinggal register dan download versi freenya.

Download dan Run virtual Device android

Pada contoh ini saya menggunakan virtual device Sony Xperia Z

Setelah selesai download, silahkan run virtual device. Tampilan jika Genymotion berjalan dengan baik

Tarik icon yang saya tandai dalam kotak merah keatas, agar mudah mengakses menu ReloadJS (pada saat develop react native nanti).

Install react-native-cli & init project

$ sudo npm install -g react-native-cli #pastikan node -v anda 4.0 keatas
$ react-native init hariini

run watcher JS server react-native

$ react-native start

Buka terminal baru, build project dan jalankan pada Genymotion (jangan ada device android yg terkonek dengan komputer saat perintah dijalankan)

$ react-native run-android

Jika muncul tampilan seperti ini, maka "SLAMAT!!", anda sukses men-setting development environment react-native di Ubuntu.