Chapitre 1 : Premiers pas avec React

1.1 Présentation de React
1.1.1 Philosophie fondamentale de React
Fonctionnalités de React 1.1.2
1.1.3 Pourquoi apprendre React
1.1.4 L'évolution de React
1.2 Mise en place de l'environnement de développement
1.2.1 Installation de Node.js
1.2.2 Installation de VSCode
1.2.3 Installation de l'extension VSCode
1.2.4 Installation d'un navigateur Web
1.3 Création d'une application React
1.3.1 Création d'un projet avec Vite
1.3.2 Suppression et modification des dossiers et fichiers inutiles
1.3.3 Aperçu de la structure de base

Chapitre 2 : Présentation de JSX

2.1 Qu'est-ce que JSX ?
2.2 Caractéristiques syntaxiques de JSX
2.2.1 Retourner un seul élément racine
2.2.2 Fermer toutes les balises
2.2.3 Les attributs des balises sont écrits en camelCase.
2.2.4 Utilisation d'expressions entre accolades
2.2.5 Spécification des styles en ligne sous forme d'objets
2.2.6 Rédiger des commentaires entre accolades

Chapitre 3 Composants

3.1 Qu'est-ce qu'un composant ?
3.2 Types de composants
3.2.1 Composants de classe
3.2.2 Composants fonctionnels
3.2.3 Utilisation des composants de classe et des composants fonctionnels
3.3 Notions de base sur les composants
3.3.1 Extensions de composants
3.3.2 Définition des composants
3.3.3 Ajout de composants
3.3.4 Arbre des composants
3.4 Composants et objets props
3.4.1 Qu'est-ce qu'un objet props ?
3.4.2 Recherche du type d'objet props
3.4.3 Affectation par déstructuration et définition de type de l'objet props
3.4.4 Hélices et opérateur d'écartement
3.4.5 enfants
3.5 Composants et événements
3.5.1 Propriétés de l'événement
3.5.2 Gestionnaires d'événements
3.5.3 Objet événement
3.5.4 Propagation des événements

Chapitre 4 États composants

4.1 Quel est l'état d'un composant ?
4.2 Le hook useState : Gestion d’état de base
4.2.1 Syntaxe de base du hook useState
4.2.2 Utilisation du hook useState
4.2.3 Utilisation multiple du hook useState
4.2.4 Précautions lors de l'utilisation du hook useState
4.3 Le hook useReducer : Gestion d’état complexe
4.3.1 Syntaxe de base du hook useReducer
4.3.2 Utilisation du hook useReducer
4.3.3 Utilisation multiple du hook useReducer
4.4 Modèles de gestion d'état
4.4.1 État de réussite
4.4.2 Élever le statut
4.5 Vérification des valeurs d'état avec les outils de développement

Chapitre 5 : Style des composants

5.1 Styliser de façon traditionnelle
5.1.1 Styles en ligne
5.1.2 Style global
5.1.3 Modules CSS
5.1.4 Bibliothèque de noms de classes
5.2 Style avec CSS-in-JS
5.2.1 composants stylisés
5.2.2 Émotion
5.2.3 extrait de vanille
5.3 Mise en forme avec Tailwind CSS
5.3.1 Installation et utilisation de base
Bibliothèque tailwlind-merge 5.3.2
5.4 Rendu d'images
5.4.1 Préparation des ressources d'images
5.4.2 Affichage des images du dossier public
5.4.3 Rendu des images du dossier src
5.5 Application des polices
5.5.1 Application des polices Google
5.5.2 Application de polices web avec @font-face

Chapitre 6 : Construire une calculatrice

6.1 Introduction au contenu pratique
6.2 Mise en place de la structure de base d'une application React
6.2.1 Création d'un projet
6.2.2 Organisation des dossiers et fichiers inutiles
6.3 Configuration de l'interface utilisateur
6.3.1 Écriture HTML
6.3.2 Écriture de CSS
6.4 Liaison des données et connexion des événements
6.4.1 Définition des gestionnaires de données et d'événements
6.4.2 Définition et connexion des gestionnaires d'événements
6.5 Mise en œuvre de la logique
6.5.1 Implémentation de la logique de saisie numérique
6.5.2 Mise en œuvre de la logique de fonctionnement
6.5.3 Implémentation de la logique d'initialisation
6.5.4 Implémentation de la logique décimale
6.5.5 Gestion des exceptions

Chapitre 7 Rendu conditionnel et rendu itératif

7.1 Rendu conditionnel
7.1.1 Rendu conditionnel à l'aide de l'instruction if
7.1.2 Rendu conditionnel à l'aide de l'opérateur ternaire
7.1.3 Rendu conditionnel à l'aide de l'opérateur ET
7.2 Rendu itératif
7.2.1 Comprendre les concepts de base du rendu itératif
7.2.2 Utilisation de la méthode map()
7.2.3 Autres utilisations

Chapitre 8 : Traitement des formulaires

8.1 Définition d'un formulaire
8.2 Formes de contrôle
8.2.1 Composants de contrôle
8.2.2 Composants non contrôlés
8.3 Aller plus loin dans le contrôle des formes
8.3.1 Utilisation du hook useRef
8.3.2 Utilisation de hooks personnalisés
8.3.3 Crochets personnalisés en détail
8.4 Validation du formulaire
8.4.1 Utilisation de la validation de base
8.4.2 Ajout d'une logique de validation personnalisée
8.4.3 Utilisation de la bibliothèque
8.5 Modifications apportées à React 19
8.5.1 Transmission des composants des objets de référence
8.5.2 Fonctions de nettoyage

Chapitre 9 : Exercices pratiques : Création d’une application de gestion des tâches

9.1 Introduction au contenu pratique
9.2 Configuration de l'interface utilisateur
9.2.1 Mise en place de la structure de base
9.2.2 Écriture HTML
9.2.3 Écriture de CSS
9.3 Séparation des composants
9.3.1 Décomposition des éléments complexes 〈svg〉 en composants
9.3.2 Séparation des éléments de bouton en composants
9.3.3 Séparation des éléments de saisie de texte en composants
9.3.4 Séparation de l'élément case à cocher en composants
9.3.5 Séparation des éléments de mise en page en composants
9.4 Mise en œuvre de la fonction
9.4.1 Saisie d'une liste de tâches
9.4.2 Impression d'une liste de tâches
9.4.3 Traitement des tâches terminées
9.4.4 Suppression d'une tâche
9.4.5 Modification d'une tâche

Chapitre 10 : Identifiants uniques et effets secondaires

10.1 hook useId
10.2 hook useEffect
10.2.1 Cycle de vie des composants
10.2.2 Exemple de hook useEffect
10.3 Amélioration de l'application de gestion des tâches
10.3.1 Lier les éléments de formulaire
10.3.2 Enregistrement d'une tâche

Chapitre 11 Optimisation des composants

11.1 Vue d'ensemble de l'optimisation des composants
11.1.1 Méthodes d'optimisation des performances
11.1.2 Rendu inutile
11.1.3 Mémorisation
11.2 Mémorisation des composants
11.2.1 Utilisation de React.memo
11.2.2 Précautions lors de l'utilisation de React.memo
11.3 Mémorisation de fonction
11.3.1 Passage de fonctions en tant que props
11.3.2 Utilisation du hook useCallback
11.3.3 Précautions lors de l'utilisation du hook useCallback
11.4 Mémorisation de la valeur
11.4.1 Problèmes de dégradation des performances pour les tâches gourmandes en calcul
11.4.2 Utilisation du hook useMemo
11.4.3 Précautions lors de l'utilisation du hook useMemo
11.5 Optimisation des performances de chargement
11.5.1 Division du code avec React.lazy()
11.5.2 Suspense
11.5.3 Limite d'erreur
11.6 Optimisation de la mise à jour de statut
11.6.1 Hook useDeferredValue (React 19 et versions ultérieures)
11.6.2 utiliser le hook de transition
11.7 Optimisation du chargement des ressources (React 19 et versions ultérieures)
11.8 Amélioration de l'application de gestion des tâches
11.8.1 Détection du code de rendu inutile
11.8.2 Optimisation des rendus inutiles

Chapitre 12 Gestion de l'État mondial

12.1 Comprendre la gestion d'État
12.1.1 Gestion de l'État local 1
12.1.2 Gestion de l'état global
12.2 Gestion de l'état global avec l'API Context
12.2.1 Création d'un objet de contexte
12.2.2 Spécification de la portée du contexte avec le fournisseur
12.2.3 Création d'un hook useContext personnalisé
12.2.4 Utilisation de l'état global partagé avec le contexte
12.2.5 Optimisation du rendu
12.2.6 Utilisation de l'imbrication de contexte
12.2.7 Précautions lors de l'utilisation de l'API Context
12.2.8 Utilisation de l'API Context avec le hook use (React 19 et versions ultérieures)
12.3 Gestion de l'état global avec Redux
12.3.1 Installation de Redux et de Redux Toolkit
12.3.2 Création d'une boutique Redux
12.3.3 Fournir un store Redux à React
12.3.4 Création d'une tranche d'état Redux
12.3.5 Ajouter une part au magasin
12.3.6 Utilisation du magasin
12.3.7 Modification de l'état par transmission de valeurs
12.3.8 Utilisation des outils de développement
12.4 Gestion de l'état global avec Zustand
12.4.1 Installation de Zustand
12.4.2 Création d'un magasin Zustand
12.4.3 Utilisation de la boutique Zustand
12.4.4 Fonctionnalités avancées de Zustand
12.5 Application de la gestion d'état global à une application de liste de tâches
12.5.1 Installation de Zustand
12.5.2 Création d'un magasin
12.5.3 Utilisation du magasin

Chapitre 13 : Utilisation des fonctions de routage avec React Router

13.1 Comprendre les méthodes de routage
13.1.1 SPA et RSE
13.1.2 MPA et SSR
13.1.3 React et React Router
13.2 Utilisation de React Router
13.2.1 Installation de React Router
13.2.2 Création d'un composant de routage
13.2.3 Spécification de l'étendue du routage
13.2.4 Établissement d'un itinéraire
13.3 Utilisation des fonctionnalités de React Router
13.3.1 Routes imbriquées
13.3.2 Itinéraires d'aménagement
13.3.3 Préfixe de route
13.3.4 Segments dynamiques
13.3.5 Segments optionnels
13.3.6 Splat
13.3.7 Définition des métadonnées du document (React 19 et versions ultérieures)
13.4 Utilisation de la fonction de navigation
13.4.1 Déplacement via des liens
13.4.2 Routage programmatique

Chapitre 14 Techniques de communication et de traitement asynchrones des données

14.1 Concepts de base de la communication de données
14.1.1 HTTP et méthodes
14.1.2 API
14.2 Création d'un serveur API avec Node.js
14.2.1 Exécution du serveur API
14.2.2 Vérification du code du serveur API
14.3 Communication de données avec l'API Fetch
14.3.1 Grammaire de base
14.3.2 Comment utiliser les méthodes HTTP
14.3.3 Utilisation dans React
14.4 Communication de données avec Axios
14.4.1 Installation de la bibliothèque Axios et de la grammaire de base
14.4.2 Comment utiliser les méthodes HTTP
14.4.3 Utilisation dans React
14.5 Analyse approfondie des communications de données
14.5.1 Configuration des données initiales
14.5.2 Traitement sécurisé des données de réponse
14.5.3 Définition des conditions d'erreur et gestion des erreurs
14.5.4 Définition et gestion des états de chargement
14.5.5 Annulation d'une demande de données
14.5.6 Utilisation de hooks personnalisés : la méthode Fetch de l’API
14.5.7 Utilisation des hooks personnalisés : la méthode Axios
14.6 Approfondissement du traitement asynchrone des données
14.6.1 Écrire un exemple de base
14.6.2 Gestion des données asynchrones avec le hook useTransition
14.6.3 Gestion des données asynchrones avec le hook useActionState
14.6.4 Gestion des données asynchrones avec le hook useFormStatus
14.6.5 Gestion des données asynchrones avec le hook useOptimistic
14.6.6 Utilisation du hook use (React 19 et versions ultérieures)
14.6.7 Meilleure utilisation du hook use (React 19 et versions ultérieures)

Projet du chapitre 15 : Créer son propre blog

15.1 Présentation de l'application Blog
15.1.1 Interface utilisateur de l'application
15.1.2 Structure du dossier du projet
15.2 Configuration de l'interface utilisateur
15.2.1 Échafaudage
15.2.2 Routage
15.2.3 Écriture HTML
15.2.4 Écriture de CSS
15.2.5 Séparation des composants
15.3 Mise en œuvre de la fonction d'authentification
15.3.1 Exécution du serveur API backend
15.3.2 Comprendre les fonctionnalités d'authentification
15.3.3 Implémentation de la fonction d'authentification
15.3.4 Gestion des branches de la zone d'en-tête
15.3.5 Maintien de l'authentification après une actualisation
15.3.6 Configuration du contrôle d'accès page par page
15.3.7 Inclure une valeur de jeton d'accès dans une requête
15.4 Implémentation des fonctions CRUD
15.4.1 Implémentation de la fonction d'écriture
15.4.2 Implémentation de la fonction d'affichage de la liste des articles
15.4.3 Mise en place d'une page de détails de publication
15.4.4 Mise en œuvre de la fonctionnalité Articles similaires
15.4.5 Mise en œuvre de la fonction de recherche
15.4.6 Fonctionnalité ajoutée : Gestion de l’expiration des jetons
15.4.7 Ajout : Gestion des erreurs
15.5 Déploiement
Bâtiment 15.5.1
15.5.2 Déploiement avec Netlify