React Native Setup & Hello World — Mobile

Memulai React Native dengan Expo Cara tercepat memulai React Native adalah dengan Expo — toolchain yang menghilangkan kerumitan setup native (Xcode, Android…

Project React Native adalah folder berisi kode JavaScript/TypeScript-mu plus alat yang mengubahnya jadi aplikasi di HP. Cara paling cepat membuatnya adalah Expo, framework React Native yang direkomendasikan dokumentasi resmi React Native: satu perintah, dan kamu sudah punya aplikasi yang jalan di HP tanpa membuka Xcode atau Android Studio. Bayangin laptopmu dapur pusat Laundry Bu Rini dan HP-mu outletnya. Metro, bundler bawaan React Native, adalah kurir yang mengemas semua resep jadi satu paket dan mengantarnya ke outlet. Tiap kali kamu mengubah resep, kurirnya cuma mengantar halaman yang berubah.

🧪 Tebakan cepat: Aplikasi sudah terbuka di HP. Kamu mengubah teks "3 pesanan aktif" jadi "2 pesanan aktif", lalu menyimpan file. Apa kamu harus build ulang aplikasinya dan memasangnya lagi di HP? Jawabannya ada di bagian "Metro dan Fast Refresh".

Membuat project

Yang kamu butuhkan cuma Node.js versi LTS di laptop dan HP (atau emulator). Lalu satu perintah:

npx create-expo-app@latest laundry-bu-rini

Ini output aslinya, dijalankan pada 11 Oktober 2026 (dipersingkat):

Creating laundry-bu-rini using the expo-template-default@sdk-57 template.

✔ Downloaded and extracted project files.
> npm install

added 607 packages, and audited 608 packages in 52s

✅ Your project is ready!

Tutorial lama memakai npx react-native init NamaProject. Perintah itu sudah dihapus sejak React Native 0.77 (Januari 2025). Kalau mau tanpa framework, CLI resminya sekarang dipanggil langsung: npx @react-native-community/cli@latest init NamaProject.

Isi foldernya

laundry-bu-rini/
├── src/
│   ├── app/              # layar: tiap file di sini jadi satu route
│   │   ├── _layout.tsx   # pembungkus semua layar
│   │   ├── index.tsx     # layar pertama
│   │   └── explore.tsx   # layar contoh kedua
│   └── components/       # komponen yang dipakai ulang
├── assets/               # ikon dan gambar
├── scripts/reset-project.js
├── app.json              # nama, ikon, scheme "laundryburini"
├── package.json          # "main": "expo-router/entry"
└── tsconfig.json

Layar pertama

// src/app/_layout.tsx
import { Stack } from 'expo-router';

export default function RootLayout() {
  return (
    <Stack>
      <Stack.Screen name="index" options={{ title: 'Pesanan saya' }} />
    </Stack>
  );
}

// src/app/index.tsx
import { StyleSheet, Text, View } from 'react-native';

export default function Index() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Laundry Bu Rini</Text>
      <Text style={styles.subtitle}>3 pesanan aktif</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center', backgroundColor: '#fff' },
  title: { fontSize: 28, fontWeight: 'bold' },
  subtitle: { fontSize: 16, color: '#555', marginTop: 8 },
});

Menjalankan di HP

cd laundry-bu-rini
npx expo start

Output aslinya, dipersingkat:

Using src/app as the root directory for Expo Router.
React Compiler enabled
Starting Metro Bundler

(kode QR)

› Scan the QR code above to open in Expo Go.
› Metro: exp://192.168.100.96:8081
› Web: http://localhost:8081

› Using Expo Go
› Press s │ switch to development build

Scan kode QR-nya dengan aplikasi Expo Go di HP. HP mengunduh JavaScript dari laptopmu lewat alamat exp://192.168.100.96:8081, jadi HP dan laptop harus di Wi-Fi yang sama. Begitu HP meminta, terminal mencatat:

Android Bundled 25721ms node_modules/expo-router/entry.js (1401 modules)

Expo Go atau development build

Metro dan Fast Refresh

Metro adalah JavaScript bundler: dia mulai dari file pertama (expo-router/entry), mengikuti setiap import, mengubah TSX jadi JavaScript biasa, menggabungkan semuanya jadi satu bundle, lalu menyajikannya ke HP lewat port 8081. Baris (1401 modules) tadi adalah jumlah file yang digabung, jadi satu bundle development sebesar 6,3 MB. Pertama kali (cache masih kosong) butuh 25,7 detik. Di laptop yang sama, setelah kodenya diubah, bundle berikutnya selesai dalam 3,4 detik karena sisanya diambil dari cache.

Saat kamu menyimpan perubahan, Metro mengirim modul yang berubah saja, dan Fast Refresh memperbarui layar dalam hitungan detik tanpa kehilangan state. Gak perlu build ulang, gak perlu memasang ulang. Itu jawaban tebakannya. Build ulang baru perlu kalau kode native berubah.

Metro bukan jembatan ke native (itu urusan JSI), bukan runtime yang menjalankan JavaScript di HP (itu Hermes), dan gak mengubah React jadi Swift atau Kotlin. Di aplikasi yang dirilis, gak ada server Metro: bundle-nya sudah dimasukkan ke dalam aplikasi.

⚠️ Jebakan yang sering ketemu

TL;DR: Buat project dengan npx create-expo-app@latest laundry-bu-rini (Expo SDK 57: React Native 0.86.3, React 19.2.3). npx react-native init sudah dihapus sejak 0.77; tanpa framework pakai npx @react-native-community/cli@latest init. Layar ada di src/app, dan index.tsx adalah layar pertama, dibungkus _layout.tsx. npx expo start menyalakan Metro dan menampilkan kode QR untuk Expo Go. Metro adalah JavaScript bundler: dia mengumpulkan semua modul (1.401 modul, 6,3 MB) jadi satu bundle dan menyajikannya ke HP, dan Fast Refresh memperbarui layar tanpa build ulang. Expo Go cocok untuk belajar, development build wajib saat kamu butuh kode native sendiri.

Yang akan kamu pelajari