Created by: Anisa Damayanti, S.Kom. For Study Purpose Only!
Pada penjelasan sebelumnya, proses implementasi project React Native dapat dilakukan menggunakan Snack Expo. Snack Expo memang sangat praktis karena kita dapat menulis kode React Native langsung melalui browser tanpa membuat project secara manual di komputer. Namun, untuk project yang lebih besar, kita akan berpindah dari Snack Expo ke project Expo lokal. Dengan project lokal, kode aplikasi berada di komputer kita dan dapat dikelola menggunakan Visual Studio Code, di mana menjalankan test dan preview tetap menggunakan Expo Go.
React Native merupakan Framework open-source buatan Meta (Facebook) untuk membuat aplikasi mobile (iOS dan Android) menggunakan JavaScript dan React. Sedangkan Expo Platform dan framework tambahan yang berdiri di atas React Native. Expo dibuat untuk menyederhanakan seluruh proses pembuatan aplikasi React Native.
Snack Expo vs Expo Lokal
Baca artikel mengenai cara implementasi React Native with Snack Expo di sini
Perangkat fisik Android/iOS yang sudah ter-install Expo Go (sudah login akun)
Web Browser with latest version (Chrome, Chrome Developer, Mozilla Firefox, Microsoft Edge)
Jika belum memiliki Node.js, bisa mengikuti tutorial Cara Install Node.js dan npm di Windows dengan Mudah dengan klik di sini
Expo Go di Android/iOS sekarang mengharuskan akun Expo yang sama untuk digunakan di terminal komputer dan di aplikasi Expo Go. Expo juga menyatakan SDK 57 saat ini dipasangkan dengan React Native 0.86 dan membutuhkan Node.js minimal 22.13.x.
B. Implementasi Expo
Pada VSCode pastikan sudah membuka folder project yang akan dijadikan wadah utama project yang akan dibangun
contoh sudah membuka folder reactnative
Buka terminal di dalam folder project reactnative jalankan perintah: npx create-expo-app@latest projectexpo –template blank@57, lalu tekan Enter
pilih New Terminal
menjalankan perintah npx create-expo-app@latest projectexpo –template blank@57 (penamaan project dapat diubah, tidak harus bernama projectexpo)
memasukkan huruf “y” jika muncul pertanyaan: Ok to proceed? (y), lalu tekan Enter
tampilan terminal jika berhasil menginstall expo yang bernama projectexpo
pada tab Explorer akan otomatis bertambah 1 folder project baru yang bernama projectexpo
Selanjutnya jalankan perintah: cd projectexpo, lalu tekan Enter
setelah menekan Enter pada perintah cd projectexpo, maka akan masuk ke dalam folder projectexpo
Kemudian login dengan akun Expo pribadi (email/username & password) di terminal komputer agar dapat dijalankan di aplikasi Expo Go dengan menjalankan perintah: npx expo login, lalu tekan Enter
Jika berhasil login, maka dapat mencoba mengecek akun Expo yang telah dimasukkan dengan menjalankan perintah: npx expo whoami, lalu tekan Enter
setelah menekan Enter pada perintah npx expo whoami, maka akan memunculkan akun Expo pribadi yang bernama anisadamayanti
Selanjutnya mencoba me-running project dengan menjalankan perintah: npx expo start -c, lalu tekan Enter
1. menjalankan perintah npx expo start -c 2. tampilan terminal jika berhasil akan memunculkan QR Code yang siap untuk di scan
Kemudian buka aplikasi Expo Go di device Android/iOS, disarankan untuk login dengan akun Expo yang sama seperti login di terminal dan menggunakan sinyal internet yang sama antara komputer/laptop dengan device
jika sudah login dengan akun Expo yang sama maka muncul project
output dari projectexpo
Selanjutnya akan mencoba me-running project dengan web sebagai Live Preview seperti di Snack Expo, dengan membuka kembali terminal server yang sedang berjalan di VSCode, lalu menekan shortcut keyboard: Ctrl+ C agar server terhenti
muncul Stopped Server jika berhasil
Jalankan perintah: npx expo install react-dom react-native-web, lalu tekan Enter
1. menjalankan perintah npx expo install react-dom react-native-web 2. tampilan terminal jika berhasil menginstall dependency
Selanjutnya kembali me-running project dengan menjalankan perintah: npx expo start -c, lalu tekan Enter
1. menjalankan perintah npx expo start -c 2. tampilan terminal jika berhasil akan memunculkan QR Code yang siap untuk di scan 3. menampilkan web sebagai Live Preview dengan alamat url http://localhost:8081
Pada Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge membuka url berikut: http://localhost:8081
output dari projectexpo
Modifikasilah hingga tampilan akhirnya menjadi seperti ini
a founder of december skies code, a software engineering teacher, and a lifelong learner who just tries her best at whatever she does.
let's work together!
