Cours React Native + Hooks

Leçon 1 • JSX et le DOM Virtuel

Explique la compilation JSX, la réconciliation des props key, et comment l'algorithme de diffing de React minimise les mises à jour natives. Relie le comportement du DOM virtuel à la performance.

Leçon 2 • Plongée Profonde dans les Composants Fonctionnels

Compare les composants classe avec 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 • Revue de la Syntaxe JavaScript Moderne

Couvre la déstructuration, le spread/rest, 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 thread 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 la CLI React Native pour créer un projet et explique la structure de fichiers généré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 les 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 SDK correctes. 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 les 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 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 re-rendus inutiles des enfants.

Leçon 2 • APIs 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 persister des valeurs mutables à travers les rendus sans déclencher de re-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 réductrice et un patron de dispatch pour les machines d'état à actions multiples. Compare useReducer à useState pour les scénarios de formulaires et de paniers.

Leçon 1 • 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 en isolation. Couvre act, async act et le mocking des dépendances externes.

Leçon 3 • useFetch : Hook de Récupération de Données

Extrait le patron fetch-chargement-erreur dans un hook useFetch réutilisable avec URL et options configurables. Montre comment les hooks personnalisés réduisent le code standard 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 Stack

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

Leçon 2 • Navigateurs Tab et Drawer

Ajoute des navigateurs bottom tab et drawer et les imbrique dans le stack. Personnalise les icônes des onglets et le contenu du drawer avec un état piloté par les hooks.

Leçon 3 • Flux d'Authentification avec Navigation

Implémente un navigateur conditionnel qui bascule entre les piles auth et app en fonction de l'état du jeton stocké dans le contexte. Montre le 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 l'intérieur des 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 re-récupération en arrière-plan. Élimine la gestion manuelle des états de chargement/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 Context API à Grande Échelle

Divise le contexte en fournisseurs d'état et de dispatch pour éviter les re-rendus inutiles dans les grands arbres. Combine useReducer avec le contexte pour un patron 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 standard du contexte.

Leçon 1 • Profilage et Diagnostic des Performances

Utilise Flipper, le profileur React DevTools et le Moniteur de Performance pour identifier les rendus lents et les à-coups 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 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 thread UI. Couvre les animations spring, timing et gestuelles.