Jak jest strukturyzowany projekt React Native?

Question

Accepted Answer

Projekt React Native ma strukturę łączącą **kod JavaScript/TypeScript** z **natywnymi projektami iOS/Android** oraz konfiguracją. Zrozumienie struktury i kluczowych plików pomaga nawigować i budować aplikacje React Native.

## Kluczowe części 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)
```

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

## Organizowanie kodu

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

## Dlaczego to ważne

Zrozumienie sposobu strukturyzacji projektu React Native jest niezbędną wiedzą praktyczną do nawigowania, budowania i organizacji aplikacji React Native, dlatego jest użyteczną wiedzą fundamentalną.

Znajomość **kluczowych części** — że **App.js/App.tsx to główny komponent** (punkt wejścia), **kod JS/TS znajduje się w `src/`** (gdzie spędzasz większość czasu), **package.json** zarządza zależnościami i skryptami (jak w każdym projekcie JavaScript), a **natywne projekty `ios/` i `android/`** istnieją (dla czystego React Native, natomiast Expo nimi zarządza) — jest niezbędna, aby się zorientować w projekcie React Native, który łączy kod JavaScript z projektami natywnymi.

Zrozumienie aspektu **ekosystemu JavaScript** jest ważne: projekty React Native używają **package.json i npm/yarn** do zarządzania zależnościami (z ogromnym ekosystemem npm dostępnym — główna przewaga), **Metro** (bundler React Native), i Babel — odzwierciedlając, że développement React Native to desenvolvimento JavaScript z znanymi narzędziami, cenne dla programistów webowych.

Zrozumienie, jak **organizować kod** (strukturyzowanie `src/` na foldery według funkcjonalności lub typu — komponenty, ekrany, nawigacja, usługi, hooks, utils, store) odzwierciedla dobrą praktykę dla łatwych w utrzymaniu projektów w miarę ich wzrostu.

Ponieważ praca z React Native wymaga nawigowania po strukturze projektu (kod JS plus projekty natywne), zarządzania zależnościami przez package.json i npm, zrozumienia bundlera oraz organizowania kodu, a ponieważ ta wiedza jest niezbędną praktyczną podstawą dla każdego development React Native, zrozumienie sposobu strukturyzacji projektu React Native — kluczowych plików, ekosystemu JavaScript i organizacji kodu — jest cenną, fundamentalną wiedzą praktyczną do pracy z projektami React Native, niezbędną do budowania i utrzymywania aplikacji i podstawową kompetencją, która jest szczególnie dostępna dla programistów zaznajomionych z ekosystemem JavaScript/npm.