0 XP
?
Développement Mobile React Native/Expo vs React Native CLI
Intermédiaire40 min30 XP

Objectifs de cette leçon

  • Comprendre les différences Expo vs React Native CLI
  • Configurer EAS Build pour le déploiement
  • Décider quand ejecter vers le bare workflow

Expo vs React Native CLI 🏗️

Quand on commence React Native, la première question est : Expo ou bare CLI ? C'est comme choisir entre une voiture clé en main ou une voiture à monter soi-même !


1. Expo — la solution clé en main 🚀

text ' Expo = le moyen le PLUS SIMPLE de créer une app React Native ' Avantages : ' • Plus besoin de Xcode ou Android Studio ' • Expo Go : tester instantanément sur son téléphone ' • EAS Build : compilation dans le cloud ' • Mises à jour OTA (sans passer par les stores)

' Inconvénients : ' • Pas de modules natifs personnalisés ' • Taille de l'app un peu plus grosse ' • Dépendance à l'écosystème Expo ``'

# Créer un projet Expo (nouvelle génération)
npx create-expo-app mon-app --template blank-typescript

# Lancer l'app
npx expo start

# Scanner le QR code avec Expo Go sur son téléphone !
# → L'app s'affiche instantanément, magique ! ✨
``'

---

## 2. React Native CLI — le contrôle total 🔧

```text
' React Native CLI = la voie "bare" (nue)
' Vous avez le contrôle total sur le code natif (Swift/Kotlin)

' Avantages :
' • Modules natifs non limités
' • Taille d'app optimisée
' • Contrôle du build (Gradle, Xcode)

' Inconvénients :
' • Configuration complexe
' • Nécessite Xcode (Mac) et Android Studio
' • Beaucoup de configuration manuelle
' • Plus difficile pour les débutants
``'

```bash
# Créer un projet RN CLI
npx @react-native-community/cli init mon-app

# Lancer (nécessite un émulateur ou appareil)
npx react-native run-ios    # Sur Mac
npx react-native run-android
``'

---

## 3. Comparaison détaillée ⚖️

text
' Expo est RECOMMANDÉ pour :
' ✅ Les débutants en React Native
' ✅ Les prototypes et MVPs
' ✅ La plupart des apps commerciales
' ✅ Ceux qui n'ont pas de Mac

' Expo est DÉCONSEILLÉ quand :
' ❌ Besoin d'un module natif non supporté
' ❌ App très spécifique (ex: VPN, Bluetooth)
' ❌ Optimisation extrême de la taille
``'

---

## 5. Comment "ejecter" d'Expo ? 🏃

```bash
# Ejecter = passer d'Expo à React Native CLI
# On appelle ça "prebuild" maintenant

npx expo prebuild

# Cela génère les dossiers ios/ et android/
# On peut alors modifier le code natif !

# Alternative : un module natif personnalisé
npx create-expo-module mon-module
``'

```text
' Quand faut-il ejecter ?
' 1. Quand tu as BESOIN d'un module natif non supporté
' 2. Quand Expo bloque une fonctionnalité critique
' 3. Jamais si Expo suffit à tes besoins !

' Conseil : commence TOUJOURS avec Expo
' Si tu as besoin d'ejecter plus tard, c'est possible !
``'

---

## 6. EAS Build — la compilation dans le cloud ☁️

```bash
# Installer EAS CLI
npm install -g eas-cli

# Se connecter
eas login

# Configurer
eas build:configure

# Compiler pour iOS
eas build --platform ios

# Compiler pour Android
eas build --platform android

# Compiler pour les deux
eas build --platform all

# Voir le statut
eas build:list
``'

> **EAS Build** = le service de build cloud d'Expo. Tu push ton code, Expo le compile sur ses serveurs et te renvoie le fichier .ipa ou .aab. Pas besoin de Mac !

---

## Exercices pour toi 🎯

1. **Expo Go** : crée un projet Expo vide, lance-le avec `npx expo start` et scanne le QR code avec ton téléphone
2. **Comparaison** : liste 3 apps connues qui utilisent Expo et 3 qui utilisent CLI bare (recherche en ligne)
3. **Prebuild** : crée un projet Expo, fais `npx expo prebuild` et observe les dossiers ios/ et android/ générés

Création des variables pas à pas

Prêt à explorer la mémoire

Appuie sur Play pour voir les variables se créer une par une

0/5

Visualisation d'exécution

ligne 9
code
1// 1. Créer le projet
2// npx create-expo-app MonApp
3// cd MonApp && npx expo start
4
5// 2. Installer des modules
6// npx expo install expo-camera expo-location
7
8// 3. Utiliser dans le code
9import { CameraView } from 'expo-camera';
10import * as Location from 'expo-location';
11
12export default function App() {
13 const [permission, requestPermission] = Camera.useCameraPermissions();
14
15 return (
16 <CameraView style={{ flex: 1 }}>
17 {/* Contenu de l'app */}
18 </CameraView>
19 );
20}
21
22// 4. Build pour le store
23// eas build --platform all
24// eas submit --platform all
Variables
Expo=SDK tout-en-un
build=eas build --platform all
OTA=eas update --branch production

🚀 Workflow Expo

Crée le projet