Chapitre 00 : Connaissances essentielles pour les développeurs front-end
_0.1 Comment fonctionne le Web
__0.1.1 Client et serveur
__0.1.2 Flux de requêtes et de réponses
Vérifiez le résultat avec le code d'état __0.1.3
_0.2 Rôles fondamentaux de HTML, CSS et JavaScript
__0.2.1 HTML : Responsable de la structure du contenu
CSS 0.2.2 : Responsable de la mise en forme du contenu
__0.2.3 JavaScript : Responsable du fonctionnement des pages web
_0.3 Normes Web et accessibilité
__0.3.1 Que sont les normes du Web ?
__0.3.2 Qu'est-ce que l'accessibilité Web ?
_0.4 Optimisations du rendu et des performances du navigateur
0.4.1 Comprendre le processus de rendu du navigateur
__0.4.2 Différence entre le reflow et le repaint
0.4.3 Facteurs affectant la performance
_0.5 Environnement de développement et flux de travail
__0.5.1 Outils de développement essentiels
Système d'automatisation 0.5.2 pour une qualité optimale
__0.5.3 Outils de compilation, transpilation et regroupement
_0.6 Tendances et sensibilités modernes du développement front-end
__0.6.1 Conception adaptative
__0.6.2 Principes de conception UI/UX
__0.6.3 Derniers mots-clés front-end
_Achèvement de l'apprentissage
_Problèmes pratiques

[NIVEAU 1] Première rencontre avec React

Chapitre 1 : Préparation de l’environnement de développement React
1.1 Installation de React sous Windows
__1.1.1 Installation de Node.js
__1.1.2 Installation de VSCode
1.2 Configuration de React sur macOS
__1.2.1 Installation de Node.js
1.2.2 Installation de VSCode et configuration du dossier du projet
_1.3 Configuration de VSCode
__1.3.1 Configuration d'un espace de travail dans VSCode
__1.3.2 Installation de l'extension
__1.3.3 Modification du terminal par défaut : Windows
1.3.4 Modifier la taille des tabulations de 4 à 2 lors de la saisie de code
__1.3.5 Activer la sauvegarde automatique

Chapitre 2 : Création d'un projet React
2.1 Création d'un projet avec Bit
2.2 Organisation du projet
2.3 Installation des extensions Chrome pour le développement React
_Achèvement de l'apprentissage
_Problèmes pratiques

[NIVEAU 2] Apprendre les bases de React

Chapitre 3 Composants React
3.1 Comprendre les composants React
3.2 Examen de la structure des composants
_3.3 Qu'est-ce que JSX ?
_3.4 Comment les composants doivent-ils être affichés ?
3.5 Création d'un projet et configuration d'écrans de base avec HTML
3.6 Remplacement par des composants React
3.7 Écriture d'un composant
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 4 Accessoires
_4.1 Comprendre les accessoires
_4.2 Essai des accessoires
__4.2.1 Ajout d'une propriété clé non dupliquée aux éléments répétés
_4.3 Essayer plusieurs accessoires
4.3.1 Utilisation de plusieurs propriétés avec affectation par déstructuration
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 5 Gestion des événements React
5.1 Comprendre la gestion des événements React
5.2 Passage d'une fonction au gestionnaire d'événements onClick
_5.3 Quelles étaient les différences entre FrontComp et BackComp ?
__5.3.1 La fonction preventDefault() qui bloque le comportement par défaut lors du traitement d'un événement d'une balise
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 6 Modularisation des composants
6.1 La nécessité de la modularisation des composants
6.2 Exportation des composants avec l'option d'exportation par défaut
6.3 Importation de composants avec l'importation
_Achèvement de l'apprentissage
_Problèmes pratiques

Statut du chapitre 7
7.1 Vérification de l'état
_7.2 Essayez d'utiliser le statut
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 8 Style et image
8.1 Comment appliquer des styles dans React
8.2 Comment insérer une image
8.3 Écriture d'un fichier CSS
8.4 Application du CSS et des images
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 9 : Transmission des valeurs du formulaire
_9.1 Envoi des valeurs du formulaire
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 10 Comparaison superficielle
_10.1 Comprendre les comparaisons superficielles et profondes
10.2 Pratiquer la comparaison superficielle
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 11 Routeurs
11.1 Découvrir votre routeur
_11.2 Création d'un projet et installation de React Router DOM
_11.3 Essai de routage
11.4 Comprendre le composant de sortie
_11.5 Création d'un composant à utiliser dans une mise en page commune avec le composant Outlet
_11.6 Comprendre les crochets de routeur
_11.7 Essai des crochets de défonceuse
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 12 Cycle de vie
12.1 Comprendre le cycle de vie
_12.2 Cycle de vie des composants de classe
_12.3 Composants fonctionnels et le hook useEffect
_12.4 Communication avec un fichier JSON local
_12.5 Communication avec les API externes
__12.5.1 Jetez un œil à randomuser.me
_Achèvement de l'apprentissage
_Problèmes pratiques

[NIVEAU 3] Hooks React

Chapitre 13 : Points d’accroche pour l’optimisation des performances
_13.1 Création d'un projet
_13.2 Comprendre le hook useRef
_13.3 Comprendre le hook useMemo
_13.4 Comprendre le hook useCallback
_13.5 Comprendre le hook useId
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 14 Points d'ancrage pour la gestion d'état global
_14.1 Création d'un projet
_14.2 Comprendre le hook useReducer
_14.3 Comprendre le hook useContext
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 15 : Points d’extension pour les fonctionnalités avancées
_15.1 Création d'un projet
_15.2 Comprendre l'utilisation d'Optimistic Hook
_15.3 Comprendre le hook useActionState
_15.4 Comprendre le hook useFormStatus
_Achèvement de l'apprentissage
_Problèmes pratiques

[NIVEAU 4] Écosystème React

Chapitre 16 : Boîte à outils Redux
_16.1 Découverte de la boîte à outils Redux
_16.2 Architecture du kit d'outils Redux
_16.3 Création d'un projet
_16.4 Apprendre les bases du kit d'outils Redux
_16.5 Création d'une application simple de gestion des tâches
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 17 Stand principal
17.1 Découverte du stand principal
17.2 Apprentissage des bases de l'utilisation du support principal
_17.3 Création d'une application simple de gestion des présences
__17.3.1 Middleware de journalisation
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 18 Firebase
_18.1 Découverte de Firebase
_18.2 Premiers pas avec Firebase
_18.3 Essai de la base de données Firestore
18.3.1 Création d'une base de données Firestore
__18.3.2 Création du projet et paramètres de base
__18.3.3 Test de connexion et d'entrée
18.3.4 Tableau d'affichage de gestion des informations des membres
18.4 Essai d'une base de données en temps réel
18.4.1 Création d'une base de données en temps réel
__18.4.2 Création d'un projet et configuration des paramètres de base
__18.4.3 Création de fonctions CRUD
__18.4.4 Création d'un écouteur
__18.4.5 Création d'une conversation en temps réel
_18.5 Essai de stockage
__18.5.1 Création d'un espace de stockage
__18.5.2 Création d'un projet et configuration des paramètres de base
__18.5.3 Implémentation de la fonction de téléchargement de fichiers
__18.5.4 Implémentation des fonctions de liste et de suppression de fichiers
_Achèvement de l'apprentissage
_Problèmes pratiques

[NIVEAU 5] Projet React

Chapitre 19 : Création d’un tableau d’affichage 1 (Utilisation de tableaux d’objets)
_19.1 Création de l'écran par défaut du tableau d'affichage après la création d'un projet
__19.1.1 Création d'un écran par défaut pour un forum en HTML
__19.1.2 Création d'un composant d'écran de base pour un tableau d'affichage
__19.1.3 Réflexion du composant créé dans le composant App
_19.2 Affichage d'une liste de messages
__19.2.1 Modification du composant App
__19.2.2 Modification du composant ArticleList
_19.3 Changement d'écran
19.3.1 Examen et modification de la structure des composants de l'application
__19.3.2 Modification des composants NavList et NavView
_19.4 Ajout d'une fonction d'écriture
_19.5 Ajout d'une fonction de visualisation
_19.6 Ajout d'une fonction de suppression
_19.7 Ajout d'une fonction de correction
__19.7.1 Étape de modification 1 : Chargement du contenu dans le formulaire de modification
__19.7.2 Étape 2 de la révision : Traitement de la révision
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 20 Création d'un tableau d'affichage 2 (Utilisation de l'API REST)
_20.1 Création d'un projet
__20.1.1 Création de la structure de base de l'application
_20.2 Émission d'une clé API
_20.3 Implémentation de la fonction de liste
_20.4 Implémentation de la fonction d'écriture
_20.5 Implémentation de la fonction d'affichage
_20.6 Mise en œuvre de la fonction de modification
_20.7 Implémentation de la fonction de suppression
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 21 : Implémentation des commentaires à l’aide d’une fenêtre modale avec stockage local
_21.1 Création d'un projet
_21.2 Création d'une interface utilisateur de base et implémentation de fonctions
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 22 : Création d’un tableau de bord avec Justand
_22.1 Création d'un projet
_22.2 Création d'une interface utilisateur de base et implémentation de ses fonctions
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 23 : Créer KakaoTalk avec Firebase
_23.1 Création d'un projet
_23.2 Création d'une interface utilisateur de base et implémentation de fonctions
_Achèvement de l'apprentissage
_Problèmes pratiques

Chapitre 24 : Déploiement sur GitHub Pages
_24.1 Création d'une distribution d'application React
_24.2 Résolution des erreurs de routage lors du déploiement sur un serveur web
_24.3 Déploiement sur GitHub Pages
_Achèvement de l'apprentissage
_Problèmes pratiques

※ Annexe bonus PDF « Apprendre la grammaire JavaScript de base pour React » fournie

★ Illustrations et diagrammes riches + 125 problèmes pratiques + 117 résumés clés !
★ Des cours d'apprentissage systématiques et par niveau, ainsi que des projets directement applicables au travail pratique !
★ L'intégralité du processus, de la création de l'interface utilisateur à la connexion de la base de données et au déploiement sur GitHub, est incluse !

À l'ère du développement à l'instinct, React est le dernier havre de paix du front-end.
Vous n'êtes pas obligé de tout faire vous-même, mais vous devez être capable d'analyser et de modifier le code généré par l'IA.
La capacité à comprendre la structure est également requise.
Vous devez donc apprendre React correctement.
Le développement frontend moderne nécessite React.
Alors, comment bien apprendre React ? Cela nécessite un équilibre parfait entre théorie, exemples et projets concrets.
Ce livre vous aidera à progresser en tant que développeur front-end React grâce à trois fonctionnalités clés :

_Tout d'abord, une théorie solide qui couvre tout, des bases du développement web aux dernières tendances.
Ce livre ne se contente pas de couvrir la syntaxe de React, mais explique en détail tout, des principes de fonctionnement de base du web (client/serveur, HTTP) aux dernières tendances front-end (SPA, CSR/SSR/SSG, etc.).
Ces connaissances de base vous aideront à identifier et à résoudre plus rapidement les causes profondes des problèmes dans la pratique, et elles vous permettront de développer un sens pratique en expliquant des concepts complexes à l'aide d'analogies faciles à comprendre.
De ce fait, vous pouvez appréhender React dans le flux global du développement web et construire des bases solides centrées sur des principes.

Deuxièmement, un apprentissage pratique qui vous permet de découvrir le concept des composants et leur réutilisabilité.
Au-delà du simple suivi du code, nous vous guidons tout au long du processus de création d'un écran en HTML, puis de sa conversion en composant React, vous permettant ainsi de découvrir par vous-même les avantages et la réutilisabilité des composants.
Vous développerez votre capacité à appliquer les concepts fondamentaux appris dans chaque chapitre à des mini-projets pratiques tels que des tableaux d'affichage, des tableaux de scores et des applications de chat.
Ce parcours d'apprentissage systématique et pratique vous aide à maîtriser naturellement la pensée par composants qui est au cœur de React.

Troisièmement, l'expansion vers des écosystèmes pratiques tels que Redux, Justand et Firebase.
Au-delà de React lui-même, nous explorons Redux Toolkit et Zustand, des bibliothèques de gestion d'état global essentielles pour une utilisation pratique.
De plus, vous apprendrez à intégrer Firebase, ce qui vous permettra de mettre en œuvre des fonctionnalités de base de données (Firestore, Realtime Database) et de stockage utilisables sans serveur backend séparé.
Cela vous permet d'aller au-delà du simple développement d'interfaces utilisateur et de créer des applications de haute qualité proches des services du monde réel, élargissant ainsi votre compréhension de l'écosystème React dans son ensemble.

★ Connaissances de base en développement web pour les débutants en React
★ 40 exercices essentiels pour bien utiliser React
★ Nous vous enseignerons le développement React avec 4 technologies clés.〈/B〉

Pour parvenir à cette progression, ce livre présente systématiquement des théories allant des fondamentaux du web au cœur de React, et offre une expérience d'apprentissage approfondie à travers plus de 40 exemples pratiques et riches, incluant divers projets concrets tels que des forums, des tableaux de scores et des applications de chat en temps réel similaires à KakaoTalk.
Nous vous aidons également à devenir un développeur React compétent en combinant théorie et pratique à travers les quatre compétences clés suivantes :

_[Chapitre 1] Composants et hooks React
Apprenez React, une bibliothèque permettant de créer efficacement des interfaces utilisateur web et des composants réutilisables.
En exploitant différentes techniques comme useState et useEffect, vous pouvez développer des fonctionnalités essentielles du développement React moderne, telles que la gestion d'état, le contrôle du cycle de vie et l'optimisation des performances.

_[2e capitaine] Déroute
Apprenez à gérer les routes et à effectuer des transitions entre les écrans comme si vous aviez plusieurs pages dans une application monopage (SPA) en tirant parti de la bibliothèque react-router-dom.
Cela nous permet de fournir des expériences utilisateur essentielles pour les applications web du monde réel, telles que la gestion des URL et la fonctionnalité d'historique du navigateur.

_[3e capitaine] Bibliothèque de gestion du statut global
Il s'agit d'une technologie essentielle pour gérer efficacement les données partagées par plusieurs composants dans des applications complexes.
Redux Toolkit et Zustand vous apprendront à gérer l'état de manière centralisée et systématique.

_[4e capitaine] Base de feu
Firebase est une plateforme de services backend sans serveur fournie par Google. Elle vous permet d'intégrer des fonctionnalités backend puissantes, telles que des bases de données, la communication en temps réel et le stockage de fichiers, à votre application React sans avoir à créer vos propres serveurs.

★ Nous proposons un service de questions-réponses via les salons Discord et KakaoTalk.
★ Fournit le code nécessaire à la pratique
★ Nous fournissons également un PDF bonus intitulé « Apprendre la grammaire JavaScript de base pour React ».
★ Si vous avez des questions concernant la pratique et le code, veuillez laisser un commentaire dans le ticket GitHub.

Nous ferons en sorte que vous maîtrisiez bien React.
Quand on étudie, il y a des moments où l'on a envie de parler à quelqu'un plutôt que de s'inquiéter seul.
Si vous rencontrez des difficultés lors de votre progression ou si vous souhaitez approfondir certains points, n'hésitez pas à partager vos opinions sur Discord, dans le salon de discussion ouvert KakaoTalk ou dans la section des problèmes de GitHub.

Lorsque vous utilisez plusieurs langues dans votre travail, la grammaire peut parfois devenir complexe.
C’est pourquoi nous proposons le livre « Apprendre la grammaire JavaScript de base pour React » au format PDF gratuit.
Il fournit véritablement presque tout ce dont vous avez besoin pour React.
Nous vous soutenons dans votre progression !

★ Découvrez les incroyables bienfaits de la lecture de ce livre !〈/B〉

En étudiant assidûment ce livre, vous acquerrez les sept compétences fondamentales suivantes :

_1.
Principes fondamentaux du Web et capacité à construire des environnements front-end modernes : Comprendre les principes fondamentaux du Web et être capable de construire parfaitement un environnement de développement front-end moderne tel que Node.js, VSCode et ESLint.

_2.
Possibilité de mettre en œuvre une interface utilisateur dynamique à l'aide de la syntaxe de base de React : vous pouvez construire une interface utilisateur React dynamique à l'aide de composants, de la syntaxe JSX, des props et des hooks useState.

_3.
Capacités d'interaction et de gestion des données entre les composants : modularisation des composants, implémentation de gestionnaires d'événements et de fonctionnalités de soumission de formulaires, et gestion des interactions parent-enfant flexibles.

_4.
Compréhension du rendu du navigateur et des compétences d'optimisation des performances : Comprendre le processus de rendu du navigateur et utiliser useMemo et useCallback pour éviter les calculs inutiles et la recréation de fonctions et optimiser les performances.

_5.
Capacité à concevoir des structures de routage et de gestion d'état avancées : implémenter le routage d'URL avec react-router-dom et concevoir une logique d'état complexe et des structures de partage d'état global à l'aide de useReducer et useContext.

_6.
Capacité à gérer un état global professionnel et à implémenter des fonctionnalités UX avancées : gérer un état global professionnel avec Redux Toolkit ou ZooStand, et implémenter des fonctionnalités avancées pour améliorer l’expérience utilisateur grâce à des hooks d’extension tels que useOptimistic.

_7.
Capacité à créer et déployer des projets concrets (expérience full-stack) : vous pouvez créer des forums de discussion basés sur des tableaux d’objets, des forums de discussion intégrés à une API REST et des applications en temps réel utilisant Firebase, et finalement les déployer sur GitHub Pages.

★ La recette ultime qui relie la théorie et la pratique
★ Présentation des 40 exercices abordés dans ce livre〈/B〉
Voici une liste d'exemples traités dans ce livre :
Chaque exemple vous enseignera des compétences pratiques en développement React.

[PARTIE 1] Première rencontre avec React

01.
hello-react-project : Un exemple de base de création et d’exécution d’un projet React utilisant Vite, incluant une fonction de compteur numérique (Chapitre 2).

[PARTIE 2] Apprendre les bases de React

02.
react01-basic (configuration d'écran de base avec HTML) : Ceci est un exemple de configuration de l'interface utilisateur de base d'un forum (liste des technologies front-end/back-end et formulaire de saisie) en utilisant uniquement du HTML pur avant d'utiliser React (chapitre 3).

03.
react01-basic (à remplacer par des composants React) : Ceci est un exemple montrant comment convertir une interface utilisateur de tableau d’affichage réalisée avec HTML en un composant (App.jsx), l’unité de base de React (Chapitre 3).

04.
react01-basic (Création et réutilisation de composants) : Il s'agit d'un exemple qui vous apprend à séparer l'interface utilisateur du tableau d'affichage en plusieurs petits composants, tels que FrontComp, BackComp et FormComp, et à les combiner et à les réutiliser (Chapitre 3).

05.
react01-basic (Transmission de données via les props) : Ceci est un exemple de création dynamique d'une liste en transmettant des données de tableau d'un composant parent (App) à un composant enfant (FrontComp, BackComp) à l'aide des props (Chapitre 4).

06.
react01-basic (gestion des événements) : Il s'agit d'un exemple qui gère l'événement onClick lorsqu'un lien (balise 〈a〉) dans un composant est cliqué, et qui explique comment transmettre des données d'un composant enfant à un composant parent (Chapitre 5).

07.
react01-basic (Transition d'écran utilisant l'état) : Ceci est un exemple de création d'un état de mode à l'aide du hook useState et du rendu conditionnel du composant 'frontend', 'backend' ou 'entier' en fonction de la valeur de l'état (Chapitre 7).

08.
react01-basic (Application de styles et d'images) : Apprenez à styliser les composants à l'aide de styles en ligne, de fichiers CSS (className) et de diverses méthodes d'insertion d'images (importation, dossier public, URL) (Chapitre 8).

09.
react01-basic (Transmission et traitement des valeurs de formulaire) : Ceci est un exemple de réception de données de formulaire via l'écouteur d'événement onSubmit, de leur transmission au composant parent, de validation de la valeur d'entrée et de mise à jour de l'état (Chapitre 9).

10.
react01-basic (pratique de comparaison superficielle) : Comparez la différence entre la modification directe de l'état de l'objet et la création d'une copie et sa modification, et apprenez le principe de comparaison superficielle de React et les méthodes d'optimisation du rendu (Chapitre 10).

[PARTIE 3] Hooks React

11.
react02-router (exemple de routage de base) : Ceci est un exemple d’installation de react-router-dom et d’utilisation de Routes et Route pour configurer le routage de page de base tel que Home et URL incorrecte (NotFound) (Chapitre 11).

12.
react02-router (routage imbriqué utilisant Outlet) : Ceci est un exemple de placement d'un Outlet à l'intérieur d'une mise en page commune (CommonLayout) afin que différents composants enfants (LayoutIndex) soient rendus en fonction de la sous-route (Chapitre 11).

13.
react02-router (utilisation des hooks de routeur) : Ceci est un exemple qui explique comment lire et modifier les informations de l’URL actuelle avec le hook useLocation et la chaîne de requête (?mode=list&pageNum=1) avec le hook useSearchParams (Chapitre 11).

14.
react03-lifecycle (gestion du cycle de vie useEffect) : Il s’agit d’un exemple qui explique comment exécuter du code lorsqu’un composant est monté, mis à jour ou démonté en modifiant le tableau de dépendances du hook useEffect (chapitre 12).

15.
react03-lifecycle (communication avec un fichier JSON local) : récupère de manière asynchrone des données à partir d'un fichier JSON local au sein du projet à l'aide de la fonction fetch et useEffect et affiche une liste et des détails à l'écran (Chapitre 12).

16.
react03-lifecycle (Communication avec une API externe) : Ceci est un exemple de requête de données auprès d'une API externe (randomuser.me) pour obtenir une liste d'utilisateurs aléatoires et afficher des informations détaillées dans une fenêtre d'alerte lorsqu'on clique dessus (Chapitre 12).

17.
react04-hook-optimization (Stockage des valeurs et accès au DOM avec useRef) : Apprenez à utiliser useRef pour conserver les valeurs indépendamment du rendu et comment contrôler le focus en accédant directement à des éléments DOM spécifiques (entrées) (Chapitre 13).

18.
react04-hook-optimization (Optimisation des opérations avec useMemo) : Il s'agit d'un exemple de mémorisation des résultats d'une fonction coûteuse en calcul (détermination de la primalité) avec useMemo pour éviter les recalculs inutiles et améliorer les performances (Chapitre 13).

19.
react04-hook-optimization (Optimisation des fonctions avec useCallback) : Mémorise les fonctions transmises aux composants enfants avec useCallback pour éviter la recréation inutile de fonctions et le rendu des composants enfants (Chapitre 13).

20.
react04-hook-optimization (Génération d'identifiants uniques avec useId) : Couvre comment générer automatiquement des identifiants uniques et cohérents pour les éléments de formulaire (〈label〉, 〈input〉) à des fins d'accessibilité en utilisant le hook useId (Chapitre 13).

21.
react05-hook-global-state (Gestion de l'état avec useReducer) : Montre comment gérer des règles de changement d'état complexes, telles que la logique de dépôt/retrait, en dehors du composant en utilisant useReducer au lieu de useState (Chapitre 14).

22.
react05-hook-global-state (Partage de l'état global avec useContext) : Un exemple d'utilisation de useContext pour partager directement l'état du thème en mode sombre/clair entre plusieurs composants enfants sans passer de props (Chapitre 14).

23.
react06-hook-enhanced (mise à jour optimiste avec useOptimistic) : Un exemple d'amélioration de l'expérience utilisateur en reflétant immédiatement l'interface utilisateur grâce à useOptimistic sans attendre la réponse du serveur lors de l'envoi d'un message (Chapitre 15).

24.
react06-hook-enhanced (gestion de l'état du formulaire avec useActionState) : Ceci est un exemple d'utilisation de useActionState pour gérer le résultat du traitement asynchrone (succès/échec) de la soumission du formulaire (connexion) en tant qu'état et fournir un retour d'information à l'interface utilisateur (Chapitre 15).

25.
react06-hook-enhanced (Suivi de l'état de soumission du formulaire avec useFormStatus) : Un exemple de contrôle dynamique de l'interface utilisateur, comme la désactivation des boutons ou l'affichage du texte de chargement pendant la soumission d'un formulaire, à l'aide de useFormStatus (Chapitre 15).

[PARTIE 4] L'écosystème React

26.
react07-redux-toolkit (Utilisation de base de Redux Toolkit) : Utilisez createSlice et configureStore de Redux Toolkit pour créer un compteur numérique comme état global, et contrôlez l’état avec useSelector et useDispatch (Chapitre 16).

27.
react07-redux-toolkit (Application de gestion des tâches) : Implémentez des fonctions pour ajouter, compléter et supprimer des listes de tâches à l'aide de Redux Toolkit et apprenez des méthodes pratiques de gestion d'état global (Chapitre 16).

28.
react08-zustand (Zusstand Basics) : Montre comment utiliser Zustand pour créer un état global pour un compteur numérique avec une configuration minimale et l'utiliser dans un composant (Chapitre 17).

29.
react08-zustand (Application de gestion des présences) : Cette section explique comment utiliser Zustand pour gérer la liste des étudiants (ajouter, supprimer et activer/désactiver la présence) et appliquer des intergiciels (persist, devtools et logger) (Chapitre 17).

30.
react09-firestore (Forum CRUD Firebase Firestore) : Il s'agit d'un exemple de forum qui se connecte à la base de données Firestore de Firebase pour saisir (Créer), récupérer (Lire), modifier (Mettre à jour) et supprimer (Supprimer) les informations des membres (Chapitre 18).

31.
react10-realtime (CRUD de la base de données en temps réel Firebase) : Implémente les fonctions CRUD de base pour saisir, récupérer, modifier et supprimer des données en temps réel à l'aide de la base de données en temps réel de Firebase (Chapitre 18).

32.
react10-realtime (Écouteur de base de données en temps réel) : Il s'agit d'un exemple qui utilise la fonction d'écouteur onValue pour détecter les changements de données dans la base de données en temps réel et les refléter automatiquement à l'écran (Chapitre 18).

33.
react10-realtime (application de chat en temps réel) : Créez une application de chat basique qui permet à plusieurs utilisateurs de discuter simultanément, en tirant parti des capacités de synchronisation en temps réel de la base de données en temps réel (Chapitre 18).

34.
react11-storage (Firebase Storage File Upload/List) : Implémente la possibilité de télécharger des fichiers image dans un dossier spécifique à l'aide de Firebase Storage et de récupérer et supprimer la liste des fichiers enregistrés (Chapitre 18).

[PARTIE 5] Projet React

35.
project01-board-array (Tableau d'affichage utilisant un tableau d'objets) : Il s'agit d'un exemple pratique complet qui implémente toutes les fonctions CRUD (créer, lire, modifier, supprimer) d'un tableau d'affichage en utilisant uniquement useState et des tableaux d'objets React purs, sans serveur externe (Chapitre 19).

36.
project02-board-api (Forum de discussion utilisant une API REST) ​​: Il s'agit d'un exemple pratique qui met en œuvre les fonctions CRUD d'un forum en échangeant des données avec un serveur réel à l'aide d'une API REST externe et d'une fonction fetch (Chapitre 20).

37.
project03-live-comments (Fonctionnalité de commentaire utilisant le stockage local) : Implémente la création, la modification et la suppression de commentaires, ainsi que la fonctionnalité « j’aime », en utilisant l’interface utilisateur de la fenêtre modale Bootstrap et le stockage local du navigateur (Chapitre 21).

38.
project04-scoreboard (Tableau de bord utilisant JuStand) : Créez un tableau de bord qui gère les scores et les informations des joueurs à travers plusieurs composants en utilisant la bibliothèque de gestion d'état global JuStand (Chapitre 22).

39.
projet05-kakaotalk (KakaoTalk utilisant Firebase) : Créez une application de chat en temps réel avec une fonction de téléchargement de photo de profil en reliant la base de données et le stockage en temps réel de Firebase (Chapitre 23).

40.
project05-kakaotalk (Déploiement sur GitHub Pages) : Couvre le processus de construction du projet avec npm run build, la résolution des problèmes de routage (HashRouter) et le déploiement de l'application KakaoTalk terminée sur GitHub Pages (Chapitre 24).

[Note de l'auteur]〈/B〉

accueillir.
Si vous souhaitez maîtriser React mais que vous ne savez pas comment faire, vous êtes au bon endroit.
Ce livre vous guide systématiquement à travers tout ce qu'il faut savoir, des principes fondamentaux du web nécessaires avant d'apprendre React aux derniers hooks React, vous fournissant ainsi des connaissances de base solides.
Avec plus de 40 projets pratiques et variés et une multitude d'exemples concrets, vous pouvez appliquer la théorie directement à la pratique et développer vos compétences en résolution de problèmes.
Nous vous aidons également à maîtriser les technologies essentielles du développement web moderne, telles que Redux Toolkit, ZooStand et Firebase, afin de vous permettre de devenir un développeur d'applications React de haute qualité.

Ce livre explique fidèlement les principes fondamentaux et les concepts clés du web que les développeurs front-end doivent connaître avant d'écrire du code React.
En apprenant d'abord comment fonctionnent les clients et les serveurs, le rôle de HTML/CSS/JS, le processus de rendu du navigateur et les concepts fondamentaux tels que SPA, CSR, SSR et SSG, vous pouvez construire une base solide centrée sur des principes.
Ces connaissances de base vous aideront à identifier plus rapidement la cause profonde des problèmes et à créer des sites web plus efficaces et plus stables.

Dans React, la grammaire est importante, mais les concepts le sont tout autant.
Les concepts clés sont « État » et « gestion de l’État ».
Nous aborderons donc Redux Toolkit et ZooStand, utilisés pour la gestion d'état global, et nous apprendrons même l'intégration de Firebase, qui permet d'implémenter des bases de données et du stockage sans backend séparé.
Cela vous permet d'aller au-delà du simple développement d'interfaces utilisateur et de créer des applications de haute qualité proches des services du monde réel, élargissant ainsi votre compréhension de l'écosystème React dans son ensemble.

En définitive, nous l'avons conçu pour couvrir l'intégralité du processus, du développement à la mise en service effective, y compris le processus de déploiement de l'application que vous avez créée vous-même sur une page GitHub.


Pour aider nos lecteurs à répondre à leurs questions, nous avons créé un canal de questions-réponses en ligne.
Nous proposons également le document « Apprendre la grammaire JavaScript de base pour React » au format PDF gratuit.
J'espère que ce livre vous servira de tremplin pour devenir un développeur front-end compétent.