GALIH L. PRAKOSO

Yak, pada tutorial kali ini kita akan mulai menuliskan baris kode untuk membuat aplikasi mobile menggunakan React Native. Sebelumnya pastikan semua yang diperlukan sudah ada seperti yang sudah dijelaskan di tutorial sebelumnya. 👈

Untuk membuat project React Native menggunakan Expo yang pertama kali harus dilakukan adalah menginstal Expo CLI. Buka CMD / Terminal dan eksekusi perintah di bawah ini :

 Perintah diatas akan menginstal Expo CLI secara global yang ditandai dengan opsi -g . Setelah itu, buatlah folder khusus untuk membuat project React Native pada tutorial kali ini. Dan kemudian buka lagi CMD / Terminal pastikan kamu sudah menuju ke folder yang barusan kamu buat lalu eksekusi perintah di bawah ini :

Setelah mengeksekusi perintah diatas, akan muncul pilihan untuk memilih template, pilih saja blank lalu tekan enter. Tunggu hingga expo-cli telah selesai menyiapkan project mu. Setelah selesai ekeskusi perintah ini :

Perintah diatas adalah perintah untuk berpindah folder ke folder project yang sudah kita buat. Aku sarankan kalian belajar memahami perintah-perintah dasar CMD / Terminal. Agar kalian lebih enak dan lancar ketika belajar membuat aplikasi. Oke setelah itu silahkan eksekusi perintah berikut ini :

Perintah di atas akan menjalankan development server dan akan otomatis membuka browser untuk membuka DevTools dimana kalian bisa berinteraksi dengan development server menggunakan Web GUI (Graphical User Interface). Jika DevTools pada browser tidak terbuka, kalian bisa menekan huruf 'D' pada keyboard. Tampilan DevTools akan terlihat seperti ini :

Untuk kalian yang menggunakan emulator, kalian bisa klik tombol Run on Android device/emulator atau Run on IOS emulator. Untuk kalian yang menggunakan smartphone kalian sendiri, kalian bisa buka Aplikasi Expo yang sudah kalian download dan instal di smartphone kalian masing-masing. Kemudian pilih Scan QR Code. Dan kemudian scane QR Code yang ada di browser. Tunggu beberapa saat hingga aplikasi dapat berjalan di perangkat kalian. Setelah berhasil maka tampilan pada perangkat akan terlihat seperti ini di bawah ini :

Oke sekarang buka aplikasi Visual Studio Code dan klik menu File >> Add Folder To Workspace >> Pilih folder dimana project kalian berada >> Open. Lalu klik pada file App.js untuk membukanya. Tampilan Visual Studio Code akan terlihat seperti dibawah ini :

Pada sidebar yang berada di sebelah kiri adalah explorer  yang berfungsi untuk menjelajahi file yang ada di project. Setelah berhasil hingga ke langkah ini, Ganti tulisan yang saya blok (lihat gambar diatas) dengan Hello World! lalu tekan Ctrl + S atau Command + S (Untuk Mac) untuk menyimpan. Setelah itu kalian bisa melihat perubahan yang terjadi pada aplikasi yang berjalan pada perangkat kalian.

WOW! Sangat luar biasa bukan? Sangat sederhana dan cepat.

Oke, sekarang kamu sudah siap untuk lebih dalam lagi mempelajari React Native. Silahkan menuju ke tutorial selanjutnya. 👇

Tutorial React Native - Bahasa Indonesia - #4 Component