Sommaire
- React Native, le pari d’un seul code
- Ce que ce parcours vous permettra de faire
- Le parcours d’apprentissage, leçon par leçon
- Pourquoi React Native en 2026 ?
- Les concepts fondamentaux
- Vue d’ensemble pratique : de l’idée au store
- Les tutoriels du parcours
- Réalités du terrain
- Erreurs fréquentes à éviter
- FAQ
React Native, le pari d’un seul code
Construire une application mobile, c’est traditionnellement faire un choix coûteux : développer deux fois la même chose, une fois en Swift pour iOS, une fois en Kotlin pour Android. Deux langages, deux équipes, deux bases de code à maintenir en parallèle. React Native renverse cette logique : vous écrivez une seule application en TypeScript, et elle s’exécute nativement sur les deux plateformes. Pas une page web emballée dans une coquille — de vrais composants natifs, pilotés par du JavaScript.
Ce parcours vous emmène de l’installation de l’environnement jusqu’à la publication sur les stores, en construisant une application réelle de bout en bout. Chaque leçon ajoute une brique concrète à un projet fil rouge : StockPoche, un gestionnaire d’inventaire de poche pour une quincaillerie. Lister des articles, les chercher, ouvrir leur fiche, photographier un produit, travailler hors connexion, puis livrer l’app à un commerçant — vous traverserez toutes les étapes d’un vrai cycle de développement mobile.
Ce hub est la carte du parcours : il explique le quoi et le pourquoi de React Native et de son écosystème Expo, puis vous oriente vers les tutoriels qui détaillent le comment, dans l’ordre. Que vous veniez du développement web React ou que vous découvriez le mobile, vous trouverez ici le fil conducteur.
🎯 Ce que ce parcours vous permettra de faire
- Mettre en place un environnement React Native moderne avec Expo et lancer une app sur votre propre téléphone.
- Construire des interfaces mobiles soignées et performantes avec les composants natifs et Flexbox.
- Organiser une application multi-écrans avec une navigation par fichiers (Expo Router).
- Gérer l’état local et consommer une API REST avec un cache robuste.
- Exploiter le matériel : caméra, permissions, stockage hors connexion.
- Compiler et publier votre application sur les stores, puis la corriger à distance.
🗺️ Le parcours d’apprentissage, leçon par leçon
Les six tutoriels se suivent dans un ordre pensé pour construire StockPoche progressivement. Chacun s’appuie sur le précédent ; pris ensemble, ils forment un cours complet.
- Mise en place — installer Expo et lancer le projet sur un téléphone : Démarrer un projet React Native avec Expo.
- L’interface — composants, style et liste de produits : Composants et style en React Native.
- La navigation — passer de la liste à la fiche et aux onglets : Navigation avec Expo Router.
- Les données — état local, Context et API REST : Gérer l’état et consommer une API.
- Le natif — caméra, permissions et hors connexion : Accès natif : caméra et stockage.
- La livraison — build cloud, stores et mises à jour : Build et publication avec EAS.
Si vous débutez, suivez cet ordre sans sauter d’étape. Si vous connaissez déjà React et cherchez un point précis — la navigation, l’accès caméra, le build — chaque tutoriel se tient aussi seul.
Pourquoi React Native en 2026 ?
React Native n’est plus le projet expérimental de ses débuts. C’est une plateforme mature qui propulse des applications utilisées par des centaines de millions de personnes, et son architecture a été entièrement repensée ces dernières années. Trois raisons en font un choix solide aujourd’hui.
Un seul code, deux plateformes. L’argument économique reste central : une équipe, une base de code, deux applications natives. Pour une petite structure ou un développeur indépendant, c’est la différence entre livrer une app mobile et y renoncer faute de moyens. Le code partagé dépasse souvent 90 % entre iOS et Android, les rares différences se gérant au cas par cas.
La Nouvelle Architecture. React Native a remplacé son ancien « pont » de communication par une architecture directe reposant sur quatre composantes techniques : l’interface JSI, les TurboModules, le moteur de rendu Fabric et la génération de code Codegen. Concrètement, la communication entre le JavaScript et le natif ne passe plus par une sérialisation coûteuse : les appels sont synchrones et directs. Cette Nouvelle Architecture est devenue le mode par défaut, puis le seul mode disponible — l’ancien pont a été retiré. Le gain se mesure au démarrage, au rendu et à la consommation mémoire.
L’écosystème Expo. C’est peut-être ce qui a le plus changé la donne. Expo transforme React Native d’un outil exigeant en une expérience fluide : démarrage en une commande, test instantané sur téléphone, accès aux fonctions natives sans écrire de code natif, et compilation dans le cloud. Au point qu’aujourd’hui, la documentation officielle de React Native recommande Expo comme point de départ. Tout ce parcours s’appuie sur cet écosystème.
Reste un arbitrage honnête : React Native partage le langage et les idées de React, ce qui en fait un choix naturel pour qui vient du web. D’autres approches, comme Flutter, ont leurs propres forces. Pour situer React Native dans le paysage mobile complet, voyez le panorama du développement mobile 2026 et le comparatif Flutter contre React Native.
Les concepts fondamentaux
Avant de plonger dans les tutoriels, posons le vocabulaire. Ces notions reviennent dans toutes les leçons ; les comprendre maintenant rend la suite beaucoup plus claire.
Composants natifs et JSX
En React Native, on décrit l’interface avec du JSX — la même syntaxe que React sur le web — mais les balises ne sont pas du HTML. À la place de div et span, on utilise View et Text, qui sont traduits en vues natives réelles : une UIView sur iOS, une android.view sur Android. C’est ce qui distingue React Native d’une application web emballée : l’utilisateur manipule de vrais éléments natifs, avec leurs performances et leur ressenti.
Le moteur JavaScript Hermes
Le code JavaScript de votre app est exécuté par Hermes, un moteur conçu par l’équipe React Native spécifiquement pour le mobile. Optimisé pour un démarrage rapide et une faible empreinte mémoire, il est devenu le moteur par défaut. Sa version récente accélère encore le lancement de l’application — un facteur clé sur des appareils modestes.
Expo et son SDK
Expo est à la fois un ensemble d’outils et une bibliothèque de modules. Le SDK Expo fournit des accès tout faits aux fonctions de l’appareil — caméra, localisation, notifications, stockage — sous forme d’API JavaScript propres. Au moment d’écrire ces lignes, la version courante est le SDK 56, qui embarque React Native 0.85 et React 19.2. Travailler avec une version de SDK donnée garantit que tous vos modules natifs sont compatibles entre eux.
Expo Go et les builds de développement
Pour tester pendant le développement, deux options. Expo Go est une application toute faite, installable depuis les stores, qui charge votre code à distance : idéale pour démarrer, tant que vous n’utilisez que des modules inclus dans le SDK. Dès que vous ajoutez une bibliothèque native non incluse, il faut un development build : une version de l’app compilée avec vos modules, qui remplace Expo Go pour votre projet. La leçon sur le build détaille ce passage.
Le routage par fichiers
Expo Router organise la navigation autour de l’arborescence de fichiers : chaque fichier du dossier app/ devient un écran, exactement comme les pages d’un site. Cette approche, héritée des frameworks web modernes, simplifie énormément la structure d’une application multi-écrans et offre les liens profonds gratuitement.
Du web au mobile : ce qui change vraiment
Beaucoup arrivent à React Native depuis React web. La bonne nouvelle, c’est que la logique — composants, props, état, hooks, JSX — est identique. La courbe d’apprentissage porte surtout sur ce qui diffère, et il vaut mieux le savoir d’emblée pour ne pas chercher midi à quatorze heures.
Pas de DOM, pas de CSS. Il n’y a ni div ni feuille de style. On compose avec View, Text, Image, et on stylise avec des objets JavaScript via StyleSheet. La plupart des propriétés ressemblent au CSS (en camelCase), mais certaines manquent et d’autres se comportent différemment — par exemple, la disposition par défaut est en colonne, pas en ligne. Le texte doit toujours vivre dans un composant Text, jamais en vrac dans une View.
Tout est tactile, pas cliquable. On ne pense plus en clics de souris mais en gestes : appui, appui long, glissement. Le composant Pressable remplace le onClick et expose l’état « pressé » pour donner un retour visuel immédiat, détail qui sépare une app vivante d’une app inerte.
Les contraintes physiques de l’appareil. Encoches, barres de statut, claviers qui recouvrent les champs, retour arrière matériel d’Android, permissions à demander, mode hors connexion : autant de réalités qui n’existent pas sur le web et que le mobile impose de gérer. Ce parcours les aborde au fil des leçons, dans l’ordre où elles se présentent naturellement quand on construit StockPoche.
Performance et cycle de vie : ce qu’il faut comprendre tôt
Une application mobile vit dans un environnement plus contraint qu’un navigateur de bureau : mémoire limitée, processeur modeste, batterie à préserver. Deux idées aident à écrire du code qui tient la route dès le départ.
Le rendu coûte cher. Chaque changement d’état provoque un nouveau rendu du composant concerné. Sur une liste de centaines d’éléments, un rendu naïf bloque le défilement. C’est pourquoi on privilégie FlatList et sa virtualisation, et qu’on évite de recréer des objets ou des fonctions à chaque rendu quand ils servent de dépendances — un sujet que la leçon sur l’état détaille avec useMemo et useCallback.
L’asynchrone est partout. Lire un fichier, prendre une photo, interroger une API, accéder au stockage : toutes ces opérations sont asynchrones et renvoient des promesses. On les attend avec await et on gère systématiquement le cas d’échec. Une app mobile qui ignore les erreurs réseau paraît cassée dès que la connexion vacille — ce qui, sur le terrain, arrive constamment. Adopter ce réflexe tôt évite de réécrire la moitié du code plus tard.
Vue d’ensemble pratique : de l’idée au store
Voici comment les pièces s’assemblent, dans l’ordre où vous les construirez. Chaque paragraphe correspond à une leçon et à une brique de StockPoche.
1. Poser les fondations
Tout commence par l’environnement. On installe Node.js et l’outil create-expo-app, qui génère un projet TypeScript structuré. On lance le serveur de développement, on affiche l’app sur un vrai téléphone via Expo Go, et on découvre le rechargement à chaud qui rend chaque modification instantanée. C’est le sujet de Démarrer un projet React Native avec Expo — la première brique, indispensable au reste.
2. Construire l’interface
Une fois le projet en place, on dessine l’écran principal : la liste des produits. On apprend les composants de base, le style avec StyleSheet et Flexbox, et surtout FlatList, qui affiche une longue liste sans faire ramer le téléphone grâce à la virtualisation. C’est dans Composants et style en React Native que StockPoche prend visage.
3. Relier les écrans
Une app utile a plusieurs écrans. Avec Expo Router, on passe de la liste à la fiche d’un produit, on organise l’app en onglets, et on crée des routes dynamiques pour afficher n’importe quel article par son identifiant. Navigation avec Expo Router montre comment, en s’appuyant uniquement sur l’arborescence de fichiers.
4. Donner vie aux données
Les écrans ont besoin de vraies données. On distingue l’état local (un filtre de recherche), l’état partagé entre écrans (le Context), et l’état serveur (les produits venus d’une API). Pour ce dernier, TanStack Query offre cache, gestion du chargement et des erreurs sans plomberie manuelle. Gérer l’état et consommer une API branche StockPoche sur le réseau.
5. Exploiter le matériel
Ce qui rend une app mobile spéciale, c’est l’accès au matériel. On demande les permissions correctement, on capture la photo d’un produit avec la caméra, et on persiste l’inventaire sur l’appareil pour qu’il reste consultable hors connexion. Accès natif : caméra et stockage ouvre StockPoche au monde physique.
6. Livrer l’application
Enfin, on transforme le projet en produit. EAS Build compile l’app dans le cloud — y compris pour iOS sans posséder de Mac — on la soumet aux stores, et on apprend à pousser un correctif en quelques minutes via les mises à jour à distance. Build et publication avec EAS conclut le parcours, de la compilation à la livraison.
Les tutoriels du parcours
Chaque tutoriel ci-dessous construit une brique de StockPoche. Suivez-les dans l’ordre pour un apprentissage progressif, ou piochez selon votre besoin.
- Démarrer un projet React Native avec Expo — installer la chaîne, lancer l’app sur un téléphone, comprendre la structure du projet.
- Composants et style en React Native — View, Text, Pressable, StyleSheet, Flexbox et la liste performante avec FlatList.
- Navigation avec Expo Router — routage par fichiers, Stack, onglets, Link, useRouter et routes dynamiques.
- Gérer l’état et consommer une API REST — useState, useReducer, Context, fetch et TanStack Query.
- Accès natif : caméra, permissions et stockage — expo-camera, permissions, AsyncStorage et expo-secure-store.
- Build et publication avec EAS — eas.json, builds cloud, soumission aux stores et mises à jour OTA.
Pour compléter ce parcours, deux ressources voisines : le guide CI/CD mobile pour automatiser les builds, et le panorama mobile 2026 pour replacer React Native dans l’ensemble des technologies disponibles.
Réalités du terrain
Développer pour le mobile impose des contraintes que le web ignore, et c’est précisément là que les bons choix techniques font la différence dans des contextes où le matériel et le réseau ne sont pas toujours haut de gamme.
Tester sur du matériel réel. Un émulateur tourne sur un ordinateur puissant et ment sur la fluidité réelle. Tester StockPoche sur un téléphone d’entrée de gamme — celui qu’utilisent réellement vos clients — révèle aussitôt les listes qui rament ou les images trop lourdes. Expo Go rend ce test gratuit et immédiat, sans câble ni compilation.
Penser hors connexion. Dans une réserve, un marché, une zone mal couverte, l’app doit rester utilisable sans données mobiles. Persister l’inventaire localement, puis synchroniser quand le réseau revient, n’est pas une option avancée : c’est ce qui sépare une démo d’un outil de travail. La leçon sur l’accès natif pose les bases de cette approche.
Économiser la donnée. Quand chaque mégaoctet est facturé, le poids compte. Compresser les photos à la capture, mettre en cache les requêtes réseau, servir des vignettes plutôt que des images pleine résolution : autant de gestes qui réduisent la facture data de vos utilisateurs et accélèrent l’app. TanStack Query et expo-image aident directement sur ce point.
Livrer sans store quand c’est pertinent. Pour un outil interne d’entreprise, distribuer un APK par lien via le profil de prévisualisation d’EAS évite les frais de compte développeur et les délais d’examen. Couplé aux mises à jour à distance, ce mode permet d’améliorer l’outil en continu sans réinstallation côté utilisateur.
Erreurs fréquentes à éviter
| Erreur | Cause | Solution |
|---|---|---|
| Installer une bibliothèque avec npm directement | Version native incompatible avec le SDK | Utiliser npx expo install qui aligne les versions |
| Suivre un tutoriel qui importe @react-navigation | Expo Router a forké la navigation en SDK 56 | Importer Stack/Tabs/Link depuis expo-router |
Afficher une longue liste avec .map() |
Tout est monté d’un coup, l’app rame | Utiliser FlatList (virtualisation) |
| Confondre état local et état serveur | Gérer le réseau à la main avec useState/useEffect | TanStack Query pour l’état serveur |
| Stocker un jeton dans AsyncStorage | Stockage non chiffré | expo-secure-store pour les secrets |
| Tester la caméra sur émulateur | Pas de caméra disponible | Tester sur un appareil physique |
| Resoumettre l’app pour un correctif JS | Méconnaissance des mises à jour OTA | eas update pour le JavaScript |
FAQ
Q : Faut-il connaître React (web) avant React Native ?
R : C’est un gros plus, car composants, props, état et hooks sont identiques. Si vous débutez, révisez d’abord les bases de JavaScript moderne et la pensée par composants ; le passage au mobile sera ensuite naturel.
Q : Ai-je besoin d’un Mac ?
R : Non. Avec Expo Go, vous développez et testez iOS et Android depuis Windows ou Linux. Pour produire le binaire iOS final, EAS Build compile dans le cloud sur des serveurs macOS — vous n’avez pas besoin de posséder un Mac.
Q : React Native ou Flutter ?
R : Les deux sont d’excellents choix. React Native s’impose si vous venez de l’écosystème JavaScript/React et voulez partager des compétences avec le web. Le comparatif détaillé pèse les critères pour décider selon votre contexte.
Q : Expo limite-t-il ce que je peux faire ?
R : Plus vraiment. Grâce aux development builds, on peut ajouter n’importe quelle bibliothèque native et même du code natif personnalisé, tout en gardant le confort d’Expo. C’est l’approche recommandée aujourd’hui, y compris pour des apps complexes.
Q : Combien de temps pour suivre tout le parcours ?
R : En comptant la pratique sur StockPoche, prévoyez une à deux semaines à temps partiel pour les six tutoriels. Chacun demande entre trente minutes et une heure de lecture active, plus le temps de coder.
Q : Le code est-il à jour ?
R : Oui, ce parcours cible le SDK Expo 56 (React Native 0.85, React 19.2), la version courante au moment d’écrire. Les commandes et les API sont vérifiées contre la documentation officielle. Les versions sont épinglées dans les tutoriels pour garder le contenu fiable dans le temps.
Par où commencer
Le meilleur point d’entrée est la première leçon : Démarrer un projet React Native avec Expo. En une trentaine de minutes, StockPoche tournera sur votre téléphone, et vous aurez la satisfaction de voir votre premier écran réagir au rechargement à chaud. À partir de là, suivez les tutoriels dans l’ordre : chaque brique posée rend la suivante plus simple, et au bout du parcours, vous aurez construit — et publié — une vraie application mobile. Gardez ce hub sous la main : il sert de table des matières et de point de retour entre deux leçons, et il rassemble les ressources officielles vers lesquelles revenir quand un détail technique mérite d’être approfondi.