Memulai Pemrograman Mobile dengan React Native Menggunakan Expo SDK 54

Pendahuluan

Perkembangan teknologi smartphone telah mengubah cara masyarakat berkomunikasi, belajar, bekerja, hingga berbelanja. Hampir semua aktivitas sehari-hari dapat dilakukan melalui aplikasi mobile. Oleh karena itu, kemampuan membuat aplikasi mobile menjadi salah satu kompetensi penting yang harus dimiliki oleh lulusan Rekayasa Perangkat Lunak (RPL) maupun Pengembangan Perangkat Lunak dan Gim (PPLG).

Salah satu teknologi yang banyak digunakan untuk membangun aplikasi mobile adalah React Native. Framework ini memungkinkan pengembang membuat aplikasi Android dan iOS menggunakan satu bahasa pemrograman, yaitu JavaScript. Dengan satu basis kode (single codebase), aplikasi dapat dijalankan di dua sistem operasi sehingga proses pengembangan menjadi lebih cepat dan efisien. React Native dikembangkan oleh Meta (Facebook) dan digunakan dalam berbagai aplikasi populer.

Apa Itu React Native?

React Native adalah framework open source yang digunakan untuk membuat aplikasi mobile berbasis Android dan iOS menggunakan JavaScript dan React.

Berbeda dengan aplikasi web yang berjalan di browser, React Native menghasilkan aplikasi yang dapat dipasang langsung pada smartphone. Tampilan yang dibuat menggunakan komponen (component) React Native akan diterjemahkan menjadi komponen antarmuka asli (native components) sehingga aplikasi memiliki performa yang baik.

Keunggulan React Native

Menggunakan satu kode program untuk Android dan iOS.
Lebih cepat dikembangkan dibandingkan membuat dua aplikasi terpisah.
Memiliki komunitas yang besar.
Banyak tersedia dokumentasi dan contoh proyek.
Sangat cocok dipelajari oleh pemula yang telah mengenal dasar JavaScript.

Apa Itu Expo?

Expo adalah framework sekaligus kumpulan alat yang mempermudah proses pengembangan aplikasi React Native.

Dengan Expo, siswa tidak perlu langsung menginstal Android Studio atau membuat emulator. Aplikasi dapat dijalankan menggunakan smartphone Android melalui aplikasi Expo Go, sehingga proses belajar menjadi lebih sederhana. Expo menyediakan perintah create-expo-app untuk membuat proyek baru dengan konfigurasi yang sudah siap digunakan.

Mengapa Menggunakan Expo SDK 54?

Dalam pembelajaran ini digunakan Expo SDK 54 karena kompatibel dengan Expo Go untuk proses belajar dan pengujian aplikasi pada perangkat fisik. Pada masa transisi ke SDK yang lebih baru, proyek pembelajaran yang dibuat menggunakan create-expo-app masih mendukung SDK 54 sehingga cocok digunakan di kelas.

Persiapan Perangkat

Sebelum mulai membuat aplikasi, pastikan perangkat yang digunakan memenuhi kebutuhan berikut.

Perangkat Keras

Laptop atau komputer
RAM minimal 8 GB (disarankan)
Ruang penyimpanan kosong minimal 10 GB
Smartphone Android
Kabel USB (opsional)
Koneksi internet

Perangkat Lunak

1. Node.js

Node.js adalah lingkungan (runtime) yang digunakan untuk menjalankan JavaScript di luar browser.

Fungsi Node.js antara lain:

menjalankan perintah React Native;
mengelola paket (package) menggunakan npm;
membuat dan menjalankan proyek React Native.

Perintah untuk mengecek instalasi:

node -v

dan

npm -v

2. Visual Studio Code

Visual Studio Code (VS Code) merupakan editor kode yang digunakan untuk menulis program.

Kelebihan VS Code:

ringan;
gratis;
banyak ekstensi;
terminal terintegrasi.

3. Git

Git digunakan sebagai sistem pengelola versi (version control).

Manfaat Git:

menyimpan riwayat perubahan program;
memudahkan kerja sama dalam tim;
terhubung dengan GitHub.

Perintah untuk mengecek Git:

git --version

4. Expo Go

Expo Go adalah aplikasi Android yang digunakan untuk menjalankan aplikasi React Native tanpa harus membuat file APK terlebih dahulu.

Cara kerjanya:

komputer menjalankan proyek;
muncul QR Code;
QR Code dipindai menggunakan Expo Go;
aplikasi langsung tampil pada smartphone.

5. Google Chrome

Digunakan untuk:

membaca dokumentasi;
mencari referensi;
membuka halaman localhost ketika diperlukan.

Struktur Alur Pengembangan React Native

Proses pembuatan aplikasi secara umum adalah sebagai berikut.

Menyiapkan laptop.
Menginstal Node.js.
Menginstal Visual Studio Code.
Menginstal Git.
Menginstal Expo Go.
Membuat proyek React Native.
Menjalankan proyek.
Mengubah kode program.
Melihat hasil perubahan secara langsung pada smartphone.

Membuat Proyek Pertama

Buka Terminal, kemudian jalankan:

npx create-expo-app BelajarReactNative

Perintah tersebut akan:

membuat folder proyek;
mengunduh seluruh library yang diperlukan;
menyiapkan struktur proyek secara otomatis.

Masuk ke folder proyek:

cd BelajarReactNative

Jalankan aplikasi:

npx expo start

Jika berhasil, akan muncul QR Code yang dapat dipindai menggunakan Expo Go.

Mengenal Struktur Folder Proyek

Beberapa folder penting yang akan ditemui antara lain:

Folder/File	Fungsi
app	Berisi halaman aplikasi.
assets	Menyimpan gambar, ikon, dan font.
node_modules	Berisi library yang digunakan proyek.
package.json	Menyimpan informasi proyek dan daftar dependensi.
app.json	Konfigurasi aplikasi Expo.

Alur Kerja React Native

Alur pengembangan React Native dapat digambarkan sebagai berikut.

Menulis Kode
      ↓
Simpan File
      ↓
Expo Mendeteksi Perubahan
      ↓
Aplikasi Dimuat Ulang
      ↓
Perubahan Langsung Terlihat di Smartphone

Proses ini dikenal sebagai Fast Refresh, yaitu fitur yang memperbarui tampilan aplikasi secara otomatis ketika kode disimpan sehingga pengembangan menjadi lebih cepat.

Istilah Penting

Istilah	Penjelasan
React Native	Framework untuk membuat aplikasi Android dan iOS.
Expo	Platform yang mempermudah pengembangan React Native.
Node.js	Runtime JavaScript.
npm	Pengelola paket JavaScript.
VS Code	Editor kode.
Git	Version Control.
Expo Go	Aplikasi untuk menjalankan proyek React Native pada smartphone.
QR Code	Digunakan untuk menghubungkan proyek ke Expo Go.

Kesimpulan

React Native merupakan salah satu framework modern yang memungkinkan pengembang membuat aplikasi Android dan iOS menggunakan satu basis kode JavaScript. Dengan bantuan Expo, proses belajar menjadi lebih mudah karena siswa dapat menjalankan aplikasi langsung pada smartphone tanpa konfigurasi yang rumit.

Sebelum mulai membuat aplikasi, setiap pengembang perlu menyiapkan lingkungan kerja yang terdiri atas Node.js, Visual Studio Code, Git, dan Expo Go. Setelah semua perangkat siap, proyek dapat dibuat menggunakan perintah create-expo-app, kemudian dijalankan melalui expo start dan diuji menggunakan Expo Go.

Penguasaan tahap persiapan ini merupakan fondasi penting sebelum mempelajari materi berikutnya, seperti komponen React Native, JSX, state, props, navigasi, penyimpanan data, hingga pengembangan aplikasi mobile yang lebih kompleks.