Découvrir Expo et créer le projet
Installer les outils, créer le projet
quiz-cyber-expoet le lancer dans le navigateur et sur un téléphone.
Objectifs de la séance
- vérifier que Node.js et npm sont installés dans une version compatible ;
- créer le projet quiz-cyber-expo avec
create-expo-app; - lancer l'application dans le navigateur et sur un téléphone avec Expo Go ;
- repartir d'un projet vide avec
npm run reset-project; - comprendre ce que sont React Native et Expo.
TP pour réfléchir et résoudre des problèmes
Dans cette série, vous construisez une application de quiz sur la cybersécurité : le joueur choisit un thème, un niveau et un nombre de questions, et l'application génère un quiz. Aujourd'hui, première étape : créer le projet et le faire tourner. Les explications détaillées arrivent juste après, dans la partie Notions théoriques.
Étape 1 — Vérifier Node.js et npm
Expo est un ensemble d'outils écrits en JavaScript : ils s'exécutent avec Node.js et s'installent avec npm (le gestionnaire de paquets de Node.js).
Ouvrez un terminal (dans VS Code : menu Terminal > Nouveau terminal) et tapez :
node -v
npm -v
La version de Node.js doit être 22.13 ou plus récente (sur la ligne 22), 24.3 ou plus récente (sur la ligne 24), ou 26 et plus. Les versions impaires (23, 25...) ne sont pas prises en charge par Expo.
Beaucoup d'erreurs mystérieuses (« command not found », dépendances qui refusent de s'installer...)
viennent d'une version de Node.js trop ancienne. Vérifier node -v est toujours le premier réflexe.
Étape 2 — Créer le projet
Placez-vous dans le dossier où vous rangez vos projets (par exemple Documents), puis créez le
projet mon-app-expo :
cd ~/Documents
npx create-expo-app mon-app-expo
npxtélécharge et exécute l'outilcreate-expo-appsans l'installer définitivement ;mon-app-expoest le nom du dossier du projet ;
Cette commande vous demande les options que vous souhaitez utilisées. Nous choisirons le template par défaut.
? Select an Expo SDK version:
❯ Latest (SDK 58) - Recommended for most projects
L'installation dure une à deux minutes :
npmtélécharge toutes les dépendances dans le dossiernode_modules.
Il est possible de préciser les options choisies en une seule comande :
npx create-expo-app@latest quiz-cyber-expo --template default@sdk-58
Préciser default@sdk-58 garantit que tous les étudiants (et l'enseignant) obtiennent exactement
le même projet de départ, même si une nouvelle version d'Expo sort pendant l'année.
Étape 3 — Lancer l'application
Depuis le dossier du projet, démarrez le serveur de développement :
cd quiz-cyber-expo
npx expo start
Le terminal affiche un QR code et une liste de raccourcis clavier.
- Appuyez sur la touche
w: l'application s'ouvre dans votre navigateur (version Web). - Sur votre téléphone, installez l'application Expo Go (Play Store ou App Store), puis scannez le QR code (avec l'appareil photo sur iPhone, avec Expo Go sur Android). L'ordinateur et le téléphone doivent être connectés au même réseau Wi-Fi.
Expo Go ne fait fonctionner qu'une seule version du SDK Expo à la fois. Si Expo Go affiche un
message d'incompatibilité (« Project is incompatible with this version of Expo Go »), mettez à jour
Expo Go depuis le store. En attendant, travaillez avec la version Web (touche w) : tout le
code de cette série fonctionne à l'identique dans le navigateur.
Laissez le terminal du serveur ouvert à côté de votre code : c'est là qu'apparaissent les erreurs
de compilation et les messages console.log() de l'application.
Étape 4 — Repartir d'un projet vide
Le modèle par défaut contient des écrans d'exemple (onglets, logo animé...). Ils sont utiles pour
découvrir Expo, mais nous allons construire notre propre application. Arrêtez le serveur
(Ctrl + C), puis lancez le script de remise à zéro fourni par le modèle :
npm run reset-project
À la question « Do you want to move existing files to /example instead of deleting them? »,
répondez n (non) : les fichiers d'exemple sont supprimés.
Ouvrez ensuite le fichier package.json et supprimez la ligne devenue inutile
"reset-project": "node ./scripts/reset-project.js", dans la partie "scripts" (le script
lui-même a été supprimé). Relancez enfin npx expo start puis w : l'écran est maintenant vide.
Un projet propre est plus facile à comprendre et à reprendre : un script qui pointe vers un fichier supprimé provoquerait une erreur si quelqu'un tentait de l'exécuter.
📌 Une solution
Notions théoriques
React Native : une application mobile écrite en JavaScript
Une application mobile « classique » s'écrit en Kotlin (Android) et en Swift (iOS) : deux langages, deux projets, deux équipes. React Native, créé par Meta, permet d'écrire une seule application en JavaScript (ou TypeScript) qui fonctionne sur Android et sur iOS.
Contrairement à un site Web affiché dans un navigateur, React Native affiche de vrais composants
natifs du téléphone : un <Text> React Native devient un vrai texte Android ou iOS.
| Sur le Web (HTML) | Avec React Native |
|---|---|
<div> | <View> |
<p>, <span> | <Text> |
<button> | <Pressable> |
<img> | <Image> |
<input> | <TextInput> |
| fichier CSS | objet StyleSheet en JavaScript |
Expo : la boîte à outils de React Native
Expo est le framework recommandé par l'équipe de React Native. Il apporte :
- create-expo-app : la création d'un projet prêt à l'emploi ;
- le SDK Expo : des modules prêts à l'emploi (images, vibrations, stockage, appareil photo...) ;
- Expo Router : la navigation entre écrans à partir des fichiers ;
- Expo Go : une application mobile pour tester son code sans rien compiler ;
- EAS (Expo Application Services) : la compilation et la mise en ligne des applications.
Le SDK porte un numéro de version (ici 58). Chaque version du SDK va avec une version précise
de React Native et de React : c'est pourquoi on installe toujours les modules Expo avec
npx expo install (vu plus loin dans la série), qui choisit automatiquement la bonne version.
Trois façons de lancer l'application
| Mode | Comment | Pour qui |
|---|---|---|
| Web | touche w | tester vite, sans téléphone |
| Expo Go | QR code scanné avec le téléphone | tester sur un vrai téléphone, sans compilation |
| Build de développement / de production | compilation avec EAS (tutoriel 10) | publier l'application, ou utiliser des modules natifs absents d'Expo Go |
Pendant npx expo start, un programme appelé Metro (le bundler) assemble tous vos fichiers
JavaScript en un seul paquet et l'envoie au navigateur ou au téléphone. À chaque enregistrement
d'un fichier, la modification apparaît en une seconde : c'est le Fast Refresh.
Le modèle de projet et reset-project
Le modèle default crée un projet complet : TypeScript, Expo Router, des écrans d'exemple et le
script reset-project. Une fois ce script exécuté, il reste l'essentiel :
quiz-cyber-expo/
├── src/
│ └── app/
│ ├── _layout.tsx ← la mise en page commune à tous les écrans
│ └── index.tsx ← le premier écran (l'accueil)
├── assets/ ← images, icône, écran de démarrage
├── app.json ← la configuration de l'application
├── package.json ← les dépendances et les scripts npm
└── tsconfig.json ← la configuration de TypeScript
Chaque fichier de ce projet sera détaillé dans la séance suivante.
Le dossier node_modules contient le code des bibliothèques téléchargées par npm. Il est
recréé à l'identique par npm install : on ne le modifie jamais, et on ne l'envoie jamais sur GitHub.
Test de mémorisation/compréhension
Exercices complémentaires
Exercice A : les raccourcis de Metro
Serveur lancé, appuyez sur ? dans le terminal. Notez trois raccourcis qui n'ont pas été présentés
dans cette séance et testez-les.
Exercice B : le Fast Refresh
Ouvrez src/app/index.tsx, remplacez le texte Edit src/app/index.tsx to edit this screen. par
Bienvenue !, enregistrez et observez le navigateur (et le téléphone) : la modification apparaît
sans recharger la page. Remettez ensuite le texte d'origine.
Ce qu'il faut retenir
| Notion | Résumé |
|---|---|
| React Native | Écrire une application mobile Android et iOS en JavaScript, avec de vrais composants natifs. |
| Expo | Framework qui simplifie React Native : création de projet, SDK, navigation, Expo Go, EAS. |
npx create-expo-app | Crée un nouveau projet Expo à partir d'un modèle (--template default@sdk-58). |
npx expo start | Démarre le serveur de développement (Metro) ; w ouvre la version Web. |
| Expo Go | Application mobile qui exécute le projet en scannant un QR code. |
npm run reset-project | Supprime les écrans d'exemple du modèle pour repartir d'un projet vide. |
Aperçu de la prochaine séance
Votre projet tourne, mais il n'affiche qu'une phrase en anglais. Dans la prochaine séance, vous
allez explorer chaque fichier du projet (app.json, package.json, _layout.tsx, index.tsx...)
et transformer cet écran vide en véritable écran d'accueil du Quiz Cyber.