Pada dasarnya React Native memanglah native tidak seperti Phonegap/cordova yang berbasis web mobile. Dan perkembangan React Native ini juga cukup pesat hingga banyak perusahaan teknologi yang menggunakan framework ini karena kemudahan dan powerfullnya. Untuk mevalidasi penjelasan ini kamu bisa mengeceknya pada link berikut: Who’s using React Native?
Pada link tersebut terdapat beberapa perusahaan besar yang menggunakan React Native, antara lain Instagram, Baidu Mobile, Vogue, Bloomberg, Facebook dan masih banyak lagi. Jadi tidak ada salahnya jika kita mempelajari React Native
TETAPI
Tetapi bahasa native sesungguhnya dari Android dan IOS tetap masih yang terbaik untuk skala project tertentu. Baiklah selanjutnya mari kita bahas bagaimana cara installasi React Native pada windows.PERSIAPAN
Berpedoman pada dokumentasi React Native maka kita membutuhkan beberapa paket application installer. Application installer tersebut diantaranya adalah Nodejs, Python2, JDK8 dan package manager Chocolatey.STEP 1: Install Chocolatey
Caranya:Pertama silahkan buka Command Prompt (CMD) dengan Run as Administrator
Setelah itu masukkan perintah di bawah ini pada Command Prompt (CMD) dan tunggu hingga prosesnya selesai.
| @powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin" |
Selanjutnya kita akan menginstall React Native dan NodeJS, Python2, dan JDK8 menggunakan chocolatey.
STEP 2: Install Nodejs, python2, dan jdk8 menggunakan Chocolatey
Installasi Nodejs, python2, dan JDK8 menggunakan Chocolatey sangatlah mudah, yaitu dengan mengetik perintah berikut pada Command Prompt.Ketik command di bawah ini lalu tekan enter.
Screnshoot.
c:\windows\system32\choco install yarn
Info Penting:
Jika terjadi error saat installasi JDK8 maka lebih baik menginstallnya secara manual. Kamu bisa mengikuti tutorial berikut untuk: Cara Install JDK (Java Development Kit). Dan jangan lupa untuk mengkonfigurasi Environtment Variable.
STEP 3: Install React Native
Installasi React Native cukup mudah yaitu tinggal ketik perintah di bawah ini pada command prompt.Screenshoot.
STEP 4: Install Android Studio
Pada step ini saya mengasumsikan PC ataupun notebook yang digunakan sudah terinstall Android Studio. Namun jika kamu belum menginstall Android Studio kamu bisa mengikuti tutorial installasi Android Studio pada link berikut: Install Android StudioPenting:
Yang perlu diperhatikan adalah jangan lupa untuk mengkonfigurasi ANDROID_HOME environment variable.
Caranya:
Buka Control Panel > System and Security > System > Advanced System Settings > Environtment variables > New
setelah itu input lokasi path dari Android SDK
Selanjutnya kita akan menginstall Android 6.0 (Mashmallow) SDK.
STEP 5: Install Android 6.0 (Marshmallow) SDK
Pada step ini silahkan buka android studio yang telah terinstall dan juga buka SDK Manager. Selanjutnya silahkan install Android 6.0 (Marshmallow) dan pastikan item di bawah ini telah terinstall.- Google APIs
- Android SDK Paltform 23
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
Setelah Android 6.0 (Marshmallow) terinstall, selanjutnya silahkan membuat virtual device dengan cara memilih AVD Manager > Create Virtual Device
Setelah itu pilih hardware yang akan digunakan. Contohnya kita menggunakan Nexus 5x kemudian pilih Next
Selanjutnya pilih system image Android 6.0 (Marshmallow) dan pilih Next
Selanjutnya silahkan ganti nama dari virtual devicenya sesuai dengan yang kita inginkan. Disini kita akan memberikan namanya yaitu React dan klik tombol Finish
Setelah semua selesai maka virtual device baru dengan nama React telah berhasil dibuat. Selanjutnya jalankan virtual device tersebut.
Maka virtual device android akan terbuka seperti gambar di bawah ini.
Selanjutnya kita masuk ke tahapan terakhir, yakni membuat project pertama di React Native.
STEP 6: Mencoba Membuat Project Pertama React Native
Ini merupakan step terakhir dan yang paling ditunggu-tunggu yaitu membuat project React Native.- Pada directory C:\Users\…\Documents, silahkan buat folder: react_project
- Selanjutnya untuk membuat project dalam folder tersebut, silahkan ketik perintah di bawah ini pada Command Prompt.
Screnshoot.
Tunggu hingga proses membuat project selesai.
Penjelasan Gambar:
- Sebelumnya pada tutorial ini terlebih dahulu buat folder bernama react_project pada Documents (lihat screnshoot di atas). Pada baris perintah ini adalah bertujuan untuk mengarahkan ke direktori dari folder tersebut.
- Perintah untuk membuat project baru dengan nama ProjekPertama.
Setelah selesai membuat project baru silahkan arahkan ke directory ProjekPertama dengan perintah
Tunggu hingga proses selesai. Jika proses selesai maka pada Emulator Android yang telah kita jalankan akan muncul sebagai berikut:
Jika pada Emulator telah muncul seperti gambar di atas maka proses menjalankan Project telah selesai. Untuk merubah atau mengatur atau menuliskan program silahkan buka project tersebut menggunakan text editor. Pada contoh ini kita tadi membuat projectnya pada Users > “nama users” > Documents > react_project dan kita akan membukanya menggunakan Atom (Atom salah satu text editor, kamu bisa menggunakan text editor yang lain). Berikut ini adalah tampilan folder projectnya.
Berikut ini adalah susunan koding project index.android.js yang ditampilkan di emulator
Bagaimana mudah bukan? Kamu juga bisa ikut membantu orang lain untuk mudah belajar Mobile Apps dengan men-share tutorial ini. Happy koding
sumber:
http://www.kodingindonesia.com/tutorial-react-native-bahasa-indonesia/
0 comments:
Post a Comment