Comment un projet React Native est-il structuré ?

Question

Accepted Answer

Un projet React Native a une structure combinant **du code JavaScript/TypeScript** avec **des projets natifs iOS/Android** et une configuration. Comprendre la structure et les fichiers clés aide à naviguer et à construire des applications React Native.

## Parties clés de la structure

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

## Écosystème 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
```

## Organiser votre code

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

## Pourquoi c'est important

Comprendre comment un projet React Native est structuré est une connaissance pratique nécessaire pour naviguer, construire et organiser des applications React Native, donc c'est une connaissance fondamentale utile.

Connaître les **parties clés** — que **App.js/App.tsx est le composant racine** (le point d'entrée), votre **code JS/TS vit dans `src/`** (où vous passez la plupart de votre temps), **package.json** gère les dépendances et les scripts (comme dans n'importe quel projet JavaScript), et les **projets natifs `ios/` et `android/`** existent (pour React Native nu, tandis qu'Expo les gère) — est nécessaire pour vous repérer dans un projet React Native, qui combine du code JavaScript avec des projets natifs.

Comprendre l'aspect **écosystème JavaScript** est important : les projets React Native utilisent **package.json et npm/yarn** pour les dépendances (avec le vaste écosystème npm disponible — un grand avantage), **Metro** (le bundler de React Native), et Babel — reflétant que le développement React Native est du développement JavaScript avec des outils familiers, précieux pour les développeurs web.

Comprendre comment **organiser le code** (structurer `src/` en dossiers par fonctionnalité ou type — composants, écrans, navigation, services, hooks, utils, store) reflète les bonnes pratiques pour des projets maintenables à mesure qu'ils grandissent.

Puisque travailler avec React Native nécessite de naviguer dans la structure du projet (code JS plus projets natifs), de gérer les dépendances via package.json et npm, de comprendre le bundler, et d'organiser le code, et puisque cette connaissance est une base pratique nécessaire pour tout développement React Native, comprendre comment un projet React Native est structuré — les fichiers clés, l'écosystème JavaScript, et l'organisation du code — est une connaissance pratique précieuse et fondamentale pour travailler avec des projets React Native, nécessaire pour construire et maintenir des applications et une compétence de base qui est particulièrement accessible pour les développeurs familiarisés avec l'écosystème JavaScript/npm.