Formation aux bases de 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 nécessaires au développement iOS et Android. Garantit que chaque étudiant dispose d'un environnement vérifié et exécutable avant d'écrire du code.

Leçon 3 • Prérequis JavaScript et ES6 essentiels

Passe en revue la syntaxe JavaScript et les fonctionnalités ES6 essentielles pour React Native. Combler les lacunes de connaissances avant que les étudiants ne rencontrent les schémas basés sur les composants.

Leçon 1 • Gestion de l'état avec useState

Aborde le hook useState pour gérer l'état local des composants. Les étudiants créent des éléments d'interface utilisateur interactifs qui répondent aux entrées utilisateur et se rendent à nouveau 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 schémas apparaissent dans presque tous les écrans React Native réels.

Leçon 3 • Compréhension de la syntaxe JSX

Explique comment JSX est compilé en JavaScript et en quoi il diffère du HTML. Relie les règles du 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 d'accessoires, le typage et les valeurs par défaut pour une conception réutilisable.

Leçon 1 • Composants TextInput et de formulaire

Enseigne la capture des entrées utilisateur via TextInput et les schémas de formulaire associés. Les étudiants créent des formulaires contrôlés avec des retours de validation avant la soumission.

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

Présente le module Platform et les extensions de fichier spécifiques à la 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 schéma 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 des mises en page adaptatives. Les étudiants créent des interfaces utilisateur qui s'adaptent aux téléphones, tablettes et changements d'orientation.

Leçon 2 • Principes de base de la mise en page Flexbox

Couvre Flexbox en tant que moteur de mise en page principal dans React Native, en notant ses différences par rapport au Flexbox web. Les étudiants disposent les composants à l'aide de la direction, de l'alignement et du 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 la performance 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 schéma de jetons de conception réutilisable dans toute l'application.

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

Couvre les hooks useNavigation, useFocusEffect et useRoute pour une logique de navigation flexible. Les étudiants déclenchent la navigation depuis l'extérieur des composants d'écran et répondent aux événements de focus.

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

Construit des flux d'écrans linéaires avec le navigateur par 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 par onglets et par tiroir

Ajoute des navigateurs par onglets en bas et par tiroir latéral pour les sections principales de l'application. 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 URL et construit des schémas de route protégés pour l'authentification. Les étudiants implémentent une navigation verrouillée par connexion qui persiste entre les redémarrages de l'application.

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

Construit un schéma 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 persister 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 slice, store et dispatch 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 de l'état et perçage des accessoires

Explique quand l'état local doit être remonté et les problèmes créés par le perçage des accessoires. Les étudiants reconnaissent le seuil à partir duquel 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 les pages 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 les é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é dans 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 schéma cohérent.

Leçon 4 • Prise en charge 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 build de 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 • Build et soumission aux App Stores

Configure les builds de version, les certificats de signature et les métadonnées de l'App Store pour les deux plateformes. Les étudiants produisent des fichiers APK/AAB et IPA signés prêts pour la révision en 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 thread de l'interface utilisateur.