Tutorial Install ReactNative Dengan Mudah - KODE IT
Saturday, February 2, 2019
Edit
Hai sobat kode it kali ini saya akan
memberikan tutorial install ReactNative. Mula-mula kita harus mengerti
apa itu reactnative bukan,React Native merupakan cross-platform
framework yang di buat oleh tim Facebook untuk membuat mobile app (android
& ios ) dengan menggunakan javascript sebagai bahasa
pemogramannya dan developer harus mengerti React.js kalau mau pakai React Native.
React.js itu Library
yang di buat oleh facebook tahun 2013.Gunanya apa?simplenya gunanya itu
membantu developer membuat User Interface (UI) Tapi Kalu Ada yang mau tau lebih
detail bisa baca di sini. Udah tau bukan,mari kita coba install react native
tersebut.
1. Persiapan Instalasi
Alat :
- Laptop dengan RAM min. 2 GB
- HP dengan versi Android min. 5.0 / Lolipop
- Kabel USB
Bahan :
- JDK versi terbaru
https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
- NodeJS
- https://nodejs.org/en/
- Android Studio versi terbaru
- https://developer.android.com/studio/
- Emulator (Optional)
- Internet Connection
2. Langkah Instalasi
1. Instal NodeJS, JDK, dan Android Studio
2. Lakukan Konfigurasi Android Studio
Buka Android Studio, Klik "Configure" lalu pilih "SDK Manager"
Pilih tab "SDK Platforms" dari dalam Pengelola SDK, lalu centang kotak di samping "Show Package Details" di sudut kanan bawah. Cari dan perluas entri Android 6.0 (Marshmallow), lalu pastikan item berikut semua dicentang:
Klik “OK" untuk mengunduh dan menginstal SDK Android dan alat pembuat terkait.
3. Jika tidak tersedia HP dengan versi tersebut /
memerlukan
password untuk debugging, maka gunakan emulator yang tersedia pada
Android Studio atau
gunakan emulator dari Genymotion. Jika
menggunakan Hp maka hubungkan perangkat android pada
komputer lalu nyalakan USB Debugging Dengan Menghidupkan Opsi
Pengembang
4. Install React Native dengan cara :
- Pastikan Laptop telah terhubung dengan internet
- Buka CMD
- Ketikkan : npm
install -g react-native-cli
Tunggu hingga proses Instalasi selesai, Setelah proses Instalasi dan konfigurasi selesai, build Project
- Langkah Build Project Running with HP
a. Buka CMD
b. Sambungkan HP pada Laptop menggunakan kabel USB
c. Hidupkan USB Debugging pada pengaturan HP
d. Lakukan pengecekan apakah HP sudah
benar-benar
terkoneksi dengan cara :
- Ketikkan ‘adb devices’ pada CMD
- Apabila sudah muncul list device yg terkoneksi, maka koneksi berhasil
- Kemudian, ketikkan ‘adb reverse tcp:8081 tcp: 8081’ untuk
menyambungkan server
e. Build Project menggunakan React Native version
0.55.3
- Ketikan pada CMD : react-native
init namaproject --version="0.55.3"
- Setelah proses selesai, buka
directory file ProjectBaru/android/app/src/main/
- Kemudian ketikan ‘CMD’ pada bar alamat file
- Setelah CMD terbuka ketikkan :
react-native bundle --platform android --dev false
--entry-file index.js --
bundle-output
android/app/src/main/assets/index.android.bundle --assets-
dest
android/app/src/main/res
- Setelah proses selesai,
lakukan running, ketikkan pada CMD : react-native
run-android
g. Tunggu hingga proses selesai, maka akan muncul
tampilan seperti
berikut pada HP /
emulator
h. Untuk mengedit code, buka File ProjectBaru
menggunakan Visual Studio
i. Lakukan pengeditan pada file App.js, atau buat file
baru.js
j. Kemudian lakukan running lagi untuk mengetahui
hasilnya
6.2 Running with emulator
a. Buka Android Studio
b. Klik gambar tersebut untuk memulai
Emulator Android Studio
c. Lakukan pengecekan
d. Lakukan Build Project dan
Running