React Native

Belajar React Native – Instalasi dan Konfigurasi

Belajar React Native – Instalasi dan Konfigurasi

2861 Dilihat

Selamat datang teman-teman daengweb.id, memulai kesempatan yang baru ini kita akan mencicipi teknologi lainnya dalam seri belajar React Native bersama daengweb.id. React Native adalah sebuah framework open source milik facebook yang memungkinkan kita untuk membuat aplikasi Android dan IOS dengan menggunakan Javascript. Hal ini dimungkinkan karena React Native menggunakan native component Android dan IOS akan tetapi menggunakan bahasa pemrograman Javascript.

Dengan menggunakan React Native, maka kita dapat membangun sebuah aplikasi yang benar-benar terasa native, tidak seperti pendahulunya semisal Phonegap/cordova yang masih berbasis webview. Meski tergolong pendatang baru (History of React Native), namun perkembangan react native cukup pesat sehingga menarik hati perusahaan teknologi untuk menggunakannya karena kemudahan dan ke-powerfull-an yang ditawarkannya.

Persiapan Instalasi React Native

Berikut beberapa tahapan persiapan sebelum menginstall react native. Karena saya menggunakan linux ubuntu, maka pada tutorial kali ini saya akan lebih prefer pada sistem operasi yang saya gunakan, namun sebisa mungkin akan memberikan gambaran dan referensi pada sistem operasi lainnya.

Install Node JS

Sebagaimana yang tertera pada official site : https://facebook.github.io/react-native/docs/getting-started.html kita diminta untuk menginstall nodejs terlebih dahulu. Jika anda menggunakan debian/ubuntu maka jalankan command berikut :

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -
sudo apt-get install -y nodejs

atau anda bisa merujuk pada dokumentasi nodejs untuk sistem operasi lainnya : https://nodejs.org/en/download/package-manager

Install React Native CLI

Setelah nodejs berhasil diinstall, selanjutnya kita diminta untuk menginstall react native cli. Jalankan command berikut dan tunggu hingga selesai :

npm install -g react-native-cli

Install Android Studio & JDK

Dalam tahap development dan testing nntinya maka kita membutuhkan emulator android studio, sedangkan android studio membutuhkan JDK. Android studio sendiri membutuhkan java se development kit versi 8, silahkan download http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html sesuai sistem operasi yang kamu gunakan.

Selanjutnya adalah instalasi Android studio, silahkan download terlebih dahulu pada link berikut : https://developer.android.com/studio/index.html . Pilih “Custom” setup pada bagian installation type, dan pastikan beberapa item dibawah ini tercentang :

  • Android SDK

  • Android SDK Platform

  • Android Virtual Device

Kemudian klik next untuk menginstall semua komponen yang dibutuhkan.

Secara default, Android studio sudah terinstall android SDK versi terakhir. Akan tetapi dalam membuat app React Native dengan native code, memerlukan Android 6.0 (Marshmallow) SDK. Dan kabar baiknya SDK Android lainnya dapat di install menggunakan SDK Manager pada Android Studio.

Dari jendela “Welcome to android studio”, klik “Configure”, kemudian pilih “SDK Manager”. Kemudian pilih tab “SDK Platforms”, lalu centang “Show Package Details” disebelah pojok kanan bawah. Perhatikan item component Android 6.0 (Marshmallow) yang telah expand, dan pastikan beberapa item dibawah ini telah dicentang :

  • Google APIs

  • Android SDK Platform 23

  • Intel x86 Atom_64 System Image

  • Google APIs Intel x86 Atom_64 System Image

Kemudian pilih tab “SDK Tools dan centang kotak “Show Package Details”, Pada “Android SDK Build-Tools”, pastikan 23.0.1 sudah tercentang.

Selanjutnya, klik Apply untuk mendownload dan menginstal Android SDK dan tools yang terkait.

Konfigurasi ANDROID_HOME environment variable

React Native tools membutuhkan environment variables untuk disetting agar dapat digunakan membuat apps dengan native code. Namun ada perbedaan dalam konfigurasi ANDROID_HOME tergantung sistem operasi yang anda gunakan. Untuk linux sendiri silahkan edit .bash_profile pada directory home. Kemudian tambahkan code berikut dan pastikan path tersebut sudah sesuai dengan path android sdk :

export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

Sedangkan untuk anda pengguna windows, masuk ke Control panel → System and Security → System → Change settings → Advanced System Settings → Environment variables → New, kemudian masukkan path Android Studio SDK.

Install Watchman (Optional)

Watchman adalah sebuah tool untuk melihat perubahan filesystem yang dibuat oleh Facebook. Sangat disarankan untuk menginstallnya untuk performance yang lebih baik, tapi juga dapat dilewatkan (skip). Untuk proses instalasinya dapat mengikut panduan berikut : https://facebook.github.io/watchman/docs/install.html#build-install

Membuat React Native Project

Tiba saatnya setelah proses persiapan yang panjang untuk melakukan instalasi react native dengan menggunakan command line, ketikkan perintah berikut :

react-native init NamaProject

tunggu hingga proses instalasi selesai, dan lama prosesnya tergantung koneksi internet kamu. Jika sudah silahkan masuk ke directory project anda menggunakan command line :

cd NamaProject
react-native run-android

tunggu hingga proses selesai dan Emulator android yang telah dijalankan akan tampak seperti ini

Proses instalasi dan konfigurasi react native telah selesai, maka dengan ini berakhir juga seri pertama belajar react native. Semoga bermanfaat.

Backend Developer iTechShark, salah satu perusahaan asal Amerika. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Fitur Authentication React Native React Native

Fitur Authentication React Native

Apa jadinya apabila informasi yang bersifat pribadi dapat diakses secara publik yang bukan merupakan pemilik informasi tersebut? Maka dalam kondisi seperti ini, fitur authentication akan sangat dibutu...

Membuat Aplikasi Chatting React Native React Native

Membuat Aplikasi Chatting React Native

Pada case kali ini kita akan berinteraksi dengan database menggunakan Firebase dengan contoh kasus yakni membuat aplikasi chatting yang kita beri nama Whatsapp Clone.

React Native Navigation React Native

React Native Navigation

Salah satu hal yang penting untuk diketahui dalam membangun sebuah aplikasi mobile adalah navigasi, sebab dengan navigasi kita bisa berinteraksi antar satu component dengan component lainnya atau anta...

Komentar