Bagaimana struktur proyek React Native?

Question

Accepted Answer

Proyek React Native memiliki struktur yang menggabungkan **kode JavaScript/TypeScript** dengan **proyek native iOS/Android** dan konfigurasi. Memahami struktur dan file-file kunci membantu dalam menavigasi dan membangun aplikasi React Native.

## Bagian-bagian utama struktur

```text
my-app/
  App.js / App.tsx       → the root component (app entry point)
  src/ (or app/)         → your JS/TS code (components, screens, etc.) — organize here
  package.json           → dependencies and scripts (npm/yarn) — like any JS project
  node_modules/          → installed npm dependencies
  ios/                   → the native iOS project (Xcode) — for bare RN
  android/               → the native Android project (Gradle) — for bare RN
  index.js               → registers the root component
  app.json / app.config  → app config (name, icon) — especially in Expo
  (Expo projects hide ios/android; managed by Expo)
```

## Ekosistem JavaScript

```text
→ package.json → dependencies (React Native, navigation, libraries) + scripts
→ npm / yarn → install packages (npm install); the huge npm ecosystem is available
→ Metro → React Native's JavaScript bundler (bundles your JS for the app)
→ Babel → transpiles modern JS/JSX/TypeScript
```

## Mengorganisir kode Anda

```text
→ Organize src/ into folders (common):
  src/components/ (reusable UI), src/screens/ (screen components),
  src/navigation/, src/services/ (API), src/hooks/, src/utils/, src/store/ (state)
→ Keep code organized as the app grows (separation by feature or type).
```

## Mengapa ini penting

Memahami bagaimana struktur proyek React Native adalah pengetahuan praktis yang diperlukan untuk menavigasi, membangun, dan mengorganisir aplikasi React Native, sehingga merupakan pengetahuan dasar yang berguna.

Mengetahui **bagian-bagian utama** — bahwa **App.js/App.tsx adalah komponen root** (titik masuk), **kode JS/TS Anda berada di `src/`** (di mana Anda menghabiskan sebagian besar waktu), **package.json** mengelola dependensi dan skrip (seperti proyek JavaScript apa pun), dan **proyek native `ios/` dan `android/`** ada (untuk React Native bare, sementara Expo mengelolanya) — perlu untuk menemukan jalan Anda di sekitar proyek React Native, yang menggabungkan kode JavaScript dengan proyek native.

Memahami aspek **ekosistem JavaScript** penting: proyek React Native menggunakan **package.json dan npm/yarn** untuk dependensi (dengan ekosistem npm yang luas tersedia — keuntungan besar), **Metro** (bundler React Native), dan Babel — mencerminkan bahwa pengembangan React Native adalah pengembangan JavaScript dengan alat yang akrab, berharga bagi pengembang web.

Memahami cara **mengorganisir kode** (menyusun `src/` menjadi folder berdasarkan fitur atau tipe — komponen, layar, navigasi, layanan, hooks, utils, store) mencerminkan praktik terbaik untuk proyek yang dapat dipertahankan seiring pertumbuhan mereka.

Karena bekerja dengan React Native memerlukan menavigasi struktur proyek (kode JS plus proyek native), mengelola dependensi melalui package.json dan npm, memahami bundler, dan mengorganisir kode, dan karena pengetahuan ini adalah fondasi praktis yang diperlukan untuk pengembangan React Native apa pun, memahami bagaimana struktur proyek React Native — file-file kunci, ekosistem JavaScript, dan organisasi kode — adalah pengetahuan praktis yang berharga dan fundamental untuk bekerja dengan proyek React Native, diperlukan untuk membangun dan memelihara aplikasi, dan kompetensi dasar yang sangat mudah didekati untuk pengembang yang terbiasa dengan ekosistem JavaScript/npm.