Cours React Native + Hooks

Leçon 1 • JSX et le DOM virtuel

Explique la compilation du JSX, la réconciliation via la prop key et comment l'algorithme de différenciation de React minimise les mises à jour natives. Relie le comportement du DOM virtuel aux performances.

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

Oppose les composants de classe aux 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 destructuring, le spread/rest, les fonctions fléchées et async/await tels qu'utilisés dans les codebases React Native. Réduit la confusion syntaxique dans les exemples ultérieurs de hooks.

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

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

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

Utilise la CLI React Native pour générer un projet et explique la structure de fichiers créée. Relie l'organisation des dossiers au pipeline de build.

Leçon 3 • Composants intégrés principaux

Présente View, Text, Image, ScrollView et TextInput comme blocs de construction UI primitifs. 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 modèles de fonction de mise à jour. Couvre les pièges courants comme les fermetures obsolètes et les mises à jour par lots.

Leçon 2 • Création d'une application Compteur et Minuteur

Applique useState et useEffect ensemble dans un compteur pratique et un minuteur de compte à rebours. 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 timing 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 à distance avec les Hooks

Construit un modèle de récupération de données utilisant useState pour les états données/chargement/erreur et useEffect pour l'appel de fetch. Présente les états UI de chargement et d'erreur.

Leçon 1 • Hooks de performance : 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 nouveaux rendus inutiles des composants enfants.

Leçon 2 • API impératives avec useImperativeHandle

Expose une API impérative contrôlée depuis un composant enfant vers une ref parente 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 à travers les rendus sans déclencher de nouveaux rendus et pour accéder aux instances de composants natifs. Compare avec useState pour les données non-UI.

Leçon 4 • État complexe avec useReducer

Implémente une fonction de réducteur et un modèle de dispatch pour les machines d'état à plusieurs actions. Compare useReducer à useState pour les scénarios de formulaires et de paniers.

Leçon 1 • Hook useForm : Hook de gestion d'état de formulaire

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 React Native Testing Library et renderHook pour tester unitairement les hooks personnalisés de manière isolée. Couvre act, async act et le moquage des dépendances externes.

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

Extrait le modèle fetch-chargement-erreur dans un hook useFetch réutilisable avec une URL et des options configurables. 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 useState pour les données clé-valeur persistantes. Gère la sérialisation, la désérialisation et les cas d'erreur.

Leçon 1 • Patrons du navigateur par pile (Stack)

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 (Tab) et tiroir (Drawer)

Ajoute des navigateurs par onglets en bas et par tiroir et les imbrique dans la pile. Personnalise les icônes d'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. Montre un routage protégé dans un contexte réel.

Leçon 4 • Hooks de navigation en profondeur

Utilise useNavigation, useRoute, useFocusEffect et useIsFocused pour contrôler le comportement de navigation depuis les composants. Remplace le prop drilling 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 le rechargement en arrière-plan. Élimine la gestion manuelle des états de chargement et d'erreur.

Leçon 2 • Intégration de Redux Toolkit

Configure un store Redux avec createSlice, RTK Query pour la récupération de données et le wrapper Provider. Connecte les composants en utilisant useSelector et useDispatch.

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

Divise le contexte en fournisseurs d'état et de dispatch pour éviter les nouveaux rendus inutiles dans les grands arbres de composants. Combine useReducer avec le contexte pour un modèle similaire à Redux.

Leçon 4 • État global avec Zustand

Crée un store 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 des performances

Utilise Flipper, le profileur React DevTools et le moniteur de performances pour identifier les rendus lents et les saccades du thread 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 de FlatList, la mise en cache d'images et le chargement différé pour éliminer les saccades 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. Obtient 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 thread UI. Couvre les animations spring, timing et pilotées par les gestes.