Introduction : découvrir le développement mobile avec React Native
React Native permet de créer des applications pour iOS et Android en utilisant JavaScript et le modèle de composants de React. Cette formation de trois jours vous accompagne de la mise en place du projet jusqu’à la réalisation d’une application fonctionnelle. Vous travaillerez progressivement sur une même application, par exemple un outil de suivi de tâches ou un catalogue de produits, afin de relier les notions à des situations concrètes.
Nous aborderons les particularités du mobile : écrans de tailles différentes, interactions tactiles, navigation et affichage des données. Les exercices sont conçus pour vous aider à comprendre les choix de développement, plutôt qu’à recopier du code sans en saisir le fonctionnement.
Module 1 : préparer son environnement et comprendre les composants
Créer un premier projet
Vous découvrirez les outils nécessaires pour lancer un projet React Native et observer son rendu. Selon le contexte de travail, nous verrons les possibilités offertes par Expo pour démarrer et tester plus facilement, ainsi que les principes d’un projet destiné à évoluer. Vous apprendrez à repérer les fichiers utiles et à lancer l’application sur un simulateur ou un appareil compatible.
Construire une interface avec des composants
Vous manipulerez les composants de base, comme View, Text et Image, et verrez comment organiser une interface en éléments réutilisables. Les styles seront définis avec les outils de React Native et adaptés aux contraintes d’un écran mobile. Par exemple, vous pourrez concevoir une carte de tâche comprenant un titre, une date et un indicateur d’état.
Exercice pratique : créer l’écran d’accueil d’une application de tâches, avec un en-tête, une liste de cartes et un bouton d’action. Vous vérifierez que le contenu reste lisible sur différentes tailles d’écran.
Module 2 : rendre l’application interactive
Gérer les propriétés et l’état
Vous apprendrez à transmettre des informations entre composants grâce aux propriétés, puis à gérer les données qui évoluent au fil de l’utilisation avec l’état. Nous verrons comment éviter les duplications en isolant une partie de l’interface dans un composant adapté. Un exemple concret consiste à faire varier l’apparence d’une tâche selon qu’elle est terminée ou encore à faire.
Réagir aux actions de l’utilisateur
Les boutons, champs de saisie et gestes courants permettent de transformer un écran statique en véritable interface. Vous étudierez la mise à jour des données après une action, la validation simple d’un formulaire et l’affichage d’un retour compréhensible. Nous aborderons également les erreurs fréquentes, comme un champ qui n’actualise pas sa valeur ou un composant qui reçoit des données inattendues.
Exercice pratique : ajouter une tâche depuis un formulaire, afficher cette tâche dans la liste et permettre de modifier son état. Vous testerez plusieurs cas, notamment un formulaire vide et une saisie valide.
Module 3 : organiser les écrans et la navigation
Passer d’un écran à l’autre
Une application mobile comporte souvent plusieurs vues. Vous découvrirez les principes de navigation avec une bibliothèque adaptée au projet et apprendrez à configurer des écrans, des paramètres et des retours vers la vue précédente. Nous distinguerons les parcours courants, comme l’accès à une fiche depuis une liste, et les changements d’écran liés à une action de l’utilisateur.
Concevoir un parcours cohérent
La navigation doit rester prévisible sur iOS et Android. Vous verrez comment nommer clairement les écrans, transmettre un identifiant ou un objet sélectionné et éviter les parcours sans issue. Par exemple, une personne peut ouvrir la fiche d’un produit depuis un catalogue, puis revenir à la liste sans perdre le contexte utile.
Exercice pratique : compléter l’application de tâches avec un écran de détail. Depuis une tâche, l’utilisateur pourra consulter ses informations, revenir à la liste et accéder à un formulaire de modification.
Module 4 : charger et gérer des données
Connecter l’interface à une source de données
Vous apprendrez à effectuer une requête vers un service web, à traiter la réponse et à afficher les résultats dans l’application. Nous aborderons les états de chargement, les listes vides et les erreurs réseau afin que l’utilisateur comprenne ce qui se passe. Un catalogue de produits ou une liste d’articles constitue un exemple parlant pour suivre le trajet des données jusqu’à l’écran.
Préserver une expérience claire
Les données peuvent arriver avec retard ou ne pas être disponibles. Vous étudierez des solutions simples pour garder une interface compréhensible, signaler une erreur et proposer une nouvelle tentative lorsque cela est pertinent. Nous verrons aussi pourquoi il faut vérifier le format des données reçues avant de les utiliser dans les composants.
Exercice pratique : charger une liste depuis une source de données de démonstration, afficher un indicateur de chargement, présenter les résultats et prévoir un message si la requête échoue.
Module 5 : tester, améliorer et préparer la suite
Vérifier l’application sur mobile
Vous mettrez en place une méthode de vérification couvrant les principaux parcours : ouverture, navigation, saisie et affichage des données. Vous apprendrez à repérer les problèmes de mise en page, les interactions peu claires et les erreurs visibles dans la console. Les tests sur simulateur et, lorsque possible, sur appareil réel permettent de mieux apprécier les différences d’usage.
Améliorer la qualité du projet
Nous aborderons les bonnes pratiques qui facilitent la maintenance : composants aux responsabilités claires, noms explicites et styles cohérents. Vous découvrirez également les principes de préparation d’une version de test et les points à vérifier avant de partager l’application. La publication sur les boutiques dépend de démarches et de paramètres propres à chaque projet ; la formation vous aidera à comprendre les étapes à anticiper sans présumer de leur validation.
Exercice pratique : réaliser une revue de l’application développée pendant la formation. Vous testerez un parcours complet, corrigerez une anomalie d’interface ou de navigation et préparerez une courte liste d’améliorations à traiter ensuite.
À retenir
React Native vous permet de développer des interfaces mobiles avec JavaScript et des composants adaptés à iOS et Android. En trois jours, vous pratiquerez les bases essentielles : structuration des écrans, interactions, navigation, chargement de données et vérification de l’application. Le fil rouge vous donnera une base concrète à adapter à vos propres besoins.
Pour aller plus loin
Après cette formation, vous pourrez approfondir la gestion des données locales, les tests automatisés, l’accessibilité et la préparation d’une mise en production. Pour consolider les acquis, choisissez un besoin précis, définissez un parcours utilisateur simple, puis faites évoluer votre application par petites étapes en testant chaque ajout.
