Cours React Native

Leçon 1 • Outils de développement et notions de base du débogage

Présente le débogueur React Native, Flipper et le menu développeur intégré à l'application. Donne aux étudiants et étudiantes des outils de rétroaction immédiate sur lesquels ils et elles compteront tout au long du cours.

Leçon 2 • Qu'est-ce que React Native

Couvre le rôle de React Native dans le développement mobile multiplateforme et en quoi il diffère de React pour le Web. Établit la base conceptuelle pour tous les chapitres suivants.

Leçon 3 • Création de votre premier projet

Utilise l'interface CLI de React Native et Expo pour générer une nouvelle application et explorer la structure de fichiers créée. Relie la connaissance des outils à la création pratique de projet.

Leçon 4 • Configuration de l'environnement de développement

Installe et configure tous les outils requis pour le développement iOS et Android. S'assure que chaque étudiant et étudiante dispose d'un environnement local reproductible et fonctionnel.

Leçon 1 • Composants Text, View et Image

Couvre les trois composants React Native les plus fondamentaux et leurs propriétés essentielles. Les étudiants et étudiantes construisent des présentations statiques combinant texte, conteneurs et images.

Leçon 2 • Composants de saisie et de formulaire

Couvre TextInput, Switch et Picker pour la saisie de données par l'utilisateur. Établit les connaissances des composants nécessaires avant d'introduire la gestion d'état.

Leçon 3 • Principes fondamentaux de JSX dans React Native

Explique la syntaxe JSX, l'incorporation d'expressions et la manière dont JSX se compile en appels d'interface utilisateur natifs. Fournit la base syntaxique pour tout le travail à venir sur les composants.

Leçon 4 • Composants Touchable et Pressable

Présente les composants de gestion du toucher et leurs comportements de rétroaction. Relie les présentations statiques aux éléments interactifs que les étudiants et étudiantes utiliseront dans chaque application.

Leçon 1 • API StyleSheet et styles en ligne

Compare StyleSheet.create avec les objets de style en ligne et explique les implications sur le rendement. Établit des patrons de style cohérents utilisés tout au long du cours.

Leçon 2 • Modèle de disposition Flexbox

Explique en quoi le modèle Flexbox de React Native diffère du CSS et comment contrôler l'alignement des axes. Les étudiants et étudiantes acquièrent la compétence de base en disposition utilisée dans chaque écran.

Leçon 3 • Thèmes et patrons de style réutilisables

Introduit les objets de thème, les constantes de style et l'encapsulation des styles au niveau des composants. Prépare les étudiants et étudiantes à maintenir des systèmes de design cohérents dans des applications de grande envergure.

Leçon 4 • Espacement, bordures et ombres

Applique les propriétés de marge, de remplissage, de bordure et d'ombre pour affiner la hiérarchie visuelle. Relie les connaissances en disposition à l'apparence soignée de composants prêts pour la production.

Leçon 1 • useState pour l'état local

Introduit le crochet useState pour gérer l'état au niveau du composant et déclencher les nouveaux rendus. Permet aux étudiants et étudiantes de construire des éléments d'interface utilisateur interactifs avec état.

Leçon 2 • useEffect et effets secondaires

Couvre useEffect pour la récupération de données, les abonnements et le nettoyage lors du démontage. Relie les concepts du cycle de vie des composants aux opérations asynchrones pratiques.

Leçon 3 • Patrons de composants et meilleures pratiques

Couvre les composants conteneur et de présentation, la mémorisation et l'évitement des rendus inutiles. Prépare les étudiants et étudiantes à écrire des arbres de composants performants et maintenables.

Leçon 4 • Propriétés et communication entre composants

Explique comment les propriétés transmettent des données et des fonctions de rappel entre les composants parents et enfants. Établit le patron de flux de données unidirectionnel au cœur des applications React Native.

Leçon 1 • Navigateur de pile pour les flux d'écrans

Construit des flux d'écrans par empilement et dépilement à l'aide du navigateur de pile natif. Couvre le patron de navigation le plus courant dans les applications mobiles.

Leçon 2 • Navigateurs à onglets et tiroir

Ajoute les navigateurs à onglets en bas et à tiroir latéral pour les sections principales de l'application. Permet aux étudiants et étudiantes de construire les coquilles de navigation principales utilisées dans la plupart des applications.

Leçon 3 • Flux d'authentification et routes protégées

Implémente une navigation conditionnelle basée sur l'état d'authentification à l'aide du changement de navigateur. Prépare les étudiants et étudiantes à construire une navigation sécurisée et sensible au rôle.

Leçon 4 • Configuration et concepts de React Navigation

Installe React Navigation et explique le modèle de navigateur, d'écran et de route. Fournit la carte conceptuelle dont les étudiants et étudiantes ont besoin avant de construire tout flux de navigation.

Leçon 1 • API Fetch et patrons asynchrones

Utilise l'API Fetch intégrée avec async/await pour effectuer des requêtes HTTP depuis React Native. Établit le patron de récupération de données asynchrone utilisé dans toutes les sections suivantes.

Leçon 2 • React Query pour l'état du serveur

Utilise React Query pour mettre en cache, récupérer et synchroniser les données du serveur automatiquement. Réduit le code passe-partout et améliore la fraîcheur des données dans l'application.

Leçon 3 • Axios pour les requêtes HTTP

Introduit Axios pour une syntaxe de requête plus propre, des intercepteurs et une configuration d'URL de base. Fait progresser les étudiants et étudiantes vers le client HTTP le plus utilisé dans les applications React Native de production.

Leçon 4 • Stockage local avec AsyncStorage

Persiste les données clé-valeur localement à l'aide d'AsyncStorage pour les fonctionnalités hors ligne prioritaires. Prépare les étudiants et étudiantes à stocker des jetons, des préférences et des réponses mises en cache sur l'appareil.

Leçon 1 • Caméra et sélecteur d'images

Capture des photos et sélectionne des images dans la galerie à l'aide de react-native-image-picker. Permet aux étudiants et étudiantes de construire des fonctionnalités riches en médias courantes dans les applications sociales et utilitaires.

Leçon 2 • Gestion des autorisations

Demande et vérifie les autorisations d'exécution pour les fonctionnalités sensibles de l'appareil sous iOS et Android. Établit le patron d'autorisation requis avant d'accéder à toute API native.

Leçon 3 • Géolocalisation et cartes

Récupère la position de l'appareil et affiche des cartes interactives à l'aide de react-native-maps. Relie les données de localisation à des expériences cartographiques visuelles que les étudiants et étudiantes peuvent livrer dans des applications réelles.

Leçon 4 • Notifications push

Configure les notifications push locales et distantes à l'aide des notifications Expo ou de Firebase. Enseigne le cycle de vie complet des notifications, de la planification à l'interaction utilisateur.

Leçon 1 • Tests unitaires et d'intégration

Rédige des tests de composants et de crochets à l'aide de Jest et de React Native Testing Library. Établit une base de test qui détecte les régressions avant le déploiement.

Leçon 2 • Construction et publication dans les magasins d'applications

Génère des versions signées pour Android et iOS et les soumet à leurs magasins respectifs. Complète le cycle de vie complet du développement à la production pour les étudiants et étudiantes.

Leçon 3 • Profilage et optimisation du rendement

Utilise Flipper et le moniteur de rendement pour identifier les goulots d'étranglement du fil JS et du rendu. Équipe les étudiants et étudiantes pour diagnostiquer et résoudre les problèmes de rendement les plus courants de React Native.

Leçon 4 • Tests de bout en bout avec Detox

Automatise les flux utilisateur complets sur les simulateurs et les appareils à l'aide de Detox. Valide les parcours critiques comme la connexion et le paiement avant chaque version.