Cours React Native

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

Présente le débogueur React Native, Flipper et le menu développeur dans l'application. Donne aux étudiants des outils de retour d'information immédiats sur lesquels ils 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 la CLI React Native et Expo pour créer une nouvelle application et explorer la structure de fichiers générée. Relie la connaissance des outils à la création pratique de projets.

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

Installe et configure tous les outils requis pour le développement iOS et Android. Garantit que chaque étudiant 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 construisent des mises en page statiques combinant du texte, des conteneurs et des images.

Leçon 2 • Composants de saisie et de formulaire

Couvre TextInput, Switch et Picker pour capturer les entrées utilisateur. Établit la connaissance des composants nécessaire avant d'introduire la gestion d'état.

Leçon 3 • Fondamentaux de JSX dans React Native

Explique la syntaxe JSX, l'incorporation d'expressions et comment JSX se compile en appels d'interface native. Fournit la base syntaxique pour tout le travail à venir sur les composants.

Leçon 4 • Composants Touchable et Pressable

Introduit les composants de gestion tactile et leurs comportements de retour. Relie les mises en page statiques aux éléments interactifs que les étudiants 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 de performance. Établit des motifs de style cohérents utilisés tout au long du cours.

Leçon 2 • Modèle de mise en page 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 acquièrent la compétence de mise en page centrale utilisée dans chaque écran.

Leçon 3 • Thème et motifs de style réutilisables

Introduit les objets de thème, les constantes de style et l'encapsulation de style au niveau du composant. Prépare les étudiants à maintenir des systèmes de conception cohérents dans de grandes applications.

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 la connaissance de la mise en page à un aspect de composant soigné et de qualité professionnelle.

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

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

Leçon 2 • useEffect et effets de bord

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

Leçon 3 • Motifs de composants et bonnes pratiques

Couvre la distinction entre composants conteneur et de présentation, la mémoïsation et l'évitement de rendus inutiles. Prépare les étudiants à écrire des arbres de composants performants et maintenables.

Leçon 4 • Props et communication entre composants

Explique comment les props transmettent des données et des fonctions de rappel entre les composants parents et enfants. Établit le motif de flux de données unidirectionnel central dans les applications React Native.

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

Construit des flux d'écrans par poussée et retrait à l'aide du navigateur par pile natif. Couvre le motif de navigation le plus courant dans les applications mobiles.

Leçon 2 • Navigateurs par onglets et tiroir

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

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

Implémente la navigation conditionnelle basée sur l'état d'authentification à l'aide du changement de navigateur. Prépare les étudiants à construire une navigation d'application sécurisée et tenant compte des rôles.

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 ont besoin avant de construire un flux de navigation.

Leçon 1 • API Fetch et motifs asynchrones

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

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

Utilise React Query pour mettre en cache, actualiser et synchroniser automatiquement les données du serveur. Réduit le code standard 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 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. Prépare les étudiants à stocker des jetons, des préférences et des réponses mises en cache sur l'appareil.

Leçon 1 • Appareil photo et sélecteur d'images

Capture des photos et sélection d'images depuis la galerie à l'aide de react-native-image-picker. Permet aux étudiants 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 sur iOS et Android. Établit le modèle d'autorisation requis avant d'accéder à toute API native.

Leçon 3 • Géolocalisation et cartes

Récupère la localisation 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 peuvent expédier dans de vraies applications.

Leçon 4 • Notifications push

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

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

Écrit des tests de composants et de hooks à 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 sur les magasins d'applications

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

Leçon 3 • Profilage et optimisation des performances

Utilise Flipper et le moniteur de performance pour identifier les goulots d'étranglement du thread JS et du rendu. Équipe les étudiants pour diagnostiquer et résoudre les problèmes de performance les plus courants dans 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 tels que la connexion et le paiement avant chaque publication.