Belajar React Native - Setup Project & Struktur

#Pendahuluan

Environment kalian sudah siap di episode 0, dan arsitektur sudah jelas di episode 2. Sekarang saatnya hal yang paling seru: membuat project React Native pertama. Ini momen di mana teori mulai menjadi kode nyata yang berjalan di emulator.

Episode 3 memandu kalian membuat project dengan npx @react-native-community/cli init, memahami struktur folder yang dihasilkan, memodifikasi App.tsx, lalu menjalankan aplikasi di emulator Android. Terakhir kita bandingkan dengan alur kerja Expo untuk membantu kalian memilih yang paling tepat.

#Membuat Project dengan CLI React Native

#Perintah Init

Buka terminal di direktori tempat project akan diletakkan, lalu jalankan:

npx @react-native-community/cli init MyApp

Perintah npx @react-native-community/cli init MyApp akan menarik template terbaru, menginstall dependency, dan menyiapkan folder native untuk Android dan iOS. Nama project dipakai sebagai nama aplikasi dan identitas package, jadi pakai nama yang valid untuk kedua platform.

Jika kalian menginginkan template dengan TypeScript dan kemampuan eksplisit lain, flag --pm dan --title bisa membantu. Untuk series ini, template default sudah memakai TypeScript sejak rilis terbaru.

#Masuk dan Verifikasi

Setelah proses selesai, masuk ke folder project:

cd MyApp
npx react-native doctor

Perintah npx react-native doctor mengecek ulang environment dan memastikan semuanya siap untuk menjalankan aplikasi. Perhatikan output untuk melihat apakah ada komponen Android yang masih kurang.

#Memahami Struktur Folder

#Direktori Utama

Struktur yang dihasilkan kira-kira seperti berikut:

MyApp/
├── android/          # project Gradle untuk Android
├── ios/              # project Xcode untuk iOS
├── node_modules/     # dependency JavaScript
├── App.tsx           # entry point komponen utama
├── index.js          # pendaftaran aplikasi ke React Native
├── package.json      # manifest dependency dan script
├── tsconfig.json     # konfigurasi TypeScript
└── metro.config.js   # konfigurasi Metro bundler

• android/ dan ios/: project native yang dipakai saat build. Kalian jarang mengubahnya di tahap ini, tapi penting tahu letaknya.
• App.tsx: komponen akar. Semua layar akan bercabang dari sini.
• index.js: memanggil AppRegistry.registerComponent — pendaftaran aplikasi ke native.
• package.json: berisi script seperti start, android, dan ios.

#Entry Point: index.js dan App.tsx

index.js hanya beberapa baris: ia mengimport App, mendaftarkannya lewat AppRegistry.registerComponent(appName, () => App), dan menghubungkannya ke native. Sementara App.tsx berisi komponen yang akan dirender.

#Menjalankan di Emulator

#Start Metro dan Build Aplikasi

Buka terminal, pastikan emulator Android sudah berjalan, lalu jalankan:

npm start

npm start meluncurkan Metro, bundler yang menggabungkan semua file JavaScript menjadi satu bundle dan melayaninya ke aplikasi. Biarkan Metro tetap berjalan di terminal ini. Buka terminal kedua dan jalankan:

npx react-native run-android

Perintah npx react-native run-android membangun aplikasi native dengan Gradle, menginstallnya ke emulator, dan menghubungkannya ke Metro. Build pertama bisa memakan beberapa menit karena Gradle mengunduh dependency — ini normal. Setelah selesai, aplikasi muncul di emulator dengan layar welcome.

#Fast Refresh

Ubah teks di App.tsx, misalnya ganti judul, lalu simpan. Metro langsung memuat ulang aplikasi tanpa rebuild native — ini namanya Fast Refresh. Momen inilah yang membuat pengembangan React Native terasa sangat cepat.

#Alur Kerja Expo

#Expo Managed Workflow

Expo adalah framework di atas React Native yang menyembunyikan kompleksitas native. Membuat project sama mudahnya:

npx create-expo-app ExpoApp
cd ExpoApp
npx expo start

Dengan managed workflow, kalian tidak punya folder android/ dan ios/. Build native dilakukan di cloud lewat EAS Build, dan banyak native module (kamera, lokasi, notifikasi) tersedia lewat library Expo tanpa setup manual.

#Expo Prebuild dan Kapan Memilihnya

Jika nanti kalian butuh mengubah kode native, jalankan npx expo prebuild untuk menghasilkan folder android/ dan ios/ dari konfigurasi Expo — ini yang disebut bare/prebuild workflow. Setelah itu project berperilaku seperti project CLI biasa.

Pilihan yang masuk akal:

• Pilih Expo jika kecepatan development dan timpaan API modern (Expo Router, SDK) lebih penting daripada kontrol native penuh.
• Pilih CLI React Native jika kalian butuh kontrol penuh sejak awal atau memakai library yang belum didukung Expo.

#Kesalahan Umum Saat Setup

#Aplikasi Tidak Muncul di Emulator

Jika run-android berhasil tapi aplikasi blank, kemungkinan Metro tidak terhubung. Tekan R dua kali di terminal Metro untuk reload, atau jalankan ulang Metro. Pastikan emulator dan Metro berada di mesin yang sama dan port 8081 tidak diblokir.

#Gradle Error

Error Gradle biasanya dari versi JDK yang tidak cocok. Pastikan JDK 17 atau 18 terinstall, bukan JDK 21 yang belum didukung semua versi Gradle React Native. Perintah java -version untuk mengeceknya.

#Penutup

Episode 3 adalah tonggak besar: project React Native pertama kalian berjalan di emulator. Kalian sekarang paham struktur folder, peran Metro, entry point App.tsx, dan perbedaan alur kerja CLI vs Expo.

Inti yang harus dibawa pulang:

• npx @react-native-community/cli init MyApp membuat project lengkap dengan folder native.
• android/ dan ios/ adalah kode native; App.tsx adalah komponen akar.
• Metro adalah bundler yang melayani JavaScript ke aplikasi.
• npx react-native run-android membangun dan menginstall ke emulator.
• Fast Refresh memuat ulang perubahan JS tanpa rebuild native.
• Expo menyediakan managed workflow dengan EAS Build, dan expo prebuild menghasilkan folder native saat dibutuhkan.

Di episode 4 selanjutnya kita akan membahas komponen dasar dan styling: penggunaan View, Text, Image, TextInput, ScrollView, FlatList, dan SectionList, plus StyleSheet.create, layout Flexbox, gap, serta satuan ukuran dp, px, dan persen.