Instalasi React Native dan Membuat Proyek Pertama Menggunakan Expo SDK 54

Pemrograman Perangkat Bergerak – Kelas XII PPLG

Pendahuluan

Perkembangan teknologi mobile membuat kebutuhan akan aplikasi Android dan iOS semakin meningkat. Saat ini, pengembang tidak selalu harus membuat dua aplikasi yang berbeda untuk setiap sistem operasi. Dengan menggunakan React Native, kita dapat membuat aplikasi Android dan iOS hanya dengan satu basis kode (codebase).

React Native merupakan framework open source yang dikembangkan oleh Facebook (Meta) menggunakan bahasa pemrograman JavaScript. Framework ini memungkinkan pengembang membangun aplikasi mobile dengan tampilan dan performa yang mendekati aplikasi native.

Agar proses pengembangan menjadi lebih mudah, React Native dapat dipadukan dengan Expo. Expo menyediakan berbagai alat yang memudahkan pemula untuk membuat, menjalankan, dan menguji aplikasi tanpa harus melakukan konfigurasi Android Studio yang rumit.

Pada materi ini, peserta didik akan mempelajari cara menyiapkan lingkungan pengembangan (development environment), membuat proyek React Native pertama menggunakan Expo SDK 54, menjalankan aplikasi di smartphone Android melalui Expo Go, serta mengenal struktur dasar sebuah proyek React Native.

Tujuan Pembelajaran

Setelah mempelajari materi ini, peserta didik diharapkan mampu:

Memahami kebutuhan perangkat untuk membuat aplikasi React Native.
Menginstal Node.js LTS.
Menginstal Visual Studio Code.
Menginstal Git.
Menginstal Expo Go pada smartphone Android.
Membuat proyek React Native menggunakan Expo SDK 54.
Menjalankan aplikasi pertama menggunakan Expo Go.
Mengenal struktur folder dalam proyek React Native.
Melakukan modifikasi sederhana pada tampilan aplikasi.

Apa itu React Native?

React Native adalah framework JavaScript yang digunakan untuk membangun aplikasi mobile Android dan iOS menggunakan satu source code.

Keunggulan React Native antara lain:

Satu kode untuk Android dan iOS.
Proses pengembangan lebih cepat.
Banyak digunakan oleh perusahaan besar.
Komunitas sangat besar.
Mudah dipelajari bagi yang telah mengenal JavaScript.

Beberapa aplikasi populer yang menggunakan React Native antara lain:

Facebook
Instagram
Discord
Shopify
Bloomberg

Mengenal Expo

Expo merupakan platform yang membantu pengembang React Native agar lebih mudah membuat aplikasi.

Expo menyediakan:

Template proyek siap pakai.
Server pengembangan (development server).
QR Code untuk menjalankan aplikasi di smartphone.
Expo Go sebagai media uji coba aplikasi.

Dengan Expo, siswa tidak perlu langsung menginstal Android Studio sehingga proses belajar menjadi lebih sederhana.

Persiapan Sebelum Praktik

Pastikan perangkat memenuhi syarat berikut.

Laptop

Windows 10 atau Windows 11
RAM minimal 4 GB (disarankan 8 GB)
Ruang kosong minimal 10 GB
Koneksi internet

Smartphone

Android versi 8 atau lebih baru
Terpasang aplikasi Expo Go
Terhubung ke jaringan internet yang sama dengan laptop (disarankan menggunakan Wi-Fi yang sama)

Langkah 1 – Instalasi Node.js

Node.js merupakan perangkat lunak yang digunakan untuk menjalankan JavaScript di luar browser.

Selain Node.js, secara otomatis akan terinstal npm (Node Package Manager) yang digunakan untuk mengelola berbagai library JavaScript.

Cara Instal

Unduh Node.js versi LTS.
Jalankan file installer.
Klik Next hingga proses selesai.
Restart Command Prompt atau Terminal.

Mengecek Instalasi

Buka Terminal kemudian jalankan:

node -v

Contoh hasil:

v22.18.0

Kemudian cek npm.

npm -v

Contoh:

10.9.3

Jika kedua perintah berhasil menampilkan versi, maka instalasi berhasil.

Langkah 2 – Instal Visual Studio Code

Visual Studio Code (VS Code) merupakan editor kode yang ringan namun sangat lengkap.

VS Code digunakan untuk:

Menulis kode program.
Menjalankan terminal.
Mengelola file proyek.
Memasang berbagai extension.

Setelah instalasi selesai, buka VS Code untuk memastikan aplikasi dapat berjalan dengan baik.

Langkah 3 – Instal Git

Git merupakan sistem pengelolaan versi (Version Control System).

Git berguna untuk:

Menyimpan riwayat perubahan kode.
Berkolaborasi dengan programmer lain.
Menghubungkan proyek dengan GitHub.

Setelah instalasi selesai, jalankan:

git --version

Contoh hasil:

git version 2.51.0

Langkah 4 – Instal Expo Go

Expo Go adalah aplikasi Android yang digunakan untuk menjalankan proyek React Native secara langsung dari smartphone.

Cara instal:

Buka Google Play Store.
Cari Expo Go.
Install.
Jalankan aplikasi.

Expo Go nantinya akan digunakan untuk melakukan scan QR Code dari komputer.

Langkah 5 – Membuat Proyek React Native Pertama

Buka Terminal.

Jalankan:

npx create-expo-app BelajarReactNative

Tunggu hingga proses selesai.

Folder proyek akan dibuat secara otomatis.

BelajarReactNative

Masuk ke folder tersebut.

cd BelajarReactNative

Langkah 6 – Membuka Proyek di VS Code

Masih pada Terminal.

Jalankan:

code .

Perintah tersebut akan membuka folder proyek pada Visual Studio Code.

Apabila muncul seluruh struktur folder proyek, berarti langkah ini berhasil.

Langkah 7 – Menjalankan Aplikasi

Pada Terminal, jalankan:

npx expo start

Setelah beberapa saat akan muncul tampilan seperti berikut.

Metro Bundler

██████████████████

QR CODE

Buka aplikasi Expo Go.

Scan QR Code yang muncul pada layar komputer.

Apabila berhasil, aplikasi React Native pertama akan tampil di smartphone.

Mengenal Struktur Folder React Native

Berikut adalah beberapa folder penting yang akan sering digunakan.

app

Berisi halaman-halaman aplikasi yang akan dibuat.

assets

Berisi gambar, ikon, font, dan berbagai file pendukung.

node_modules

Berisi seluruh library yang digunakan proyek.

Folder ini dibuat otomatis dan biasanya tidak diedit secara langsung.

package.json

Berisi informasi proyek beserta daftar library yang digunakan.

app.json

Berisi konfigurasi aplikasi seperti nama aplikasi, ikon, splash screen, dan pengaturan Expo.

Memodifikasi Tampilan Pertama

Buka file utama proyek, kemudian ubah tampilannya menjadi seperti berikut.

import { View, Text } from "react-native";

export default function App() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text style={{ fontSize: 28 }}>Halo!</Text>

      <Text>Nama Saya :</Text>

      <Text>................................</Text>

      <Text>Kelas :</Text>

      <Text>................................</Text>

      <Text>Saya siap belajar React Native.</Text>
    </View>
  );
}

Simpan perubahan.

Aplikasi pada Expo Go akan otomatis diperbarui tanpa perlu menginstal ulang.

Mengapa Menggunakan Expo?

Expo memiliki beberapa kelebihan, yaitu:

Mudah digunakan oleh pemula.
Tidak perlu konfigurasi Android Studio.
Proses pengembangan lebih cepat.
Mendukung fitur Live Reload.
Dapat langsung diuji pada smartphone.

Istilah Penting

Istilah	Penjelasan
React Native	Framework untuk membuat aplikasi Android dan iOS menggunakan JavaScript.
Expo	Platform yang mempermudah pengembangan React Native.
Expo Go	Aplikasi Android untuk menjalankan proyek React Native.
Node.js	Runtime JavaScript yang menjalankan berbagai perintah React Native.
npm	Pengelola paket JavaScript.
Git	Sistem pengelolaan versi proyek.
VS Code	Editor kode yang digunakan untuk menulis program.
Terminal	Tempat menjalankan perintah-perintah pemrograman.

Permasalahan yang Sering Terjadi

Node tidak dikenali

Penyebab:

Node.js belum terinstal atau PATH belum terbaca.

Solusi:

Restart komputer atau instal ulang Node.js.

Perintah code tidak dikenali

Penyebab:

VS Code belum ditambahkan ke PATH.

Solusi:

Buka Command Palette di VS Code, kemudian jalankan Shell Command: Install 'code' command in PATH.

Expo Go tidak dapat terhubung

Penyebab:

Laptop dan smartphone berada pada jaringan yang berbeda.

Solusi:

Hubungkan keduanya ke jaringan Wi-Fi yang sama.

Proses create-expo-app gagal

Penyebab:

Koneksi internet tidak stabil atau npm bermasalah.

Solusi:

Periksa koneksi internet, lalu ulangi perintah.

Rangkuman

Pada materi ini peserta didik telah mempelajari proses awal pembuatan aplikasi React Native menggunakan Expo SDK 54. Langkah yang dilakukan meliputi instalasi Node.js, Visual Studio Code, Git, Expo Go, pembuatan proyek pertama, menjalankan aplikasi melalui Expo Go, serta mengenal struktur folder utama proyek React Native.

Keberhasilan menjalankan aplikasi pertama merupakan fondasi penting sebelum mempelajari materi berikutnya seperti komponen (Components), JSX, Props, State, Styling, Navigation, hingga pembuatan aplikasi mobile yang lebih kompleks.

Latihan Mandiri

Jelaskan fungsi Node.js dalam pengembangan React Native.
Apa perbedaan React Native dan Expo?
Mengapa kita menggunakan perintah npx create-expo-app?
Apa fungsi npx expo start?
Sebutkan fungsi folder assets.
Apa isi dari file package.json?
Mengapa folder node_modules tidak disarankan untuk diedit?
Apa fungsi aplikasi Expo Go?
Mengapa React Native disebut framework cross-platform?
Modifikasilah tampilan aplikasi dengan menambahkan nama, kelas, hobi, cita-cita, dan sebuah gambar profil milik Anda.

Kesimpulan

React Native bersama Expo SDK 54 merupakan pilihan yang tepat untuk memulai pembelajaran pengembangan aplikasi mobile. Dengan satu basis kode JavaScript, pengembang dapat membuat aplikasi Android dan iOS secara lebih cepat, efisien, dan mudah dipelajari. Penguasaan tahapan instalasi dan pembuatan proyek pertama menjadi bekal utama sebelum memasuki materi lanjutan seperti komponen, navigasi, pengelolaan data, hingga integrasi dengan basis data dan layanan web.

Semoga artikel ini cukup lengkap sebagai bahan belajar mandiri siswa maupun referensi untuk dipublikasikan di blog kelas.