Wie ist ein React Native-Projekt strukturiert?

Question

Accepted Answer

Ein React Native-Projekt hat eine Struktur, die **JavaScript/TypeScript-Code** mit **nativen iOS/Android-Projekten** und Konfiguration kombiniert. Das Verständnis der Struktur und der Schlüsseldateien hilft beim Navigieren und Erstellen von React Native-Apps.

## Wichtigste Teile der 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)
```

## JavaScript-Ökosystem

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

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

## Warum es wichtig ist

Das Verständnis der Struktur eines React Native-Projekts ist notwendiges praktisches Wissen zum Navigieren, Erstellen und Organisieren von React Native-Apps, daher ist es nützliches Grundlagenwissen.

Die **wichtigsten Teile** zu kennen — dass **App.js/App.tsx die Root-Komponente** (der Einstiegspunkt) ist, Ihr **JS/TS-Code in `src/`** lebt (wo Sie die meiste Zeit verbringen), **package.json** Abhängigkeiten und Scripts verwaltet (wie jedes JavaScript-Projekt) und die **nativen `ios/`- und `android/`-Projekte** existieren (bei bare React Native, während Expo diese verwaltet) — ist notwendig, um sich in einem React Native-Projekt zurechtzufinden, das JavaScript-Code mit nativen Projekten kombiniert.

Das **JavaScript-Ökosystem** zu verstehen ist wichtig: React Native-Projekte verwenden **package.json und npm/yarn** für Abhängigkeiten (mit dem riesigen verfügbaren npm-Ökosystem — ein großer Vorteil), **Metro** (React Natives Bundler) und Babel — was widerspiegelt, dass React Native-Entwicklung JavaScript-Entwicklung mit vertrauten Tools ist, wertvoll für Web-Entwickler.

Zu verstehen, wie man **Code organisiert** (Strukturierung von `src/` in Ordner nach Funktion oder Typ — Komponenten, Bildschirme, Navigation, Services, Hooks, Utils, Store) spiegelt bewährte Praktiken für wartbare Projekte bei ihrem Wachstum wider.

Da das Arbeiten mit React Native das Navigieren der Projektstruktur (JS-Code plus native Projekte), das Verwalten von Abhängigkeiten über package.json und npm, das Verstehen des Bundlers und die Codeorganisation erfordert, und da dieses Wissen eine notwendige praktische Grundlage für jede React Native-Entwicklung ist, ist das Verständnis der Struktur eines React Native-Projekts — die Schlüsseldateien, das JavaScript-Ökosystem und die Codeorganisation — wertvoll, grundlegendes praktisches Wissen für die Arbeit mit React Native-Projekten, notwendig für das Erstellen und Verwalten von Apps und eine grundlegende Kompetenz, die besonders zugänglich für Entwickler ist, die mit dem JavaScript/npm-Ökosystem vertraut sind.