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. Donne le contexte pour lequel il est utilisé plutôt que les approches natives ou web uniquement.

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

Guide l'installation de tous les outils nécessaires 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 et ES6 essentiels

Revise la syntaxe JavaScript et les fonctionnalités ES6 essentielles pour React Native. Comble les lacunes de connaissances avant que les étudiants ne rencontrent les modèles basés sur les composants.

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

Couvre le hook 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 mettent à jour 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 modèles apparaissent dans presque tous les écrans React Native réels.

Leçon 3 • Comprendre la syntaxe JSX

Explique comment JSX est compilé 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 props

Présente les composants fonctionnels comme l'élément de base des interfaces utilisateur React Native. Enseigne le passage de props, leur 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 modèles de formulaire associés. Les étudiants construisent des formulaires contrôlés avec un retour de validation avant la soumission.

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

Présente le module Platform et les extensions de fichiers 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 du toucher et leurs différences de comportement. Les étudiants choisissent le composant approprié pour chaque modèle 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 props. 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 basé sur des pourcentages pour des mises en page adaptatives. Les étudiants construisent des interfaces utilisateur qui s'adaptent aux téléphones, tablettes et changements d'orientation.

Leçon 2 • Fondamentaux de la mise en page 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 organisent les composants en utilisant la direction, l'alignement et l'habillage.

Leçon 3 • API StyleSheet et styles en ligne

Explique comment les styles React Native diffèrent du CSS et comment StyleSheet.create fonctionne. Les étudiants adoptent les bonnes pratiques pour l'organisation et la performance des styles.

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

Couvre le style des polices, les polices personnalisées et la construction d'une palette de couleurs cohérente. Les étudiants établissent un modèle 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 à pile pour les flux d'écrans

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

Leçon 3 • Navigateurs à onglets et à tiroir

Ajoute des navigateurs à onglets en bas et à 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 les URL et construit des modèles 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 modèle de fournisseur et de consommateur de Context pour un état à l'échelle de l'application sans bibliothèques tierces. Les étudiants implémentent le 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 • Fondamentaux de Redux Toolkit

Présente le modèle de 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 d'état et prop drilling

Explique quand l'état local doit être remonté et les problèmes que le prop drilling crée. 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 les curseurs et 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 de données vides

Conçoit des états d'interface utilisateur pour les indicateurs 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 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 de statut et les erreurs réseau selon un modèle 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 lorsque le réseau 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 • Test de bout en bout avec Detox

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

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

Rédige 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 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 par l'App Store.

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.