Tuesday 3 December 2019

Install React Native to Windows 10

Sumber : https://miro.medium.com/max/820/1*1MWkosYugNk7bLLfRHtEfQ.jpeg

Alhamdulillah setelah sekian lama tidak update artikel, ahirnya bisa update kembali. Apa kabar kalian semua ? semoga dalam keadaan sehat dan di mudahkan dalam mencari rizki.

Pada kesempatan kali ini saya akan membahas bagaimana melakukan instalasi React-Native pada Windows 10. React-native itu sendiri merupakan library besutan Facebook untuk membangun aplikasi mobile Android maupun IOS. Selain itu, dengan menggunakan React-Native kita bisa membangun aplikasi mobile dengan mudah.

A. Instalasi

Ok, langsung saja kita praktekkan bahan apa aja yang dibutuhkan.
1. Install Node.js
2. Install JDK
3. Install Android Studio
 
Ketiga bahan diatas bisa kalian dapatkan pada situs resmi masing-masing.
 
*Pada kasus ini saya menggunakan Windows 10.
 
*Instalasi React-native tanpa Expo. 

*Khusus Android Studio, yang kita butuhkan hanya SDK nya saja, sebernarnya tidak harus install Android Studio cukup download SDK nya saja. Kenapa harus instaall Android Studio..??? maksud saya agar lebih mudah ketika melakukan update SDK jika ada versi yang baru, jadi alangkah baiknya kalian install saja Android Studio.
 
*Tapi harus diperhatikan ketika malakukan instalasi Android Studio, pada bagian lokasi PATH SDK nya, usahakan lokasinya jangan di direktori C, karena size SDK nanti bisa sampai puluhan GB..
*Versi bahan-bahan yang saya gunakan
1. Node Js =>  10.16.0 (bisa pakai yang terbaru)
2. JDK => 8u131 (bisa pakai yang terbaru)
3. Android Studio => 2.3.3 (bisa pakai yang terbaru)
4. React-Native => Sesuai selera kalian (bisa pakai yang terbaru)

B. Setting Variabel

Jika sudah selesai melakukan instalasi bahan-bahan diatas, selanjutnya kita akan melakukan konfigurasi Variabel. Silahkan kalian ketikan env/environment pada pencarian windows 10, dan klik Edit the system environment variables.
Akan muncul tampilan seperti berikut, klik environment variables.
Pada tampilan berikut kita fokus pada bagian User Variables.


Selanjutnya klik new pada bagian User Variables,
1. Variabel name : ANDROID_HOME,  Variable Value: *lokasi sdk kalian
2. Variable name : JAVA_HOME, Variable Value: *lokasi JDK kalian

Selanjutnya ke bagian  System Variables.
.
Cari variable Path kemudian klik 1 kali, lalu klik tombol edit.
kemudian klik new, dan ketikan alamat 'lokasi sdk kalian/platform-tools' dan klik Ok.

C. Instalasis React-Native

1. Buka Comand Promt kalian, kemudian ketikan ini
npm install -g react-native-cli
tunggu sampai selesai. 
 
2. Selanjutnya silahkan kalian buat folder khusus untuk project React-native kalian, untuk lokasinya bebas dimana saja.
3. Kembali ke Comand Promt, kemudian arahkan root direktori ke project React-native yang dibuat tadi.
ex : misal projectnya di E:\react-native. Pada Comand promt yang terbuka tadi ketikan E: (E tambahkan titik 2), maka akan berpindah root directori ke E, selanjutnya ketikan 'cd react-native'(tanpa kutip) dan enter, maka kita akan berada dalam folder react-native.
4. Langkah selanjutnya kita akan mendownload project React-native dengan cara.
react-native init nama_project_kalian
atau jika pengen sesuai versi bisa pakai ini
react-native init nama_project_kalian --version x.xx.x
dan tunggu sampai selesai,
5. Jika sudah selesai instalasi, selanjutnya ketikan pada comand promt kalian 'cd nama_project_yang _dibuta_tadi' tanpa kutip (lokasi kita saat ini E:\react-native\project yang di buat tadi).
6. Selanjutnya silahkan hubungkan Smartphone kalian ke laptop/komputer menggunakan kabel USB.
7. Setelah itu ketikan pada Comand Promt
react-native run-android
atau
react-native-run-ios
*penting, untuk pertama kali menjalankan project react-native ke Smarphone biasanya membutuhkan waktu yang sedikit lama karena akan ada yang di download sesuai dengan versi OS Smartphone kalian.
 
Selamat mencoba....

Sekian dulu cara instalasi React-native pada windows 10,
jika ada yang ingin dipertanyakan silahkan isi kolom komentar di bawah.
Semoga bermanfaat....