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 9code
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