Cum este structurat un proiect React Native?

Question

Accepted Answer

Un proiect React Native are o structură care combină **cod JavaScript/TypeScript** cu **proiecte native iOS/Android** și configurație. Înțelegerea structurii și a fișierelor cheie ajută la navigarea și construirea aplicațiilor React Native.

## Componentele cheie ale structurii

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

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

## Organizarea codului

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

## De ce este important

Înțelegerea modului în care este structurat un proiect React Native este o cunoaștere practică necesară pentru navigarea, construirea și organizarea aplicațiilor React Native, deci este o cunoaștere fundamentală utilă.

Cunoașterea **componentelor cheie** — că **App.js/App.tsx este componenta rădăcină** (punctul de intrare), **codul JS/TS se află în `src/`** (unde petreci cea mai mare parte a timpului), **package.json** gestionează dependențele și scripturile (ca în orice proiect JavaScript), și **proiectele native `ios/` și `android/`** există (pentru React Native bare, în timp ce Expo le gestionează) — este necesară pentru a te orienta într-un proiect React Native, care combină cod JavaScript cu proiecte native.

Înțelegerea aspectului **ecosistemului JavaScript** este importantă: proiectele React Native folosesc **package.json și npm/yarn** pentru dependențe (cu enorm de multe pachete npm disponibile — un avantaj major), **Metro** (bundler-ul React Native), și Babel — reflectând că dezvoltarea React Native este dezvoltare JavaScript cu instrumente familiare, valoroasă pentru dezvoltatorii web.

Înțelegerea modului de **organizare a codului** (structurarea `src/` în foldere după feature sau tip — componente, ecrane, navigare, servicii, hooks, utilitare, store) reflectă buna practică pentru proiectele menținute ușor pe măsură ce cresc.

Deoarece lucrul cu React Native necesită navigarea structurii proiectului (cod JS plus proiecte native), gestionarea dependențelor prin package.json și npm, înțelegerea bundler-ului și organizarea codului, iar aceasta este cunoaștere practică fundamentală necesară pentru orice dezvoltare React Native, înțelegerea modului în care este structurat un proiect React Native — fișierele cheie, ecosistemul JavaScript și organizarea codului — este cunoaștere practică valoroasă și fundamentală pentru lucrul cu proiecte React Native, necesară pentru construirea și menținerea aplicațiilor și o competență de bază care este deosebit de accesibilă pentru dezvoltatorii familiarizați cu ecosistemul JavaScript/npm.