Cours React Native + Hooks

Leçon 1 • JSX et le DOM virtuel

Explique la compilation JSX, la réconciliation des props de clé et comment l'algorithme de différenciation de React minimise les mises à jour natives. Établit un lien entre le comportement du DOM virtuel et le rendement.

Leçon 2 • Plongée dans les composants fonctionnels

Compare les composants de classe et les composants fonctionnels et explique pourquoi les hooks nécessitent des composants fonctionnels. Établit le modèle mental pour les fonctions UI sans état.

Leçon 3 • Révision de la syntaxe JavaScript moderne

Couvre le destructurage, la propagation/reste, les fonctions fléchées et async/await tels qu'utilisés dans les bases de code React Native. Réduit la confusion syntaxique dans les exemples de hooks ultérieurs.

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

Explique l'architecture du pont, le fil d'exécution JavaScript et le système de modules natifs. Positionne React Native par rapport à React Web et au développement natif.

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

Utilise le CLI React Native pour générer un projet et explique la structure de fichiers créée. Établit un lien entre la disposition des dossiers et le pipeline de compilation.

Leçon 3 • Composants intégrés de base

Présente View, Text, Image, ScrollView et TextInput comme les éléments constitutifs primitifs de l'interface utilisateur. Démontre comment chacun correspond à un widget natif.

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

Installe Node, Watchman, Xcode et Android Studio avec les versions correctes du SDK. Valide la chaîne d'outils en exécutant un projet vierge sur les deux plateformes.

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

Présente la signature de useState, l'initialisation de l'état et les patrons de fonction de mise à jour. Couvre les pièges courants comme les fermetures obsolètes et les mises à jour groupées.

Leçon 2 • Construction d'une application de compteur et de minuterie

Applique useState et useEffect ensemble dans un compteur pratique et une minuterie de décompte. Renforce les mises à jour d'état, les intervalles et le nettoyage dans un composant réel.

Leçon 3 • Effets secondaires avec useEffect

Explique le tableau de dépendances, les fonctions de nettoyage et le moment d'exécution par rapport au rendu. Remplace les trois méthodes de cycle de vie des classes par un seul hook.

Leçon 4 • Récupération de données distantes avec des hooks

Construit un patron de récupération de données utilisant useState pour les états de données/chargement/erreur et useEffect pour l'appel de récupération. Introduit les états UI de chargement et d'erreur.

Leçon 1 • Hooks de rendement : useMemo et useCallback

Mémoïse les calculs coûteux avec useMemo et stabilise les références de fonctions avec useCallback pour éviter les nouvelles itérations de rendu inutiles des enfants.

Leçon 2 • API impératives avec useImperativeHandle

Expose une API impérative contrôlée depuis un composant enfant vers une ref parent en utilisant useImperativeHandle et forwardRef. Utile pour les composants de saisie personnalisés.

Leçon 3 • Référencement de valeurs avec useRef

Utilise useRef pour conserver des valeurs mutables entre les itérations de rendu sans déclencher de nouvelles itérations de rendu et pour accéder aux instances de composants natifs. Compare avec useState pour les données non liées à l'interface utilisateur.

Leçon 4 • État complexe avec useReducer

Implémente une fonction de réduction et un patron de distribution pour les machines à états multi-actions. Compare useReducer à useState pour les scénarios de formulaires et de paniers.

Leçon 1 • useForm : Hook de gestion de l'état des formulaires

Construit un hook useForm qui gère les valeurs des champs, les erreurs de validation et l'état de soumission. Remplace la logique de formulaire répétitive sur plusieurs écrans.

Leçon 2 • Test des hooks personnalisés

Utilise la bibliothèque de test React Native et renderHook pour tester unitairement les hooks personnalisés de manière isolée. Couvre act, async act et le simulacre des dépendances externes.

Leçon 3 • useFetch : Hook de récupération de données

Extrait le patron de récupération-chargement-erreur dans un hook useFetch réutilisable avec URL et options configurables. Démontre comment les hooks personnalisés réduisent le code passe-partout des composants.

Leçon 4 • useLocalStorage et useAsyncStorage

Enveloppe AsyncStorage dans un hook qui reflète l'API de useState pour les données persistantes de type clé-valeur. Gère la sérialisation, la désérialisation et les cas d'erreur.

Leçon 1 • Patrons du navigateur par pile

Crée un navigateur par pile natif avec des transitions push, pop et replace. Passe des paramètres entre les écrans et les lit avec useRoute.

Leçon 2 • Navigateurs par onglets et par tiroir

Ajoute des navigateurs par onglets en bas et par tiroir et les imbrique dans la pile. Personnalise les icônes des onglets et le contenu du tiroir avec un état piloté par les hooks.

Leçon 3 • Flux d'authentification avec la navigation

Implémente un navigateur conditionnel qui bascule entre les piles d'authentification et d'application en fonction de l'état du jeton stocké dans le contexte. Démontre un routage protégé concret.

Leçon 4 • Hooks de navigation en profondeur

Utilise useNavigation, useRoute, useFocusEffect et useIsFocused pour contrôler le comportement de navigation à partir des composants. Remplace le forage de props des objets de navigation.

Leçon 1 • État serveur avec React Query

Utilise les hooks useQuery et useMutation de React Query pour gérer l'état serveur, la mise en cache et la re-récupération en arrière-plan. Élimine la gestion manuelle de l'état de chargement/erreur.

Leçon 2 • Intégration de Redux Toolkit

Configure un magasin Redux avec createSlice, RTK Query pour la récupération de données et l'enveloppe Provider. Connecte les composants en utilisant useSelector et useDispatch.

Leçon 3 • Patrons de l'API Context à grande échelle

Divise le contexte en fournisseurs d'état et de distribution pour éviter les nouvelles itérations de rendu inutiles dans les grandes arborescences. Combine useReducer avec le contexte pour un patron similaire à Redux.

Leçon 4 • État global avec Zustand

Crée un magasin Zustand avec des actions et des sélecteurs, puis le consomme avec un seul appel de hook. Compare l'API minimale de Zustand au code passe-partout du contexte.

Leçon 1 • Profilage et diagnostic du rendement

Utilise Flipper, le profileur React DevTools et le moniteur de rendement pour identifier les rendus lents et les à-coups du fil d'exécution JS. Établit un flux de travail d'optimisation basé sur la mesure.

Leçon 2 • Optimisation des listes et des images

Applique les props d'optimisation FlatList, la mise en cache des images et le chargement différé pour éliminer les à-coups de défilement. Couvre windowSize, initialNumToRender et getItemLayout.

Leçon 3 • Test des composants et des hooks

Rédige des tests unitaires et d'intégration avec Jest et React Native Testing Library, couvrant les interactions utilisateur et le comportement asynchrone. Atteint une couverture significative sans tester les détails d'implémentation.

Leçon 4 • Animation avec Animated et Reanimated

Construit des animations fluides en utilisant l'API Animated et passe à Reanimated 2 pour les animations sur le fil d'exécution UI. Couvre les animations à ressort, temporelles et pilotées par les gestes.