{"product_id":"110282","title":"React Hook en action ","description":"\u003ccenter\u003e\u003cdiv style=\"text-align:center\"\u003e\u003cimg src=\"https:\/\/tmgdisk01.cafe24.com\/images\/vs\/4172\/sv\/3jYEEJtrlqWXUBJO2uDR2AS4AgR7oN.png?v=1765098737\" style=\"max-width:100%;max-height:10px\"\u003e\u003c\/div\u003e\u003c\/center\u003e\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\u003ccenter\u003e\n\n\u003cdiv style=\"width:95%\"\u003e\n\n\u003cdiv style=\"text-align:center;font-size:30px;font-weight:bolder;line-height:1.6em\"\u003e React Hook en action \u003c\/div\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003cdiv style=\"border-bottom:1px;border-bottom-style:dotted;border-color:;padding-bottom:20px\"\u003e\u003ccenter\u003e\u003ctable align=\"center\" width=\"100%\"\u003e\u003ctbody style=\"border:0px\"\u003e\n\n\u003ctr\u003e\u003ctd align=\"center\" style=\"line-height:1.2em;text-align:center;font-size:18px;color:black;font-weight:bold;padding-bottom:20px;\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\n\n\u003ctr\u003e\u003ctd style=\"text-align:center\"\u003e\u003cimg src=\"https:\/\/image.yes24.com\/goods\/125606405\/XL\" style=\"max-width:100%;height:auto\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\n\n\n\u003c\/tbody\u003e\u003c\/table\u003e\u003c\/center\u003e\u003c\/div\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003cdiv style=\"width:95%;{split_style6}padding-top:20px;padding-bottom:20px\"\u003e\n\n\u003cdiv style=\"text-align:left;font-size:16px;font-weight:bold;padding-bottom:20px\"\u003e Description \u003c\/div\u003e\n\n\u003cdiv style=\"text-align:left;word-break:break-all;font-size:14px;line-height:1.6em;\"\u003e\n\n\u003cdiv\u003e\u003ch5\u003e \u003cb\u003eIntroduction au livre\u003c\/b\u003e\n\u003c\/h5\u003e\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cdiv\u003e\u003cdiv\u003e \u003cb\u003eUn guide complet sur l'utilisation des REACT HOOKS pour écrire du code systématique et maintenable !\u003cbr\u003e Apprenons étape par étape les concepts et les utilisations des React Hooks grâce à de nombreux exemples de code et diverses illustrations !\u003c\/b\u003e\u003cbr\u003e \u003cbr\u003eLes Hooks React sont des fonctions JavaScript conçues pour réutiliser et partager facilement des fonctionnalités entre plusieurs composants React. Ils permettent de décomposer les composants en fonctions plus petites, de gérer l'état et les effets de bord, et d'exploiter les fonctionnalités de React sans utiliser de classes.\u003cbr\u003e De plus, vous pouvez bénéficier de tous ces avantages sans réorganiser la hiérarchie de vos composants.\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e Ce livre vous apprend à écrire rapidement des composants React réutilisables à l'aide de hooks.\u003cbr\u003e Nous commencerons par écrire du code de composant à l'aide de hooks, puis nous implémenterons une application de réservation de ressources qui démontre la gestion des effets secondaires, notamment la gestion de l'état local, la gestion de l'état de l'application et le chargement des données. \u003cbr\u003eL'annexe spéciale de l'édition coréenne, intitulée « Comment modifier l'application d'exemple pour appliquer React 18 », explique quelles parties du code source original doivent être modifiées pour être conformes à React 18.\u003cbr\u003e\n\u003c\/div\u003e\u003c\/div\u003e\n\u003cdiv\u003e\u003cul\u003e\u003cli\u003e Vous pouvez consulter un aperçu du contenu du livre.\u003cbr\u003e \u003cspan\u003eAperçu\u003c\/span\u003e\n\n\u003c\/li\u003e\u003c\/ul\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cbr\u003e\u003cdiv\u003e\u003ch5\u003e \u003cb\u003eindice\u003c\/b\u003e\n\u003c\/h5\u003e\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cdiv\u003e \u003cb\u003e[Partie 1] Guide complet des hooks React et du mode de concurrence\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e \u003cb\u003eChapitre 1 : React évolue\u003c\/b\u003e\u003cbr\u003e 1.1 Qu'est-ce que React ?\u003cbr\u003e __1.1.1 Création d'interfaces utilisateur à partir de composants\u003cbr\u003e 1.1.2 Synchronisation de l'état et de l'interface utilisateur\u003cbr\u003e __1.1.3 Comprendre les types de composants\u003cbr\u003e 1.2 Nouvelles fonctionnalités de React\u003cbr\u003e 1.3 Les hooks React peuvent ajouter un état aux composants fonctionnels.\u003cbr\u003e 1.3.1 Composants de fonctions avec état : écrivez moins de code, organisez-le mieux\u003cbr\u003e __1.3.2 Hooks personnalisés : Réutilisation du code simplifiée\u003cbr\u003e 1.3.3 Points d'extension tiers fournissant des fonctionnalités préconfigurées et éprouvées\u003cbr\u003e 1.4 Meilleure expérience utilisateur grâce au rendu simultané et au suspense\u003cbr\u003e __1.4.1 Rendu simultané\u003cbr\u003e __1.4.2 Suspense \u003cbr\u003e1.5 Nouveau canal de publication de code de React\u003cbr\u003e 1.6 Public cible de ce livre\u003cbr\u003e À partir de la version 1.7\u003cbr\u003e 1.8 Résumé\u003cbr\u003e\u003cbr\u003e \u003cb\u003eChapitre 2 : Gestion de l’état des composants avec le hook useState\u003c\/b\u003e\u003cbr\u003e 2.1 Configuration de l'application de gestion des réservations\u003cbr\u003e __2.1.1 Création d'une structure d'application avec create-react-app\u003cbr\u003e __2.1.2 Modification de quatre fichiers principaux\u003cbr\u003e __2.1.3 Ajout des fichiers de base de données requis par l'application\u003cbr\u003e __2.1.4 Création d'un composant de page et du fichier UserPicker.js\u003cbr\u003e 2.2 Stockage, utilisation et définition des valeurs à l'aide de useState\u003cbr\u003e __2.2.1 L'interface utilisateur ne change pas même lorsqu'une nouvelle valeur est attribuée à une variable.\u003cbr\u003e __2.2.2 L'appel à useState renvoie une valeur et une fonction de mise à jour.\u003cbr\u003e __2.2.3 L'appel de la fonction de mise à jour remplace la valeur précédente.\u003cbr\u003e __2.2.4 Passage d'une fonction à useState avec des valeurs initiales\u003cbr\u003e __2.2.5 Référence à l'état précédent lors de la définition d'un nouvel état\u003cbr\u003e 2.3 Appeler useState plusieurs fois pour gérer plusieurs valeurs\u003cbr\u003e __2.3.1 Définition d'un état à l'aide d'une liste déroulante\u003cbr\u003e __2.3.2 Définition du statut à l'aide de cases à cocher \u003cbr\u003e2.4 Retour sur le concept de composant fonctionnel\u003cbr\u003e 2.5 Résumé\u003cbr\u003e\u003cbr\u003e \u003cb\u003eChapitre 3 : Gestion de l’état des composants à l’aide du hook useReducer\u003c\/b\u003e\u003cbr\u003e 3.1 Mise à jour de plusieurs valeurs d'état en réponse à un seul événement\u003cbr\u003e 3.1.1 Interrompre les utilisateurs par des changements d'état imprévisibles\u003cbr\u003e 3.1.2 Maintenir l'attention de l'utilisateur grâce à des changements d'état prévisibles\u003cbr\u003e 3.2 Gestion d'états plus complexes avec useReducer\u003cbr\u003e 3.2.1 Mise à jour de l'état à l'aide d'actions et de réducteurs prédéfinis\u003cbr\u003e 3.2.2 Création d'un réducteur pour le composant BookablesList\u003cbr\u003e 3.2.3 Accès à l'état du composant et envoi d'actions à l'aide de useReducer\u003cbr\u003e 3.3 Création d'un état initial à l'aide d'une fonction\u003cbr\u003e __3.3.1 Présentation du composant WeekPicker\u003cbr\u003e 3.3.2 Création de fonctions utilitaires pour la gestion des dates et des semaines\u003cbr\u003e 3.3.3 Création d'un réducteur pour gérer la date du composant\u003cbr\u003e __3.3.4 Passage d'une fonction d'initialisation au hook useReducer\u003cbr\u003e 3.3.5 Modification de la page de réservation pour utiliser le sélecteur de semaine \u003cbr\u003e3.4 Réexamen du concept de réducteur d'utilisation\u003cbr\u003e 3.5 Résumé\u003cbr\u003e\u003cbr\u003e \u003cb\u003eChapitre 4 : Utilisation des effets secondaires\u003c\/b\u003e\u003cbr\u003e 4.1 Découverte de l'API useEffect avec un exemple simple\u003cbr\u003e 4.1.1 Effets secondaires d'exécution après chaque rendu\u003cbr\u003e 4.1.2 Les effets ne s'exécutent que lorsqu'un composant est monté.\u003cbr\u003e 4.1.3 Retourner une fonction pour nettoyer les effets secondaires\u003cbr\u003e 4.1.4 Contrôle du moment d'exécution des effets par la spécification des dépendances\u003cbr\u003e __4.1.5 Résumé de la manière d'appeler le hook useEffect\u003cbr\u003e __4.1.6 Appelez useLayoutEffect pour exécuter un effet avant que le navigateur ne redessine l'écran.\u003cbr\u003e 4.2 Lecture des données\u003cbr\u003e 4.2.1 Créer un nouveau fichier db.json\u003cbr\u003e 4.2.2 Configuration d'un serveur JSON\u003cbr\u003e __4.2.3 Lecture des données dans le hook useEffect\u003cbr\u003e 4.2.4 Utilisation de async et await\u003cbr\u003e 4.3 Lecture des données destinées au composant BookablesList\u003cbr\u003e 4.3.1 Examen du processus de chargement des données\u003cbr\u003e 4.3.2 Modification du réducteur pour gérer les états de chargement et d'erreur\u003cbr\u003e 4.3.3 Création d'une fonction auxiliaire pour charger les données \u003cbr\u003e4.3.4 Chargement des ressources réservables\u003cbr\u003e 4.4 Résumé\u003cbr\u003e\u003cbr\u003e \u003cb\u003eChapitre 5 : Gestion de l’état des composants avec le hook useRef\u003c\/b\u003e\u003cbr\u003e 5.1 Comment mettre à jour l'état sans déclencher un nouveau rendu\u003cbr\u003e 5.1.1 Comparaison de useState et useRef lors de la mise à jour des valeurs d'état\u003cbr\u003e __5.1.2 Appel de useRef\u003cbr\u003e 5.2 Stockage de l'identifiant du minuteur à l'aide d'un objet de référence\u003cbr\u003e 5.3 Gestion des références aux éléments DOM\u003cbr\u003e 5.3.1 Mise en évidence d'un élément en réponse à un événement\u003cbr\u003e 5.3.2 Gestion des zones de texte à l'aide d'objets de référence\u003cbr\u003e 5.4 Résumé\u003cbr\u003e\u003cbr\u003e \u003cb\u003eChapitre 6 : Gestion de l’état de l’application\u003c\/b\u003e\u003cbr\u003e 6.1 Transmission d'un état partagé aux composants enfants\u003cbr\u003e __6.1.1 Comment un parent transmet un état à son enfant en définissant ses propriétés\u003cbr\u003e __6.1.2 Réception de l'état du composant parent via les props\u003cbr\u003e 6.1.3 Réception d'une fonction de mise à jour en tant que propriété du parent\u003cbr\u003e 6.2 Décomposition des composants en éléments plus petits\u003cbr\u003e 6.2.1 Affichage des composants dans le cadre d'une application plus vaste \u003cbr\u003e6.2.2 Organisation de plusieurs composants au sein de l'interface utilisateur d'une page\u003cbr\u003e __6.2.3 Création d'un composant BookableDetails\u003cbr\u003e 6.3 Partage d'état et répartition avec useReducer\u003cbr\u003e 6.3.1 Gestion de l'état dans le composant BookablesView\u003cbr\u003e 6.3.2 Suppression des actions des réducteurs\u003cbr\u003e 6.3.3 Réception de l'état et de l'envoi depuis le composant BookablesList\u003cbr\u003e 6.4 Partage des valeurs d'état et des fonctions de mise à jour obtenues à partir de useState\u003cbr\u003e 6.4.1 Gestion des ressources réservables sélectionnées dans le composant BookablesView\u003cbr\u003e 6.4.2 Transmission des ressources réservables et des fonctions de mise à jour au composant BookablesList\u003cbr\u003e 6.5 Passer une fonction à useCallback pour éviter la redéfinition de la fonction de rappel\u003cbr\u003e 6.5.1 Utilisation de fonctions que nous passons via les props\u003cbr\u003e 6.5.2 Maintien de l'identité de la fonction à l'aide du hook useCallback\u003cbr\u003e 6.6 Résumé\u003cbr\u003e\u003cbr\u003e \u003cb\u003eChapitre 7 : Gestion de l’état avec useMemo\u003c\/b\u003e\u003cbr\u003e 7.1 Brisez le cœur du chef en criant « O, shortcake ! »\u003cbr\u003e __7.1.1 Générer des anagrammes avec des algorithmes coûteux \u003cbr\u003e7.1.2 Comment éviter les appels de fonction en double\u003cbr\u003e 7.2 Mémorisation des appels de fonctions coûteux avec useMemo\u003cbr\u003e 7.3 Configuration des composants de la page de réservation\u003cbr\u003e __7.3.1 Gestion des ressources réservables sélectionnées à l'aide de useState\u003cbr\u003e __7.3.2 Gestion des états et réservations sélectionnés à l'aide de useReducer et useState\u003cbr\u003e 7.4 Création d'une grille de réservation efficace à l'aide de useMemo\u003cbr\u003e 7.4.1 Création d'une grille de sessions et de dates\u003cbr\u003e 7.4.2 Créer une requête pour une réservation existante\u003cbr\u003e 7.4.3 Fourniture de la fonction de chargement de données getBookings\u003cbr\u003e __7.4.4 Création d'un composant BookingsGrid et appel de useMemo\u003cbr\u003e 7.4.5 Gestion des conflits de réponse lors de la lecture de données à l'aide de useEffect\u003cbr\u003e 7.5 Résumé\u003cbr\u003e\u003cbr\u003e \u003cb\u003eChapitre 8 : Gestion de l’état avec l’API Context\u003c\/b\u003e\u003cbr\u003e 8.1 Lorsque vous avez besoin d'un état stocké très haut dans l'arbre des composants\u003cbr\u003e 8.1.1 Affichage d'un message d'aide lors du premier chargement d'une page\u003cbr\u003e 8.1.2 Affichage des informations de réservation lorsqu'un visiteur sélectionne une réservation \u003cbr\u003e8.1.3 Affichage d'un bouton Modifier pour les réservations créées par l'utilisateur : Problème\u003cbr\u003e 8.1.4 Affichage d'un bouton Modifier pour les réservations créées par l'utilisateur : Solution\u003cbr\u003e 8.2 Utilisation de fournisseurs personnalisés et de contextes multiples\u003cbr\u003e 8.2.1 Définition d'un objet comme valeur pour un fournisseur de contexte\u003cbr\u003e 8.2.2 Transfert d'état vers un fournisseur personnalisé\u003cbr\u003e 8.2.3 Utilisation de plusieurs contextes\u003cbr\u003e 8.2.4 Spécification des valeurs par défaut pour les contextes\u003cbr\u003e 8.3 Résumé\u003cbr\u003e\u003cbr\u003e \u003cb\u003eChapitre 9 : Création de hooks personnalisés\u003c\/b\u003e\u003cbr\u003e 9.1 Extraction de fonctionnalités dans des hooks personnalisés\u003cbr\u003e 9.1.1 Identification des fonctionnalités partageables\u003cbr\u003e __9.1.2 Définition de hooks personnalisés en dehors du composant\u003cbr\u003e __9.1.3 Appel d'un hook personnalisé à partir d'un hook personnalisé\u003cbr\u003e 9.2 Respectez les règles de l'hameçon\u003cbr\u003e 9.2.1 Appel des hooks uniquement au niveau supérieur\u003cbr\u003e 9.2.2 Appel des hooks uniquement à l'intérieur des fonctions React\u003cbr\u003e __9.2.3 Utilisation du plugin ESLint pour appliquer les règles de hook\u003cbr\u003e 9.3 Autres exemples d'extraction de hooks personnalisés\u003cbr\u003e __9.3.1 Obtention de la taille de la fenêtre à l'aide du hook useWindowSize \u003cbr\u003e__9.3.2 Définition et lecture des valeurs à l'aide du hook useLocalStorage\u003cbr\u003e 9.4 Utilisation des valeurs de contexte à l'aide de hooks personnalisés\u003cbr\u003e 9.5 Encapsulation de la lecture des données avec des hooks personnalisés\u003cbr\u003e __9.5.1 Création d'un hook useFetch\u003cbr\u003e 9.5.2 Utilisation des données, de l'état et des valeurs d'erreur renvoyées par useFetch\u003cbr\u003e __9.5.3 Création d'un hook plus spécialisé pour la lecture des données : useBookings\u003cbr\u003e 9.6 Résumé\u003cbr\u003e\u003cbr\u003e \u003cb\u003eChapitre 10 : Utilisation des hooks tiers\u003c\/b\u003e\u003cbr\u003e 10.1 Accéder à l'état d'une URL avec React Router\u003cbr\u003e __10.1.1 Configuration du chemin à inclure\u003cbr\u003e __10.1.2 Ajout d'itinéraires imbriqués à la page Bookables\u003cbr\u003e __10.1.3 Accès aux paramètres d'URL à l'aide du hook useParams\u003cbr\u003e __10.1.4 Navigation à l'aide du hook useNavigate\u003cbr\u003e 10.2 Obtention et définition des paramètres de recherche de la chaîne de requête\u003cbr\u003e 10.2.1 Récupération des paramètres de recherche à partir de la chaîne de requête\u003cbr\u003e __10.2.2 Définition de la chaîne de requête\u003cbr\u003e 10.3 Optimisation de la lecture des données avec les requêtes React\u003cbr\u003e __10.3.1 Introduction aux requêtes React \u003cbr\u003e__10.3.2 Rendre les composants accessibles au client de requêtes React\u003cbr\u003e __10.3.3 Lecture des données à l'aide de useQuery\u003cbr\u003e 10.3.4 Comment accéder aux données du cache de requêtes\u003cbr\u003e __10.3.5 Mise à jour de l'état du serveur à l'aide de useMutation\u003cbr\u003e 10.4 Résumé\u003cbr\u003e\u003cbr\u003e \u003cb\u003e[Partie 2] Chargement asynchrone des composants et des données à l'aide de limites de suspense et d'erreur\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e \u003cb\u003eChapitre 11 : Découpage du code avec suspense\u003c\/b\u003e\u003cbr\u003e 11.1 Importation dynamique de code à l'aide de la fonction d'importation\u003cbr\u003e __11.1.1 Configuration d'une page Web pour charger JavaScript lorsqu'on clique sur un bouton\u003cbr\u003e __11.1.2 Utilisation des exportations par défaut et nommées\u003cbr\u003e __11.1.3 Chargement de JavaScript à l'aide d'importations statiques\u003cbr\u003e __11.1.4 Chargement dynamique de JavaScript par appel de la fonction d'importation\u003cbr\u003e 11.2 Importation dynamique de composants à l'aide de Lazy et Suspense\u003cbr\u003e __11.2.1 Conversion d'un composant en composant paresseux à l'aide de la fonction lazy \u003cbr\u003e__11.2.2 Spécification du contenu de repli à l'aide du composant Suspense\u003cbr\u003e 11.2.3 Comprendre le fonctionnement conjoint du chargement différé et du suspense\u003cbr\u003e __11.2.4 Division des applications par chemin\u003cbr\u003e 11.3 Détection des erreurs à l'aide de limites d'erreur\u003cbr\u003e __11.3.1 Examen des exemples de limites d'erreur fournis par la documentation React\u003cbr\u003e __11.3.2 Créer nos propres limites d'erreur\u003cbr\u003e __11.3.3 Récupération des erreurs\u003cbr\u003e 11.4 Résumé\u003cbr\u003e\u003cbr\u003e \u003cb\u003eChapitre 12 : Intégration de la lecture des données et du suspense\u003c\/b\u003e\u003cbr\u003e 12.1 Lecture des données et suspense\u003cbr\u003e 12.1.1 Mise à jour des promesses pour inclure l'État\u003cbr\u003e 12.1.2 Intégration du suspense à l'aide d'états de promesse\u003cbr\u003e 12.1.3 Lecture des données aussi rapide que possible\u003cbr\u003e __12.1.4 Lecture de nouvelles données\u003cbr\u003e __12.1.5 Récupération des erreurs\u003cbr\u003e __12.1.6 Consultez la documentation React\u003cbr\u003e 12.2 Comment utiliser conjointement les requêtes React, le suspense et les limites d'erreur\u003cbr\u003e 12.3 Chargement d'images avec suspense\u003cbr\u003e __12.3.1 Fourniture d'une solution de repli pendant le chargement d'images à l'aide de requêtes React et de Suspense \u003cbr\u003e__12.3.2 Comment précharger des images ou des données à l'aide de requêtes React\u003cbr\u003e 12.4 Résumé\u003cbr\u003e\u003cbr\u003e \u003cb\u003eChapitre 13 : Exercices et expérimentations avec useTransition, useDeferredValue et SuspenseList\u003c\/b\u003e\u003cbr\u003e 13.1 Fluidifier les transitions d'état\u003cbr\u003e __13.1.1 Éviter les états de repli avec useTransition\u003cbr\u003e 13.1.2 Fournir un retour d'information à l'utilisateur via isPending\u003cbr\u003e __13.1.3 Intégration des composants et transitions communs\u003cbr\u003e __13.1.4 Conservation des valeurs précédentes avec useDeferredValue\u003cbr\u003e 13.2 Utilisation de SuspenseList pour gérer plusieurs solutions de repli\u003cbr\u003e 13.2.1 Acquisition et affichage de données provenant de sources multiples\u003cbr\u003e __13.2.2 Contrôle de plusieurs solutions de repli avec SuspenseList\u003cbr\u003e 13.3 React 18 et le mode de concurrence\u003cbr\u003e 13.4 Résumé\u003cbr\u003e\u003cbr\u003e \u003cb\u003eAnnexe spéciale pour l'édition coréenne | Modification de l'application exemple pour l'adapter à React 18\u003c\/b\u003e\u003cbr\u003e A.1 Modifier le fichier package.json\u003cbr\u003e A.2 Modification de la partie d'importation JSON\u003cbr\u003e A.3 Modification de la partie de démarrage de l'application\u003cbr\u003e A.4 Supprimer les éléments instables\u003cbr\u003e A.5 Modifications liées au routage\u003cbr\u003e A.6 Résolution du problème de la liste d'attente (solution de contournement) \u003cbr\u003e__A.6.1 Comment exécuter le code original tel quel\u003c\/div\u003e\n\u003cdiv\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cbr\u003e\u003cdiv\u003e\u003ch5\u003e \u003cb\u003eImage détaillée\u003c\/b\u003e \u003c\/h5\u003e\u003c\/div\u003e\n\u003cdiv\u003e\u003cdiv\u003e\u003cimg src=\"https:\/\/image.yes24.com\/momo\/TopCate4453\/MidCate008\/445270433.jpg\" border=\"0\" alt=\"Image détaillée 1\"\u003e\u003c\/div\u003e\u003c\/div\u003e\n\u003cbr\u003e\u003cdiv\u003e\u003ch5\u003e \u003cb\u003eAvis de l'éditeur\u003c\/b\u003e\n\u003c\/h5\u003e\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cdiv\u003e \u003cb\u003e│ Ce que ce livre aborde │\u003c\/b\u003e\u003cbr\u003e - Comment créer un composant fonctionnel utilisant les fonctionnalités de React\u003cbr\u003e - Comment gérer l'état local, l'état partagé et l'état de l'application\u003cbr\u003e - Comment utiliser les hooks intégrés, les hooks personnalisés et les hooks tiers\u003cbr\u003e - Comment charger, mettre à jour et mettre en cache des données à l'aide de requêtes React\u003cbr\u003e - Comment améliorer le chargement des pages et des données grâce au fractionnement du code et aux composants React Suspense\u003cbr\u003e\u003cbr\u003e \u003cb\u003e│ Public cible de ce livre │\u003c\/b\u003e\u003cbr\u003e Tout développeur ayant quelques connaissances en JavaScript et en développement web, et ayant appris les bases du développement React, peut lire ceci.\u003cbr\u003e Ce livre vous aidera à mieux comprendre les hooks et à apprendre à écrire vos propres hooks personnalisés pour rendre vos programmes front-end plus modulaires.\u003cbr\u003e\u003cbr\u003e \u003cb\u003e│ Structure de ce livre │\u003c\/b\u003e \u003cbr\u003eLa première partie présente la syntaxe et l'utilisation des hooks React intégrés à React.\u003cbr\u003e Nous vous montrerons également comment créer vos propres hooks personnalisés et tirer le meilleur parti des hooks tiers fournis par d'autres bibliothèques React existantes.\u003cbr\u003e\u003cbr\u003e La partie 2 explique comment charger plus efficacement le code des composants dans les applications plus volumineuses et comment utiliser le composant Suspense et les limites d'erreur pour configurer une interface utilisateur de secours pendant le chargement des ressources.\u003cbr\u003e Ensuite, nous examinerons les API de concurrence que nous utilisons pour intégrer le chargement des données et Suspense, et gérer les transitions d'état.\u003cbr\u003e\u003cbr\u003e \u003cb\u003e[Note de l'auteur]\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e En tant que professeur de lycée et programmeur, j'ai eu le plaisir de développer des applications qui soutiennent l'enseignement, l'apprentissage et l'organisation au sein des établissements scolaires. \u003cbr\u003eEn étant à l'écoute des besoins des élèves, des enseignants et du personnel au quotidien, nous avons pu collaborer avec eux pour créer des applications et des outils intuitifs qui facilitent la planification, la communication, la compréhension et le jeu.\u003cbr\u003e J'ai créé de tout, des applications de quiz et des jeux de différences écrits en JavaScript aux applications de planification de cours et de gestion des ressources utilisant jQuery et des modèles.\u003cbr\u003e Depuis, le département des sciences de l'école souhaite un moyen de commander du matériel pour les cours, l'équipe de direction souhaite un moyen de communiquer les annonces au personnel et les techniciens en TIC souhaitent un moyen pour le personnel de signaler et de gérer les problèmes logiciels et matériels. \u003cbr\u003eQu’en est-il d’une application de gestion des places pour les élèves, d’un système de gestion de contenu (SGC) pour les actualités du site web de l’école, d’un calendrier personnalisé, d’une feuille de route interactive pour les heures de service ou d’un journal sportif ? Tous ces logiciels présentaient une apparence et une ergonomie cohérentes.\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e Bien que chaque projet ait ses propres exigences, il y avait beaucoup de points communs, et des méthodes similaires pouvaient être utilisées dans plusieurs applications.\u003cbr\u003e Pour accélérer ce processus, je suis passé de JavaScript côté serveur à JavaScript côté client en utilisant Node.js, Express, Handlebars, Backbone et Marionette.\u003cbr\u003e La plupart du temps, cela fonctionnait bien, mais il était parfois difficile de modifier l'application en fonction de l'évolution des besoins.\u003cbr\u003e En particulier, le flux de données entre le modèle, la vue et le contrôleur n'était pas toujours fluide. \u003cbr\u003eLes utilisateurs étaient satisfaits, mais je voyais les problèmes sous-jacents dans le code, et je savais qu'à un moment donné, je devrais revenir en arrière et démêler les nœuds.\u003cbr\u003e Puis j'ai découvert React et tous mes problèmes ont été résolus ! Bien sûr, ce n'était pas une solution parfaite, mais le modèle de composants, de propriétés, d'état et de rendu automatique de React m'a davantage séduit que celui des autres bibliothèques.\u003cbr\u003e J'ai converti une à une les applications existantes en React.\u003cbr\u003e À chaque transformation, l'application devient plus simple, plus facile à comprendre et plus facile à maintenir.\u003cbr\u003e J'ai pu réutiliser des composants communs, ce qui m'a permis de modifier rapidement le code et d'ajouter de nouvelles fonctionnalités en toute confiance.\u003cbr\u003e Bien que je ne sois pas un fanatique de React (je respecte la diversité des frameworks), je suis définitivement un converti, et j'ai apprécié mon expérience en tant que développeur React et les retours des utilisateurs sur mes applications React.\u003cbr\u003e \u003cbr\u003eL'utilisation de React Hooks a permis à mon code de franchir une nouvelle étape positive en termes de simplicité.\u003cbr\u003e Le code auparavant dispersé dans les méthodes de cycle de vie des composants de classe peut désormais être regroupé dans des points d'extension personnalisés, à l'intérieur ou à l'extérieur des composants fonctionnels.\u003cbr\u003e Vous pouvez facilement isoler, maintenir et partager le code de fonctions spécifiques, telles que la définition des titres de documents, l'accès au stockage local, la gestion des valeurs de contexte, la mesure de la taille des éléments à l'écran, l'abonnement à des services et la lecture de données.\u003cbr\u003e Il est également devenu plus facile de connecter des fonctionnalités provenant de bibliothèques existantes telles que React Router, Redux, React Query et React Spring.\u003cbr\u003e Les hooks React vous offrent une nouvelle façon d'appréhender les composants React.\u003cbr\u003e Il y a quelques petits pièges à éviter au début, mais je pense que ce changement de mentalité est assurément une bonne chose.\u003cbr\u003e \u003cbr\u003eLe passage aux hooks représente un changement fondamental dans le fonctionnement futur de React.\u003cbr\u003e Le mode de concurrence (rendu concurrent dans React 18) deviendra la nouvelle norme, permettant une gestion du temps optimisée où le rendu ne bloque pas le thread principal et où les modifications d'état prioritaires, comme les entrées utilisateur, peuvent être rendues immédiatement pendant que d'autres composants sont en cours de construction.\u003cbr\u003e L'hydratation sélective permettra à React de ne charger que le code du composant absolument nécessaire aux interactions avec l'utilisateur, et l'API Suspense permettra aux développeurs de spécifier plus précisément l'état de chargement lors du chargement du code et des ressources.\u003cbr\u003e\u003cbr\u003e L'équipe React se concentre sur la création d'excellentes expériences de développement qui permettent aux développeurs de créer d'excellentes expériences utilisateur.\u003cbr\u003e D'autres changements continueront d'intervenir et de meilleures pratiques continueront d'émerger. \u003cbr\u003eJ'espère que ce livre vous aidera à comprendre les changements actuels et à vous préparer aux changements de React qui se profilent progressivement à l'horizon.\u003cbr\u003e\u003cbr\u003e\u003cbr\u003e \u003cb\u003e[Note du traducteur]\u003c\/b\u003e\u003cbr\u003e\u003cbr\u003e Avec l'introduction des composants fonctionnels et des hooks dans React, diverses bibliothèques tierces ont commencé à fournir des hooks, et les utilisateurs se sont rendu compte que l'utilisation conjointe de hooks et de composants fonctionnels permettait de créer des applications beaucoup plus concises, composables et faciles à maintenir que les composants basés sur des classes. C'est pourquoi les hooks et les composants fonctionnels sont aujourd'hui largement utilisés.\u003cbr\u003e Par exemple, Zustand et Jotai, qui sont des bibliothèques de gestion d'état React populaires actuellement, fournissent toutes deux des hooks.\u003cbr\u003e Par conséquent, pour apprendre le développement React, il est nécessaire d'apprendre systématiquement à gérer les hooks. \u003cbr\u003eCependant, la plupart des ouvrages sur React traitent encore en détail des composants de classe, expliquent la gestion du cycle de vie des composants par le biais de méthodes de classe plutôt que de hooks, et expliquent souvent brièvement les hooks React.\u003cbr\u003e\u003cbr\u003e Ce livre couvre en détail les différentes fonctionnalités de React, notamment les hooks.\u003cbr\u003e Les développeurs ayant une certaine connaissance de JavaScript et du développement web, et ayant appris les bases du développement React, pourront mieux comprendre les hooks grâce à ce livre et écrire leurs propres hooks personnalisés afin de modulariser davantage les programmes front-end.\u003cbr\u003e \u003cbr\u003eAvant tout, il fournit une explication visuelle détaillée du fonctionnement des composants fonctionnels React et de la manière de séparer chaque fonction d'un composant fonctionnel en hooks grâce à de riches illustrations, ce qui vous permet de comprendre plus facilement la relation entre les composants et les hooks, ainsi que la manière de séparer les fonctions communes des composants que vous avez écrits en hooks.\u003cbr\u003e Et une fois que vous aurez bien compris le fonctionnement des hooks, vous pourrez plus facilement comprendre et utiliser le fonctionnement des composants et des hooks tiers lorsque vous utiliserez les hooks fournis par de nouvelles bibliothèques tierces. \u003cbr\u003eMême pour les développeurs front-end peu familiers avec React, ce guide explique en détail, illustrations à l'appui, comment les différentes parties des composants de classe se transforment en composants fonctionnels et en hooks. Il détaille pas à pas les diverses fonctions nécessaires à la création d'une application web avec les composants fonctionnels React, comme la gestion de l'état des composants via le hook `useState`, le partage de l'état entre plusieurs composants grâce à `useReducer` et le partage de références avec le hook `useRef`. Il est également utile aux débutants en React souhaitant acquérir les bases du langage.\u003cbr\u003e J'espère que ce livre sera utile aux programmeurs React qui utilisent les hooks. \u003cbr\u003e\n\n\u003c\/div\u003e\n\u003cdiv\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003cdiv style=\"width:95%;padding-top:20px;padding-bottom:20px\"\u003e\n\n\u003cdiv style=\"text-align:left;font-size:16px;font-weight:bold;padding-bottom:20px\"\u003e SPÉCIFICATIONS DES PRODUITS \u003c\/div\u003e\n\n\u003cdiv style=\"text-align:left;font-size:14px;line-height:1.6em;\"\u003e\n\n\u003cdiv style=\"width:100%;margin-bottom:5px;line-height:1.6em;font-size:14px\"\u003e - \u003cstrong\u003eDate d'émission :\u003c\/strong\u003e 29 mars 2024\u003c\/div\u003e\n\n\u003cdiv style=\"width:100%;margin-bottom:5px;line-height:1.6em;font-size:14px\"\u003e \u003cstrong\u003eNombre de pages, poids, dimensions :\u003c\/strong\u003e 432 pages | 812 g | 185 × 240 × 21 mm\u003c\/div\u003e\n\n\u003cdiv style=\"width:100%;margin-bottom:5px;line-height:1.6em;font-size:14px\"\u003e - \u003cstrong\u003eISBN13 :\u003c\/strong\u003e 9791189909611\u003c\/div\u003e\n\n\u003cdiv style=\"width:100%;margin-bottom:5px;line-height:1.6em;font-size:14px\"\u003e - \u003cstrong\u003eISBN10 :\u003c\/strong\u003e 1189909618 \u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\n\u003c\/div\u003e\n\n\u003ccenter\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003ccenter\u003e\u003ctable\u003e\u003ctr\u003e\u003ctd style=\"height:10px\"\u003e\u003c\/td\u003e\u003c\/tr\u003e\u003c\/table\u003e\u003c\/center\u003e\n\n\u003cspan\u003e\u003c\/span\u003e\n\n\u003c\/center\u003e\n\n\n\u003c\/center\u003e","brand":"LIBRAIRIE COREENNE","offers":[{"title":"Default Title","offer_id":43893724184618,"sku":"110282","price":41.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0683\/2750\/5962\/files\/f901032e08dbc1a95e1987ab555f78c3.jpg?v=1765413453","url":"https:\/\/librairie.coreenne.fr\/products\/110282","provider":"LIBRAIRIE COREENNE","version":"1.0","type":"link"}