Hvordan er et React Native-projekt struktureret?

Question

Accepted Answer

Et React Native-projekt har en struktur, der kombinerer **JavaScript/TypeScript-kode** med **native iOS/Android-projekter** og konfiguration. At forstå strukturen og nøglefiler hjælper med at navigere og bygge React Native-apps.

## Vigtigste dele af strukturen

```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)
```

## JavaScript-økosystemet

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

## Organisation af din kode

```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).
```

## Hvorfor det er vigtigt

At forstå, hvordan et React Native-projekt er struktureret, er nødvendig praktisk viden til at navigere, bygge og organisere React Native-apps, så det er brugbar grundlæggende viden.

At kende de **vigtigste dele** — at **App.js/App.tsx er rootkomponenten** (indgangspunktet), din **JS/TS-kode lever i `src/`** (hvor du tilbringer det meste af din tid), **package.json** administrerer afhængigheder og scripts (som ethvert JavaScript-projekt), og de **native `ios/`- og `android/`-projekter** eksisterer (for bare React Native, mens Expo administrerer dem) — er nødvendig for at finde rundt i et React Native-projekt, som kombinerer JavaScript-kode med native projekter.

At forstå **JavaScript-økosystemet** er vigtig: React Native-projekter bruger **package.json og npm/yarn** til afhængigheder (med det enormt tilgængelige npm-økosystem — en stor fordel), **Metro** (React Native's bundler), og Babel — hvilket afspejler, at React Native-udvikling er JavaScript-udvikling med velkendt værktøj, værdifuldt for webudviklere.

At forstå, hvordan man **organiserer kode** (strukturering af `src/` i mapper efter funktion eller type — komponenter, skærme, navigation, services, hooks, utils, store) afspejler god praksis for vedligeholdelige projekter, mens de vokser.

Da arbejde med React Native kræver navigation i projektstrukturen (JS-kode plus native projekter), administration af afhængigheder via package.json og npm, forståelse af bundleren og organisering af kode, og da denne viden er nødvendig praktisk grundlag for enhver React Native-udvikling, er forståelse af, hvordan et React Native-projekt er struktureret — nøglefiler, JavaScript-økosystemet og kodeorganisering — værdifuld, grundlæggende praktisk viden til at arbejde med React Native-projekter, nødvendig for at bygge og vedligeholde apps og en grundlæggende kompetence, der er særlig tilgængelig for udviklere, der er fortrolige med JavaScript/npm-økosystemet.