Cara install react native di windows 10

Bismillaahirrohmaanirrohiim…

Saat ini react native menjadi minat banyak programmer untuk membuat mobile app.
Khususnya yang berangkat dari web developer. Dimana selain belajar react native, biasanya belajar react.js juga.

Kelebihan react native menurut saya:
– Mudah dipelajari
– Banyak library dan forum yang support
– Bisa dicompile di android dan IOS
– Menjadi native, bukan webview semacam cordova
– Gratis

Saingan berat react native saat ini adalah flutter, kapan2 kita bahas ya…

Sebelum install, siapkan internet yang kenceng dan full kuota.
Karena ini nanti akan mendownload data berukuran GB.

Demikian tadi pendahuluannya, sekarang saatnya kita install react native di windows 10.

1. Install Chocolaty

Klik search, ketikkan “cmd” jika sudah muncul “Comamnd Prompt” klik kanan lalu “Run As Administrator”

Jalankan perintah di bawah ini,boleh di copas

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

Tunggu sampai proses selesai.

2. Install JDK, Node.JS, dan Phyton

Ketikkan perintah dibawah di CMD tadi

choco install -y nodejs.install python2 jdk8

Tunggu sampai selesai.

3. Install Android Studio

Jika sebelumnya sudah install android studio, bisa langsung ke step selanjutnya.
Jika belum, silahkan download dan install softwarenya pada link di bawah ini.

https://developer.android.com/studio/

4. Install Android SDK

Caranya, jalankan android studio, saat di halaman “Welcome to Android Studio” klik Menu Configure lalu pilih “SDK Manager”.

Pilih Tab “SDK Platforms” pada SDK Manager, kemudian cek pada list Android 9.0 (Pie) dan Android 8.0 (Oreo).
Kemudian cek “Show Package Details” yang ada di kanan bawah.
Pastikan cek
– Android SDK Platform 28 & 26
– Source for android 28 & 26
– Intel x86 Atom_64 System Image atau Google APIs Intel x86 Atom System Image

Kemudian pilih tab “SDK Tools” dan cek “Show Package Details” di kanan bawah. Cari “Android SDK Build-Tools”, pastikan bahwa 28.0.3 sudah di cek.

Cek juga “Android Emulator, Android SDK Platform-Tools, Android SDK Tools”.

Jika sudah, klik “Apply” lalu akan muncul popup info yang akan didownload ber GB, jika sudah yakin klik “OK”.

Tunggu sampai proses download selesai ya.

5. Setup PATH environment variable

Klik menu pencarian, ketikkan “path” klik “edit the system environment variables”.
Pada tab “Advanced” klik “environment variable…” di kanan bawah.
Pada “User variables”, klik “New” dan isikan

variable name : ANDROID_HOME
variable value : c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

ganti “YOUR_USERNAME” sesuai yang ada di PC.

Lanjut, klik variabel “path”, kemudian klik edit. Klik New lalu masukkan path platform-tools.

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk\platform-tools

Setelah selesai, klik “OK” “OK”.

6. Install REACT NATIVE CLI

Tutup CMD lalu buka lagi. Lalu ketikkan :

npm install -g react-native-cli

Tunggu sampai selesai.

7. Buat aplikasi pertamamu

ketikkan

react-native init ProjectSaya

untuk pertama kali, ini akan memerlukan waktu agak lama. Tunggu sampai selesai.

8. Setting device/emulator kamu

Tancapkan HP dengan kabel ke PC.
Pastikan developer mode sudah aktif dan “USB Debugging” di aktifkan juga.

Setelah itu cek di CMD apakah sudah terdeteksi dengan cara ketik

adb devices

jika sudah muncul bisa lanjut ke tahap berikutnya, jika belum setting dulu HPnya yaa..

9. Menjalankan react native app di HP

kembali ke CMD, ketik

cd ProjectSaya

react-native run-android

Tunggu sampai selesai, lihat HP kalo ada aplikasi menanyakan izin instalasi, klik “Ijinkan”.

Kalau error, cek errornya lalu dibenerin. hehehe
Kalau sukses, harusnya sudah muncul di HP. Selamat ya…

10. Edit codingan App

Setelah sukses menjalankan app, selanjutnya modifikasi isi programnya.

Buka folder ProjectSaya dengan editor kesukaan (Sublime, Atom, Pspad, dll)

Cari App.js, edit beberapa teks lalu save.
Kembali ke HP, klik menu lalu “Reload”, lihat apa yang terjadi.

SELAMAT,
Saat ini kita sudah berhasil menginstall, menjalankan, dan memodifikasi react native app, selanjutnya:

Integrasi react native dengan emulator.
Materi layout, dan lain lain.

Semoga bermanfaat.