Kaip struktūrizuojamas React Native projektas?

Question

Accepted Answer

React Native projektas turi struktūrą, kurioje sujungtas **JavaScript/TypeScript kodas** su **natyviais iOS/Android projektais** ir konfigūracija. Supratimas apie struktūrą ir pagrindinius failus padeda naviguo React Native programėlės ir jas kurti.

## Pagrindinės struktūros dalys

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

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

## Jūsų kodo organizavimas

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

## Kodėl tai svarbu

Suprasti, kaip struktūrizuojamas React Native projektas, yra būtinas praktinis žinios, reikalingas naviguo, kurti ir organizuo React Native programėles, todėl tai naudinga pagrindinė žinios.

Žinoti **pagrindines dalis** — kad **App.js/App.tsx yra šakninis komponentas** (įėjimo taškas), jūsų **JS/TS kodas yra `src/`** (kur jūs praleižiate daugumą laiko), **package.json** tvarko priklausomybes ir scenarijus (kaip bet kuris JavaScript projektas), ir kad egzistuoja **natyvūs `ios/` ir `android/` projektai** (nuorint React Native, kai tuo tarpu Expo jais rūpinasi) — yra būtina norint rasti kelią aplink React Native projektą, kuris sujungia JavaScript kodą su natyviais projektais.

Suprasti **JavaScript ekosistemą** yra svarbu: React Native projektai naudoja **package.json ir npm/yarn** priklausomybėms (su didžiule npm ekosistema — dideliu privalumu), **Metro** (React Native bundleris), ir Babel — tai atspindi, kad React Native kūrimas yra JavaScript kūrimas su žinoma įrankiais, vertinga interneto kūrėjams.

Suprasti, kaip **organizuo kodą** (strukturizuo `src/` aplankus pagal funkciją arba tipą — komponentai, ekranai, navigacija, paslaugos, hook'ai, utils, store) atspindi gerą praktiką išlaikomų projektų, kai jie auga.

Kadangi darbas su React Native reikalinga naviguo projekto struktūrą (JS kodą ir naty

vius projektus), tvarko priklausomybes per package.json ir npm, suprato bundlerį ir organizuo kodą, ir kadangi ši žinios yra būtina praktinė pamatinė bet kurio React Native kūrimo žinios, suprato, kaip struktūrizuojamas React Native projektas — pagrindinius failus, JavaScript ekosistemą ir kodo organizavimą — yra vertinga, pagrindinė praktinė žinios, reikalinga dirbti su React Native projektais, būtina aplikacijų kūrimui ir palaikymui bei pagrindinė kompetencija, kuri ypač prieinama kūrėjams, žinančiems JavaScript/npm ekosistemą.