Bagaimanakah sesebuah projek React Native distrukturkan?

Question

Accepted Answer

Projek React Native mempunyai struktur yang menggabungkan **kod JavaScript/TypeScript** dengan **projek natif iOS/Android** dan konfigurasi. Memahami struktur dan fail utama membantu menavigasi dan membina aplikasi React Native.

## Bahagian 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
```

## Menyusun kod 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 ia penting

Memahami bagaimana sesebuah projek React Native distrukturkan ialah pengetahuan praktikal yang perlu untuk menavigasi, membina, dan menyusun aplikasi React Native, jadi ia merupakan pengetahuan asas yang berguna.

Mengetahui **bahagian utama** — bahawa **App.js/App.tsx ialah komponen akar** (titik masuk), kod **JS/TS anda berada dalam `src/`** (tempat anda menghabiskan kebanyakan masa), **package.json** menguruskan dependency dan skrip (seperti mana-mana projek JavaScript), dan **projek natif `ios/` dan `android/`** wujud (untuk React Native asli, manakala Expo menguruskannya) — perlu untuk mencari jalan anda di sekitar projek React Native, yang menggabungkan kod JavaScript dengan projek natif.

Memahami aspek **ekosistem JavaScript** adalah penting: projek React Native menggunakan **package.json dan npm/yarn** untuk dependency (dengan ekosistem npm yang besar tersedia — satu kelebihan utama), **Metro** (bundler React Native), dan Babel — mencerminkan bahawa pembangunan React Native ialah pembangunan JavaScript dengan alatan yang biasa, berharga untuk pembangun web.

Memahami cara **menyusun kod** (menstruktur `src/` ke dalam folder mengikut ciri atau jenis — components, screens, navigation, services, hooks, utils, store) mencerminkan amalan baik untuk projek yang boleh diselenggara apabila ia berkembang.

Memandangkan bekerja dengan React Native memerlukan menavigasi struktur projek (kod JS ditambah projek natif), menguruskan dependency melalui package.json dan npm, memahami bundler, dan menyusun kod, dan memandangkan pengetahuan ini ialah asas praktikal yang perlu untuk sebarang pembangunan React Native, memahami bagaimana sesebuah projek React Native distrukturkan — fail utama, ekosistem JavaScript, dan organisasi kod — adalah pengetahuan praktikal asas yang berharga untuk bekerja dengan projek React Native, perlu untuk membina dan menyelenggara aplikasi dan satu kecekapan asas yang terutamanya mudah didekati bagi pembangun yang biasa dengan ekosistem JavaScript/npm.