Introduction à React Native

React Native permet de créer des applications mobiles natives en utilisant JavaScript et React. Si vous connaissez React (R4A10), vous connaissez déjà 80% de React Native.

Qu'est-ce que React Native ?

React Native est un framework open source créé par Meta (Facebook) en 2015. Il permet d'écrire des applications mobiles iOS et Android en JavaScript, en utilisant les mêmes concepts que React web : composants, props, state, hooks.

La différence fondamentale avec React web : au lieu de produire des éléments HTML (<div>, <p>, <img>), React Native produit des composants natifs de chaque plateforme (UIView sur iOS, android.view.View sur Android).

React web :     JSX → Virtual DOM → DOM HTML → Navigateur
React Native :  JSX → Virtual DOM → Composants natifs → iOS / Android

Architecture de React Native

Le pont (Bridge) - Architecture classique

Dans l'architecture originale de React Native, un pont (bridge) permet la communication entre le code JavaScript et le code natif :

┌─────────────────────┐     ┌──────────────────────┐
│   JavaScript        │     │   Natif               │
│                     │     │                       │
│  Votre code React   │────▶│  UIKit (iOS)          │
│  + Logique métier   │◀────│  Android Views        │
│                     │     │                       │
└─────────────────────┘     └──────────────────────┘
          Bridge (JSON sérialisé)

Le code JavaScript tourne dans un moteur JavaScript (JavaScriptCore ou Hermes). Quand vous écrivez <View>, React Native envoie un message via le bridge pour créer un composant natif correspondant.

La nouvelle architecture (JSI / TurboModules)

Depuis 2024, React Native utilise une nouvelle architecture plus performante. Le bridge JSON est remplacé par JSI (JavaScript Interface), qui permet au code JavaScript d'appeler directement les fonctions natives, sans sérialisation.

React web vs React Native

La syntaxe est identique, seuls les composants de base changent :

// React web (R4A10)
function ProfileCard({ name, bio }) {
  return (
    <div className="card">
      <h2>{name}</h2>
      <p>{bio}</p>
    </div>
  );
}

// React Native (R4A11)
function ProfileCard({ name, bio }) {
  return (
    <View style={styles.card}>
      <Text style={styles.name}>{name}</Text>
      <Text style={styles.bio}>{bio}</Text>
    </View>
  );
}

Ce qui reste identique

• Les composants fonctionnels : même syntaxe function MonComposant() {}
• Les props : même passage et destructuration
• Le JSX : même logique avec {} pour les expressions
• Les hooks : useState, useEffect fonctionnent de la même manière
• La logique : conditions, boucles, .map(), événements

Ce qui change

Pourquoi Expo ?

Expo est un ensemble d'outils et de services qui facilite le développement avec React Native. Sans Expo, configurer React Native nécessite d'installer Xcode, Android Studio, configurer les SDKs, les émulateurs, etc. Expo gère tout cela pour vous.

Ce qu'Expo apporte

• Création de projet rapide : npx create-expo-app@latest au lieu d'une configuration manuelle
• Expo Go : application mobile pour tester votre code instantanément (pas besoin d'émulateur)
• SDK Expo : accès aux fonctionnalités natives (caméra, GPS, notifications) via des API JavaScript
• Expo Router : système de navigation basé sur les fichiers (comme Next.js)
• EAS (Expo Application Services) : compilation et déploiement sur les stores

Expo Go vs Development Build vs EAS Build

Comparaison avec Vite (R4A10)

En R4A10, vous avez utilisé Vite pour créer vos projets React web. Expo joue un rôle similaire pour React Native :

À retenir