Installer Node, Expo CLI et les simulateurs
Configurez Node.js et Expo CLI, puis configurez le simulateur iOS ou l’émulateur Android afin de pouvoir exécuter localement des applications React Native.
Installer Node, Expo CLI et les simulateurs est une leçon React Native Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Native Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Native Academy comprend 4 leçons au total.
Pourquoi Node.js est essentiel pour React Native
React Native fonctionne sur Node.js — il alimente le bundler Metro qui transforme votre JSX en application. Installez la version LTS pour plus de stabilité, idéalement via le gestionnaire de versions nvm.
# Install nvm (Node Version Manager)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# Then install the latest LTS Node
nvm install --lts
nvm use --lts
# Verify installation
node --version # e.g. v20.12.0
npm --version # e.g. 10.5.0Installation de l'Expo CLI
L'Expo CLI vous permet de créer, d'exécuter et de compiler des applications sans toucher au code natif. Associez-la à l'application Expo Go pour scanner un code QR et voir votre application instantanément sur un téléphone réel.
# Install Expo CLI globally
npm install -g expo-cli
# Verify the installation
expo --version
# Alternatively, use npx (no global install needed)
npx create-expo-app --versionConfiguration du simulateur iOS sur macOS
Pour le simulateur iOS, vous avez besoin d'un Mac avec Xcode installé. Ouvrez Xcode une fois pour accepter sa licence, puis ajoutez les outils en ligne de commande. Expo peut lancer un simulateur en une seule pression de touche.
# Install Xcode Command Line Tools
xcode-select --install
# Open a simulator from the terminal
open -a Simulator
# List available simulator devices
xcrun simctl list devicesConfiguration de l'émulateur Android
Pour Android, il vous faut Android Studio. Installez le SDK et l'émulateur, créez un appareil Pixel virtuel, et définissez la variable ANDROID_HOME pour qu'Expo puisse tout trouver. Voir le code.
# Add to ~/.zshrc or ~/.bashrc
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
# Reload shell config
source ~/.zshrc
# Verify adb is found
adb --versionComprendre Metro Bundler
Démarrer un projet lance Metro, le bundler qui surveille vos fichiers et les recharge instantanément avec Fast Refresh. Si les choses deviennent obsolètes, videz son cache avec le flag --clear.
# Start Metro and clear cache
npx expo start --clear
# Metro outputs a QR code and key shortcuts:
# i → open iOS Simulator
# a → open Android Emulator
# r → reload the app
# m → toggle the developer menuJDK pour Android
Les builds Android nécessitent un Java Development Kit — Expo recommande JDK 17. Installez-le, puis exécutez java --version pour confirmer qu'il est dans votre PATH. Le code l'installe via Homebrew.
# Install JDK 17 via Homebrew (macOS)
brew install --cask temurin@17
# Verify Java version
java --version
# Expected: openjdk 17.x.x
# On Windows: download installer from
# https://adoptium.net/temurin/releases/Vérifier votre configuration complète
Une fois tout installé, exécutez npx expo-env-info (ou react-native doctor) pour analyser votre configuration. Il signale tout ce qui manque, alors corrigez ces problèmes avant votre premier projet.
# Check your environment with Expo
npx expo-env-info
# Or use the React Native community CLI doctor
npx react-native doctor
# Install Watchman for better file watching (macOS)
brew install watchmanWatchman : surveillance de fichiers rapide
Watchman est un observateur de fichiers de Facebook qui permet à Metro de détecter les changements beaucoup plus rapidement, surtout sur macOS. Installez-le via Homebrew avant de commencer à développer.
# Install Watchman on macOS
brew install watchman
# Verify installation
watchman version
# If Metro has stale Watchman state, reset it
watchman watch-del-allVariables d'environnement et PATH
De nombreux maux de tête de configuration se résument à une entrée PATH manquante — votre shell ne peut pas trouver adb ou l'émulateur. Ajoutez les chemins à ~/.zshrc, puis rechargez-le. Le code montre exactement quoi.
# Example ~/.zshrc additions for React Native
export JAVA_HOME=$(/usr/libexec/java_home -v 17)
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
# Apply changes
source ~/.zshrcApp Expo Go sur un appareil réel
Le moyen le plus rapide de tester sur un vrai téléphone est l'application Expo Go. Exécutez expo start, puis scannez le code QR, et votre application se chargera via Wi-Fi. Parfait pour un développement rapide. 📱
# Start Expo development server
npx expo start
# Expo prints a QR code in the terminal.
# Scan it with:
# iOS: Camera app → tap the banner
# Android: Expo Go app → Scan QR Code
# Or press 's' to switch to Expo Go mode
# if using a dev build by defaultDépannage des problèmes courants
La plupart des problèmes de configuration sont prévisibles : un port 8081 occupé, un cache Metro obsolète, la mauvaise version de Node, ou une variable ANDROID_HOME manquante. Et lisez toujours attentivement l'écran d'erreur rouge.
# Common fixes
# Clear Metro cache
npx expo start --clear
# Kill process on port 8081
lsof -ti:8081 | xargs kill -9
# Check connected Android devices
adb devices
# Restart adb server if devices not showing
adb kill-server
adb start-serverVérification rapide
Testez votre compréhension des concepts de développement mobile React Native de cette leçon.
Récapitulatif de la leçon
Vous avez construit votre chaîne d'outils : Node et nvm exécutent le JavaScript, Expo CLI génère le squelette et sert votre application, et Watchman ainsi que les SDK alimentent les simulateurs. Prochaine étape : votre premier projet ! 🎉
Questions Fréquemment Posées
La leçon « Installer Node, Expo CLI et les simulateurs » est-elle gratuite ?
Oui — le texte complet de « Installer Node, Expo CLI et les simulateurs » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Native Academy, passe à CoddyKit PRO. Le cours React Native Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Installer Node, Expo CLI et les simulateurs » ?
Configurez Node.js et Expo CLI, puis configurez le simulateur iOS ou l’émulateur Android afin de pouvoir exécuter localement des applications React Native. Tu pratiques React Native Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Native Academy ?
Aucune expérience préalable n'est requise. React Native Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Installer Node, Expo CLI et les simulateurs » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Native Academy ?
Oui. Chaque leçon React Native Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Installer Node, Expo CLI et les simulateurs
- Créer votre premier projet Expo
- Exécuter l’application sur un appareil et un émulateur
- Comprendre la structure d’un projet