Jak je strukturován projekt React Native?

Question

Accepted Answer

Projekt React Native má strukturu kombinující **kód JavaScript/TypeScript** s **nativními projekty iOS/Android** a konfigurací. Pochopení struktury a klíčových souborů pomáhá při navigaci a vytváření aplikací React Native.

## Klíčové části struktury

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

## Ekosystém JavaScriptu

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

## Organizace vašeho kódu

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

## Proč je to důležité

Rozvržení projektu React Native je nezbytná praktická znalost pro orientaci, vytváření a organizování aplikací React Native, takže je to užitečná základní znalost.

Znalost **klíčových částí** — že **App.js/App.tsx je kořenová komponenta** (vstupní bod), váš **kód JS/TS je v `src/`** (kde trávíte většinu času), **package.json** spravuje závislosti a skripty (jako v libovolném projektu JavaScript) a **nativní projekty `ios/` a `android/`** existují (u bare React Native, zatímco Expo je spravuje) — je nezbytné pro orientaci v projektu React Native, který kombinuje kód JavaScriptu s nativními projekty.

Pochopení aspektu **ekosystému JavaScriptu** je důležité: projekty React Native používají **package.json a npm/yarn** pro závislosti (s obrovským dostupným ekosystémem npm — hlavní výhoda), **Metro** (bundler React Native) a Babel — to odráží, že vývoj React Native je vývoj JavaScriptu se známými nástroji, cenný pro vývojáře webu.

Pochopení, jak **organizovat kód** (strukturování `src/` do složek podle funkcí nebo typu — komponenty, obrazovky, navigace, služby, hooks, utils, store) odráží dobrou praxi pro udržovatelné projekty s jejich růstem.

Protože práce s React Native vyžaduje navigaci v struktuře projektu (kód JS plus nativní projekty), správu závislostí přes package.json a npm, porozumění bundleru a organizaci kódu, a protože je tato znalost nezbytným praktickým základem pro jakýkoli vývoj React Native, pochopení, jak je projekt React Native strukturován — klíčové soubory, ekosystém JavaScriptu a organizace kódu — je cenná, základní praktická znalost pro práci s projekty React Native, nezbytná pro vytváření a údržbu aplikací a základní kompetence, která je zvláště přístupná vývojářům obeznámeným s ekosystémem JavaScript/npm.