📍 Article principal du parcours : React Native et Expo : créer une application mobile en 2026
Ce tutoriel ouvre la série React Native. Pour la vue d’ensemble et l’ordre des leçons, lisez d’abord le guide principal.

Démarrer du bon pied

Vous voulez écrire une vraie application Android et iOS sans jongler avec deux langages et deux IDE. C’est exactement ce que permet React Native : un seul code TypeScript qui tourne sur les deux plateformes. Mais avant d’aligner le premier composant, il faut un environnement qui démarre vite, se recharge à chaud et ne vous oblige pas à installer Android Studio ni Xcode dès le premier jour. Expo répond précisément à ce besoin : c’est la chaîne d’outils qui transforme React Native en expérience de développement fluide.

Dans cette leçon, vous installez la chaîne complète et vous lancez l’application qui servira de fil rouge à tout le parcours : StockPoche, un gestionnaire d’inventaire de poche pour une quincaillerie — lister des articles, les retrouver, les modifier, prendre une photo d’un produit, travailler hors connexion. À la fin, l’app tournera sur votre propre téléphone, et la moindre modification de code apparaîtra à l’écran en moins d’une seconde.

🎯 Ce que vous allez apprendre

Installer Node.js et l’interface en ligne de commande nécessaire à un projet Expo.
Générer un projet React Native moderne avec create-expo-app et comprendre chaque dossier qu’il produit.
Lancer le serveur de développement et afficher l’app sur un téléphone physique via Expo Go.
Modifier l’écran d’accueil et observer le rechargement à chaud (Fast Refresh).
Configurer l’identité de l’app (nom, icône, schéma) dans app.json.

🛠️ Ce que vous allez construire

À l’issue de cette étape, vous aurez un projet StockPoche vide mais fonctionnel : un écran d’accueil personnalisé affichant le titre de l’application, lancé en mode développement sur votre téléphone. C’est la fondation sur laquelle les leçons suivantes ajouteront la liste des produits, la navigation et l’accès à la caméra.

Prérequis

Un ordinateur sous Windows, macOS ou Linux. Aucune carte graphique particulière n’est requise.
Node.js en version LTS active (au moment d’écrire, Node 20 ou 22). Les versions antérieures à Node 20 ne sont plus supportées par l’outillage Expo récent.
Un smartphone Android ou iPhone avec l’application Expo Go installée depuis sa boutique, et connecté au même réseau Wi-Fi que l’ordinateur.
Niveau : intermédiaire. Test express — si vous savez créer une fonction JavaScript et lire du JSX (le HTML-dans-le-JS de React), vous êtes prêt. Sinon, révisez d’abord les bases de JavaScript moderne.
⏱️ Temps estimé : ~30 minutes.

Étape 1 — Vérifier et installer Node.js

Tout l’écosystème React Native repose sur Node.js : c’est lui qui exécute le serveur de développement, le gestionnaire de paquets et les outils de compilation JavaScript. Avant d’installer quoi que ce soit, vérifiez ce qui est déjà présent sur votre machine. Ouvrez un terminal et demandez la version.

# Affiche la version de Node installée (vide si absent)
node --version
# Affiche la version de npm, livré avec Node
npm --version

Si node --version renvoie un numéro commençant par v20 ou v22, vous êtes bon. Si la commande est introuvable ou affiche une version inférieure à 20, installez la dernière LTS depuis nodejs.org. Sur Windows, l’installateur ajoute Node au PATH automatiquement ; rouvrez le terminal après l’installation pour que le changement prenne effet.

✅ Point d’étape — node --version doit afficher v20.x ou v22.x. Si vous voyez encore une ancienne version après installation, c’est que l’ancien Node est prioritaire dans le PATH : désinstallez-le ou utilisez un gestionnaire de versions comme nvm.

Étape 2 — Créer le projet StockPoche

Plutôt que d’assembler à la main les dizaines de fichiers de configuration d’un projet React Native, on utilise l’outil officiel create-expo-app. Il génère un projet prêt à l’emploi, déjà configuré en TypeScript et avec la navigation par fichiers (que l’on détaillera dans la leçon sur la navigation). Lancez-le dans le dossier où vous rangez vos projets.

# Crée un nouveau projet nommé StockPoche
npx create-expo-app@latest StockPoche

# Pendant la période de transition vers le SDK 56, pour forcer
# explicitement cette version, ajoutez le drapeau de template :
# npx create-expo-app@latest StockPoche --template default@sdk-56

La commande télécharge le modèle, installe les dépendances (cela peut prendre quelques minutes selon la connexion) puis affiche un message de réussite. Le drapeau --template default@sdk-56 est utile tant que le SDK 56 cohabite avec le SDK 55 : sans lui, l’outil peut encore créer un projet sur la version précédente. Une fois la commande terminée, entrez dans le dossier créé.

cd StockPoche

✅ Point d’étape — Le dossier StockPoche/ existe et contient un fichier package.json. Si l’installation échoue sur une erreur réseau, relancez simplement la commande : npm reprend le téléchargement là où il s’était arrêté.

Étape 3 — Comprendre la structure du projet

Un projet Expo moderne ne ressemble pas à une application web classique : il n’y a pas de fichier index.html. La structure tourne autour du dossier app/, où chaque fichier devient automatiquement un écran. Prenez deux minutes pour ouvrir le projet dans votre éditeur et repérer les pièces maîtresses.

StockPoche/
├── app/                 # Les écrans : chaque fichier = une route
│   ├── _layout.tsx      # Le squelette commun à tous les écrans
│   └── (tabs)/          # Le groupe d'onglets du modèle par défaut
├── assets/              # Images, polices, icônes
├── components/          # Composants réutilisables
├── app.json             # Configuration de l'app (nom, icône, version)
├── package.json         # Dépendances et scripts npm
└── tsconfig.json        # Configuration TypeScript

Le dossier app/ est le cœur : le fichier _layout.tsx définit ce qui entoure tous les écrans (en-tête, thème, navigateur), tandis que les autres fichiers sont les écrans eux-mêmes. Le fichier app.json contient l’identité de l’application — son nom affiché, son icône, son numéro de version. On y reviendra à l’étape 6. Pour l’instant, retenez surtout que vous travaillerez à 90 % dans app/ et components/.

Étape 4 — Lancer le serveur de développement

Le serveur de développement compile votre code à la volée et l’envoie à votre téléphone. C’est lui qui rend le développement mobile aussi confortable que le web. Lancez-le avec le script fourni dans le projet.

npx expo start

Au bout de quelques secondes, un QR code s’affiche dans le terminal, accompagné d’une URL locale. Le terminal devient interactif : appuyer sur a tente d’ouvrir un émulateur Android, i un simulateur iOS, w le navigateur web, et r recharge l’application. Laissez ce terminal ouvert pendant toute la session de travail — c’est lui qui sert votre code.

✅ Point d’étape — Le terminal affiche un QR code et la ligne « Metro waiting on … ». Metro est le compilateur (bundler) qui transforme votre TypeScript en code exécutable. S’il reste bloqué, vérifiez qu’aucun pare-feu ne bloque le port et que rien d’autre n’occupe déjà le port 8081.

Étape 5 — Afficher l’app sur votre téléphone

Avec Expo Go, vous n’avez pas besoin de compiler une application native pour la tester : Expo Go est une coquille qui charge votre code à distance. Ouvrez l’application Expo Go sur le téléphone, puis scannez le QR code affiché dans le terminal — directement avec l’appareil photo sur iPhone, ou depuis l’onglet de scan d’Expo Go sur Android.

Après quelques secondes de chargement (« Building JavaScript bundle… »), l’écran d’accueil du modèle par défaut apparaît sur votre téléphone. Vous tenez littéralement votre application dans la main, servie par votre ordinateur. Si le téléphone ne se connecte pas, c’est presque toujours une histoire de réseau : assurez-vous que l’ordinateur et le téléphone sont sur le même Wi-Fi, et que ce réseau n’isole pas les appareils entre eux.

✅ Point d’étape — L’écran de démarrage Expo s’affiche sur votre téléphone. Si vous obtenez « Something went wrong », relancez npx expo start --tunnel : le mode tunnel passe par les serveurs d’Expo et contourne les réseaux Wi-Fi restrictifs (utile sur un partage de connexion mobile).

Étape 6 — Personnaliser l’écran d’accueil et l’identité de l’app

Place à la première modification visible. Le modèle par défaut place du contenu d’exemple dans app/(tabs)/index.tsx. Remplacez-en le contenu pour afficher le nom de notre projet. Ne vous souciez pas encore du style ni des composants en détail — la prochaine leçon y est entièrement consacrée ; ici, l’objectif est de voir le rechargement à chaud à l’œuvre.

// app/(tabs)/index.tsx
import { Text, View } from 'react-native';

export default function Accueil() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24, fontWeight: 'bold' }}>StockPoche</Text>
      <Text>Votre inventaire, dans la poche.</Text>
    </View>
  );
}

Dès que vous enregistrez le fichier, l’écran du téléphone se met à jour sans recharger l’application entière : c’est le Fast Refresh. Le titre « StockPoche » apparaît, centré. Cette boucle modification → enregistrement → résultat instantané est ce qui rend le développement React Native si productif.

Reste à donner une identité à l’application. Ouvrez app.json et ajustez les champs de premier niveau. Ce fichier est lu au démarrage et lors de la construction des binaires.

{
  "expo": {
    "name": "StockPoche",
    "slug": "stockpoche",
    "version": "1.0.0",
    "orientation": "portrait",
    "scheme": "stockpoche"
  }
}

Le champ name est le nom affiché sous l’icône, slug identifie le projet côté Expo, et scheme définit le lien profond (stockpoche://) qui servira plus tard à ouvrir l’app depuis une URL. Inutile d’activer la Nouvelle Architecture de React Native à la main : depuis le SDK 55, c’est le seul mode disponible (l’ancien pont a été retiré), et un éventuel champ newArchEnabled est désormais ignoré — la documentation recommande de ne plus l’inclure.

✅ Point d’étape — Le téléphone affiche « StockPoche » et le sous-titre. Si le Fast Refresh ne déclenche pas, secouez le téléphone pour ouvrir le menu développeur et choisissez « Reload ».

Étape 7 — Vérification finale

Pour confirmer que toute la chaîne fonctionne de bout en bout, faites un test simple : modifiez le sous-titre, enregistrez, et vérifiez que le changement apparaît sur le téléphone en moins d’une seconde. Puis, dans le terminal du serveur, appuyez sur r pour forcer un rechargement complet — l’app doit se relancer proprement et réafficher votre écran. Si ces deux gestes marchent, votre environnement est sain et vous êtes prêt pour la suite.

🐞 Pièges fréquents

Symptôme / erreur	Cause probable	Correctif
`command not found: npx`	Node.js absent ou PATH non rafraîchi	Installer Node LTS, rouvrir le terminal
Le téléphone ne se connecte pas au serveur	Appareils sur des réseaux différents, ou Wi-Fi qui isole les clients	Même Wi-Fi, ou `npx expo start --tunnel`
« Unable to resolve module »	Dépendance manquante ou cache Metro corrompu	`npx expo start --clear` pour vider le cache
Le projet est créé en SDK 55 au lieu de 56	Période de transition des templates	Recréer avec `--template default@sdk-56`
Port 8081 déjà utilisé	Un autre serveur Metro tourne déjà	Fermer l’autre, ou accepter le port alternatif proposé

🌍 Réalités du terrain

Le développement mobile a une contrainte que le web n’a pas : l’appareil de test. Tester sur un téléphone physique d’entrée de gamme, plutôt que sur un émulateur puissant, est la meilleure façon de mesurer la fluidité réelle de votre app pour vos utilisateurs. Expo Go rend cela gratuit et immédiat : aucun câble, aucune compilation native, juste le QR code.

Sur une connexion facturée au volume, surveillez la consommation lors des premiers chargements : le bundle JavaScript de développement transite par le réseau à chaque démarrage. Le mode tunnel est pratique mais plus gourmand ; privilégiez le Wi-Fi local quand il est disponible, et réservez le tunnel aux situations où le réseau bloque les connexions directes. Enfin, le rechargement à chaud économise énormément de bande passante par rapport à un rebuild complet — c’est un atout concret quand la donnée coûte cher.

✅ Récapitulatif

Vous venez de monter un environnement React Native complet et de lancer StockPoche sur un vrai téléphone. Concrètement : Node.js LTS est installé, create-expo-app a généré un projet TypeScript structuré autour du dossier app/, le serveur Metro sert le code, Expo Go l’affiche sur l’appareil, et le Fast Refresh rend chaque modification instantanée. Vous avez aussi posé l’identité de l’app dans app.json. La fondation est prête.

🧾 Aide-mémoire

Commande / élément	Rôle
`npx create-expo-app@latest NomProjet`	Créer un nouveau projet
`npx expo start`	Démarrer le serveur de développement
`npx expo start --clear`	Démarrer en vidant le cache Metro
`npx expo start --tunnel`	Démarrer en mode tunnel (réseaux restrictifs)
Touche `r` dans le terminal	Recharger l’application
`app/`	Dossier des écrans (routes par fichiers)
`app.json`	Identité et configuration de l’app

💪 À vous de jouer

Changez le nom affiché de l’application pour qu’il apparaisse différemment sous l’icône, puis ajoutez une troisième ligne de texte sous le sous-titre indiquant la version (par exemple « v1.0 »).

Voir une solution

Dans app.json, modifiez "name": "StockPoche Pro". Dans app/(tabs)/index.tsx, ajoutez une ligne après le sous-titre :

<Text style={{ color: 'gray', marginTop: 8 }}>v1.0</Text>

Enregistrez : la nouvelle ligne apparaît immédiatement grâce au Fast Refresh. Le changement de name, lui, ne sera visible sous l’icône qu’après une reconstruction native — normal, c’est une donnée de build.

Tutoriels frères

Composants et style en React Native — construire la liste des produits de StockPoche.
Navigation avec Expo Router — passer de la liste à la fiche produit.

Pour aller plus loin

🔝 Retour au guide principal : React Native et Expo : créer une application mobile en 2026
Documentation officielle : Créer un projet Expo
Pour situer React Native parmi les autres options : Développement mobile 2026 : Flutter, React Native, Expo

FAQ

Q : Ai-je besoin d’un Mac pour développer une app iOS avec Expo ?
R : Non, pas pour développer et tester. Avec Expo Go, vous écrivez et testez votre app iOS depuis Windows ou Linux. Un Mac (ou le service de build cloud d’Expo) ne devient nécessaire que pour produire le binaire final destiné à l’App Store — sujet traité dans la leçon sur le build et la publication.

Q : Quelle différence entre Expo Go et un build de développement ?
R : Expo Go est une app toute faite qui charge votre code ; elle suffit tant que vous n’utilisez que des modules inclus dans le SDK Expo. Dès que vous ajoutez une bibliothèque native non incluse, il faut un « development build » (un Expo Go personnalisé), que l’on verra plus loin dans le parcours.

Q : Dois-je vraiment activer la Nouvelle Architecture ?
R : Elle est activée d’office : c’est le seul mode disponible depuis le SDK 55 (l’ancien pont a été retiré). Vous n’avez rien à configurer ; un ancien champ newArchEnabled serait simplement ignoré.

Q : create-expo-app crée du TypeScript ou du JavaScript ?
R : Du TypeScript par défaut, avec un tsconfig.json déjà configuré. Vous pouvez écrire du JavaScript dans les fichiers .tsx si vous débutez, mais le typage vous fera gagner du temps dès que l’app grandit.