Come è strutturato un progetto React Native?

Question

Accepted Answer

Un progetto React Native ha una struttura che combina **codice JavaScript/TypeScript** con **progetti nativi iOS/Android** e configurazione. Comprendere la struttura e i file chiave aiuta a navigare e costruire app React Native.

## Parti chiave della struttura

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

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

## Organizzazione del codice

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

## Perché è importante

Comprendere come è strutturato un progetto React Native è una conoscenza pratica necessaria per navigare, costruire e organizzare app React Native, quindi è una conoscenza fondamentale utile.

Conoscere le **parti chiave** — che **App.js/App.tsx è il componente radice** (il punto di ingresso), il **codice JS/TS si trova in `src/`** (dove passi la maggior parte del tempo), **package.json** gestisce le dipendenze e gli script (come qualsiasi progetto JavaScript), e i **progetti nativi `ios/` e `android/`** esistono (per React Native bare, mentre Expo li gestisce) — è necessario per orientarsi in un progetto React Native, che combina codice JavaScript con progetti nativi.

Comprendere l'aspetto **dell'ecosistema JavaScript** è importante: i progetti React Native utilizzano **package.json e npm/yarn** per le dipendenze (con l'enorme ecosistema npm disponibile — un grande vantaggio), **Metro** (il bundler di React Native) e Babel — riflettendo che lo sviluppo React Native è sviluppo JavaScript con strumenti familiari, prezioso per sviluppatori web.

Comprendere come **organizzare il codice** (strutturare `src/` in cartelle per feature o tipo — componenti, schermate, navigazione, servizi, hook, utility, store) riflette la buona pratica per progetti mantenibili mentre crescono.

Poiché lavorare con React Native richiede di navigare la struttura del progetto (codice JS più progetti nativi), gestire le dipendenze tramite package.json e npm, comprendere il bundler e organizzare il codice, e poiché questa conoscenza è una base pratica necessaria per qualsiasi sviluppo React Native, comprendere come è strutturato un progetto React Native — i file chiave, l'ecosistema JavaScript e l'organizzazione del codice — è una conoscenza pratica preziosa e fondamentale per lavorare con progetti React Native, necessaria per costruire e mantenere app e una competenza di base che è particolarmente accessibile per sviluppatori familiari con l'ecosistema JavaScript/npm.