React Native
React Native CLI

React Native CLI

Prasyarat (ikuti https://reactnative.dev/docs/environment-setup (opens in a new tab))

  • Node.js LTS
  • JDK 17 (untuk Android)
  • Android Studio + Android SDK, set ANDROID_HOME dan tambahkan platform-tools ke PATH
  • Xcode (hanya macOS) untuk build iOS/simulator
  • Watchman (disarankan di macOS)

Membuat Proyek

npx @react-native-community/cli init AwesomeProject
cd AwesomeProject

Menjalankan Aplikasi

Jalankan Metro bundler:

npx react-native start

Di terminal lain, jalankan target:

  • Android (emulator atau perangkat tersambung):
npx react-native run-android
  • iOS (simulator, macOS):
npx react-native run-ios

Gunakan --device untuk memilih perangkat spesifik jika diperlukan.

Struktur Proyek Singkat

  • App.tsx: entry React.
  • android/: proyek Gradle.
  • ios/: proyek Xcode.
  • metro.config.js: konfigurasi bundler.
  • index.js: entry register app.

Styling & Komponen

Sama seperti intro: gunakan View, Text, SafeAreaView, StyleSheet, dan komponen core lain. Style menggunakan properti mirip CSS (flexbox).

Modul Native & Arsitektur Baru

  • Modul native: buat di android/ios atau gunakan TurboModules (JSI) untuk performa lebih baik.
  • Fabric renderer aktif di proyek baru; pastikan dependensi mendukungnya.

Debugging

  • Flipper untuk log, network, layout inspector (lihat bagian Flipper di bawah).
  • Reload: r di Metro terminal atau Cmd/Ctrl+R di perangkat/emulator.
  • Dev Menu: Cmd/Ctrl+D (iOS), Cmd/Ctrl+M (Android), atau adb shell input keyevent 82.

Testing

  • Unit/UI: @testing-library/react-native.
  • E2E: Detox (Android/iOS).

Build & Rilis

  • Android:

    • Buat keystore rilis, set di android/app/build.gradle.
    • Build rilis: cd android && ./gradlew assembleRelease (APK) atau bundleRelease (AAB).

  • iOS:

    • Buka ios/AwesomeProject.xcworkspace di Xcode.
    • Atur signing, pilih scheme Release, lalu Archive dan kirim ke App Store Connect.

Pemecahan Masalah Umum

  • Bersihkan cache Metro: npx react-native start --reset-cache.
  • Hapus build Android: cd android && ./gradlew clean.
  • Cocokkan versi JDK/Android SDK jika ada error toolchain.

Flipper untuk React Native CLI

Flipper adalah tool debugging resmi untuk React Native (log, network, layout, perf).

  1. Instal Flipper desktop: https://fbflipper.com (opens in a new tab).
  2. Pastikan app dibangun dengan versi React Native yang menyertakan Flipper (default di proyek CLI baru).
  3. Jalankan Metro dan aplikasi (run-android/run-ios).
  4. Buka Flipper:
    • Pilih perangkat/emulator, pilih app.
    • Gunakan plugin React DevTools, Logs, Network, Layout Inspector, dan Hermes debugger bila Hermes aktif.
  5. Jika tidak terhubung:
    • Pastikan adb mendeteksi perangkat adb devices.
    • Di iOS, pastikan use_flipper!() aktif di ios/Podfile (default) dan jalankan pod install.
    • Nonaktifkan jika build rilis bermasalah: sesuaikan konfigurasi Flipper di Gradle/Podfile.

Referensi resmi: https://reactnative.dev/docs/next/using-flipper (opens in a new tab).

Referensi Resmi

IntroductionExpo