Memulai Pengembangan React Native di Windows

Howdy :), bertemu lagii….masih bersama bang hasyim :), saya mau share lagi hasil belajar kemarin, sembari belajar javascript biar nambah semangat belajarnya harus ikutan update banyak hal baru tentang perkembangan javascript itu sendiri, pandangan mata saya tertuju pada react native, siapakah dia?, apakah dia yang selama ini merindukanmu?…eh :)

Perkenalan

React Native adalah framework open source besutan facebook yang dibuat setelah facebook sebelumnya membuat react.js, ReactJS sendiri merupakan sebuah library dari facebook yang dapat digunakan untuk membangun antarmuka pengguna (UI). nah apa itu react native, adalah framework open source untuk membuat aplikasi multi-platform (android, ios dan windows platform”dalam tahap pengembangan”) dengan bahasa javascript, sesuai dengan deskripsi di situs resminya“Learn once, write anywhere”. semoga paham dengan penjelasan singkat saya :), oke sebelum bicara lebih jauh lagi sekarang kita mulai persiapan nya terlebih dahulu sehingga kedepannya bisa enak explore coding an nya, disini saya share tentang menggunakan react native untuk membuat aplikasi android di windows.

Persiapan :

Install JDK (v7 atau versi yang paling baru)
Install Node JS
Install Android Studio + SDK
Emulator Genymotion
Kopi dan camilan

*catatan : jika teman teman belum pernah menginstall jdk maka perlu set path directory diman jdk di install, Windows → Search → System → Advanced System Settings → Environment variables, berikut contoh di pc saya

Variable : JAVA_HOME
Value    : C:\Program Files\Java\jdk1.7.0_79

Kemudian lakukan hal yang sama untuk android sdk-nya

Konfigurasi SDK, Emulator disini saya menggunakan emulator genymotion dengan alasan spek laptop saya :), setelah download genymotion nya kemudian download emulatornya sesuai kebutuhan, jika teman teman menggunakan emulator bawaan android studio seperti ini,

Install Android Studio
Buat projek kosong di Android Studio
Buat Android Virtual device : Manage AVD → Create
jalan kan emulatornya

Sekarang mulai deh bikin app di react native nya, buka command prompt nya, untuk memudahkan teman teman bisa gunakan git bash, disini saya menggunakan cmder (custom command prompt) yang sudah include git.

bash
cd /Users/Hasyim/react-native-workspace/

sesuaikan di direktori masing masing jika belum ada folder nya maka buat dulu dengan perintah mkdir. Kurang lebih seperti ini

kemudian sekarang kita install react-native nya,

npm install -g react-native-cli

tunggu hingga instalasi selesai, jika sudah selesai sekarang kita buat projek pertama untuk uji coba,

react-native init ProjekPertama

tunggu hingga proses pembuatan projek selesai, sambil menunggu nyalakan emulatornya. setelah proses pembuatan projek selesai cek isi folder nya, kemudian buka di text editor/IDE anda.

kurang lebih seperti gambar di atas, saya menggunakan view demikian ketika sedang belajar react-native, file induk ada di index.android.js. sekarang kita coba jalankan, menggunakan perintah :