Formation de base en React Native

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

Définit React Native, sa relation avec React et son modèle multiplateforme. Établit le contexte de son utilisation par rapport aux approches natives ou Web uniquement.

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

Guide l'installation de tous les outils requis pour le développement iOS et Android. Assure que chaque étudiant dispose d'un environnement vérifié et exécutable avant d'écrire du code.

Leçon 3 • Prérequis JavaScript de base et ES6

Passe en revue la syntaxe JavaScript et les fonctionnalités ES6 essentielles pour React Native. Comble les lacunes de connaissances avant que les étudiants ne rencontrent les patrons axés sur les composants.

Leçon 1 • Gestion d'état avec useState

Couvre le crochet useState pour la gestion de l'état local des composants. Les étudiants construisent des éléments d'interface utilisateur interactifs qui répondent aux entrées de l'utilisateur et se rendent correctement.

Leçon 2 • Listes et rendu conditionnel

Enseigne le rendu de listes dynamiques et l'affichage conditionnel d'éléments d'interface utilisateur. Ces patrons apparaissent dans presque tous les écrans React Native du monde réel.

Leçon 3 • Comprendre la syntaxe JSX

Explique comment JSX compile en JavaScript et en quoi il diffère du HTML. Relie les règles JSX directement aux composants que les étudiants construiront dans React Native.

Leçon 4 • Composants fonctionnels et accessoires

Présente les composants fonctionnels comme élément de base des interfaces utilisateur React Native. Enseigne le passage, le typage et les valeurs par défaut des accessoires pour une conception réutilisable.

Leçon 1 • Composants TextInput et de formulaire

Enseigne la capture des entrées utilisateur via TextInput et les patrons de formulaire connexes. Les étudiants construisent des formulaires contrôlés avec une rétroaction de validation avant la soumission.

Leçon 2 • API et composants spécifiques à une plateforme

Présente le module Platform et les extensions de fichier spécifiques à une plateforme pour un comportement divergent. Les étudiants écrivent du code qui s'adapte gracieusement aux différences entre iOS et Android.

Leçon 3 • Interactions Touchable et Pressable

Couvre tous les composants de gestion des touches et leurs différences de comportement. Les étudiants choisissent le composant approprié pour chaque patron d'interaction dans leurs applications.

Leçon 4 • Composants View, Text et Image

Présente les trois composants React Native les plus fondamentaux et leurs accessoires. Les étudiants comprennent pourquoi ceux-ci remplacent div, p et img du développement Web.

Leçon 1 • Dimensions et conception adaptative

Enseigne l'utilisation de l'API Dimensions et du dimensionnement en pourcentage pour les mises en page adaptatives. Les étudiants construisent des interfaces utilisateur qui s'adaptent aux téléphones, aux tablettes et aux changements d'orientation.

Leçon 2 • Principes fondamentaux de Flexbox

Couvre Flexbox comme moteur de mise en page principal dans React Native, en notant ses différences par rapport au Flexbox Web. Les étudiants disposent les composants en utilisant la direction, l'alignement et le retour à la ligne.

Leçon 3 • API StyleSheet et styles en ligne

Explique en quoi les styles React Native diffèrent du CSS et comment StyleSheet.create fonctionne. Les étudiants adoptent les meilleures pratiques pour l'organisation et le rendement des styles.

Leçon 4 • Systèmes de typographie et de couleurs

Couvre le style des polices, les polices personnalisées et la construction d'une palette de couleurs cohérente. Les étudiants établissent un patron de jetons de conception réutilisable dans toute l'application.

Leçon 1 • Crochets de navigation et contrôle programmatique

Couvre les crochets useNavigation, useFocusEffect et useRoute pour une logique de navigation flexible. Les étudiants déclenchent la navigation à partir de composants autres que l'écran et répondent aux événements de focus.

Leçon 2 • Navigateur à pile pour les flux d'écran

Construit des flux d'écran linéaires avec le navigateur à pile natif et les animations de transition. Les étudiants passent des paramètres entre les écrans et gèrent la pile arrière.

Leçon 3 • Navigateurs à onglets et à tiroir

Ajoute des navigateurs à onglets en bas et à tiroir latéral pour les sections d'application de premier niveau. Les étudiants imbriquent des navigateurs pour créer des structures de navigation complexes et réalistes.

Leçon 4 • Liens profonds et flux d'authentification

Configure les liens profonds basés sur les URL et construit des patrons de route protégée pour l'authentification. Les étudiants implémentent une navigation limitée aux utilisateurs connectés qui persiste entre les redémarrages de l'application.

Leçon 1 • API Context pour l'état global

Construit un patron de fournisseur et de consommateur de contexte pour un état à l'échelle de l'application sans bibliothèques tierces. Les étudiants implémentent un contexte de thème et d'authentification comme exemples pratiques.

Leçon 2 • Persistance de l'état avec AsyncStorage

Intègre AsyncStorage pour conserver les données utilisateur entre les sessions de l'application. Les étudiants combinent la persistance avec Redux ou Context pour restaurer l'état au lancement de l'application.

Leçon 3 • Principes fondamentaux de Redux Toolkit

Présente le modèle de tranche, de magasin et de répartition de Redux Toolkit pour un état prévisible. Les étudiants migrent une fonctionnalité basée sur Context vers Redux pour comparer les deux approches.

Leçon 4 • Remontée d'état et forage d'accessoires

Explique quand l'état local doit être remonté et les problèmes que le forage d'accessoires crée. Les étudiants reconnaissent le seuil auquel une solution d'état global devient nécessaire.

Leçon 1 • Pagination et défilement infini

Implémente la pagination basée sur le curseur et sur le numéro de page avec onEndReached de FlatList. Les étudiants chargent des données supplémentaires de manière transparente sans perturber la position de défilement de l'utilisateur.

Leçon 2 • États de chargement, d'erreur et vides

Conçoit des états d'interface utilisateur pour les spinners de chargement, les messages d'erreur et les scénarios de données vides. Les étudiants construisent un composant wrapper de récupération de données réutilisable utilisé sur tous les écrans.

Leçon 3 • API Fetch et principes fondamentaux HTTP

Utilise l'API Fetch intégrée pour effectuer des requêtes GET et POST et analyser les réponses JSON. Les étudiants gèrent les codes d'état et les erreurs réseau selon un patron cohérent.

Leçon 4 • Support hors ligne et détection réseau

Détecte les changements de connectivité réseau et sert les données mises en cache lorsqu'il est hors ligne. Les étudiants implémentent une file d'attente pour les requêtes ayant échoué qui réessaie lorsque la connectivité est rétablie.

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

Automatise les flux utilisateur complets sur des simulateurs réels à l'aide de Detox. Les étudiants écrivent des tests E2E qui valident les chemins critiques avant chaque version.

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

Écrit des tests unitaires avec Jest et des tests de composants avec React Native Testing Library. Les étudiants testent les interactions utilisateur, les changements d'état asynchrones et les flux de navigation.

Leçon 3 • Construction et soumission aux magasins d'applications

Configure les versions de version, les certificats de signature et les métadonnées du magasin d'applications pour les deux plateformes. Les étudiants produisent des fichiers APK/AAB et IPA signés prêts pour l'examen du magasin.

Leçon 4 • Animations avec l'API Animated et Reanimated

Construit des animations fluides à l'aide de l'API Animated et présente React Native Reanimated pour les gestes complexes. Les étudiants animent l'opacité, la position et l'échelle sur le fil d'exécution de l'interface utilisateur.