Kako je strukturiran projekt React Native?

Question

Accepted Answer

Projekt React Native ima strukturo, ki kombinira **JavaScript/TypeScript kodo** z **izvornimi iOS/Android projekti** in konfiguracijo. Razumevanje strukture in ključnih datotek vam pomaga pri navigaciji in gradnji React Native aplikacij.

## Ključni deli strukture

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

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

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

## Zakaj je to pomembno

Razumevanje, kako je projekt React Native strukturiran, je nujno praktično znanje za navigacijo, gradnjo in organizacijo React Native aplikacij, zato je koristno temeljno znanje.

Izmenjava **ključnih delov** — da je **App.js/App.tsx glavna komponenta** (vstopna točka), vaša **JS/TS koda se nahaja v `src/`** (kjer preživite večino časa), **package.json** upravlja odvisnosti in skripte (kot kateri koli JavaScript projekt), in **izvorni `ios/` in `android/` projekti** obstajajo (za голи React Native, medtem ko Expo upravlja) — je nujno za orientacijo v projektu React Native, ki kombinira JavaScript kodo z izvornimi projekti.

Razumevanje **JavaScript ekosistema** je pomembno: projekti React Native uporabljajo **package.json in npm/yarn** za odvisnosti (z velikanskim npm ekosistemom na voljo — velika prednost), **Metro** (bundler za React Native) in Babel — kar odraža, da je razvoj React Native javanskega razvoja s znajenim orodjem, dragoceno za spletne razvojnike.

Razumevanje, kako **organizirati kodo** (strukturiranje `src/` v mape po funkciji ali tipu — komponente, zasloni, navigacija, storitve, kljuke, pripomočki, shranjevanje), odraža dobro prakso za vzdržljive projekte, ko rastejo.

Ker delo z React Native zahteva navigacijo po strukturi projekta (JS koda in izvorni projekti), upravljanje odvisnosti prek package.json in npm, razumevanje bundlerja in organizacijo kode, in ker je to znanje nujno praktično osnovo za kakršen koli razvoj React Native, je razumevanje, kako je projekt React Native strukturiran — ključne datoteke, JavaScript ekosistem in organizacija kode — dragoceno, temeljno praktično znanje za delo s projektami React Native, nujno za gradnjo in vzdrževanje aplikacij ter osnovna kompetenca, ki je posebej dostopna za razvojnike, ki so seznanjeni z JavaScript/npm ekosistemom.