book

Livre de cuisine React

by David Griffiths, Dawn Griffiths

November 2024

Intermediate to advanced

512 pages

12h 7m

French

O'Reilly Media, Inc.

Book available

Read now

Unlock full access

Conventions utilisées dans ce livreUtiliser des exemples de codeApprentissage en ligne O'ReillyComment nous contacterRemerciements
1.1. Générer une application simple1.2. Créer des applications riches en contenu avec Gatsby1.3. Créer des applications universelles avec Razzle1.4. Gérer le code du serveur et du client avec Next.js1.5. Créer une petite application avec Preact1.6. Construire des bibliothèques avec nwb1.7. Ajouter React à Rails avec Webpacker1.8. Créer des éléments personnalisés avec Preact1.9. Utiliser Storybook pour le développement de composants1.10. Teste ton code dans un navigateur avec Cypress
2.1. Créer des interfaces avec des itinéraires réactifs2.2. Déplacer l'état dans les itinéraires2.3. Utiliser MemoryRouter pour les tests unitaires2.4. Utiliser un prompt pour les confirmations de sortie de page.2.5. Créer des transitions avec le groupe de transition de React.2.6. Créer des itinéraires sécurisés
3.1. Utiliser des réducteurs pour gérer des états complexes3.2. Créer une fonction d'annulation3.3. Créer et valider des formulaires3.4. Mesurer le temps avec une horloge3.5. Surveiller l'état en ligne3.6. Gérer l'état global avec Redux3.7. Survivre aux recharges de pages avec Redux Persist3.8. Calculer l'état dérivé avec Reselect
4.1. Construire un gestionnaire d'erreurs centralisé4.2. Créer un guide d'aide interactif4.3. Utiliser des réducteurs pour les interactions complexes4.4. Ajouter une interaction avec le clavier4.5. Utiliser Markdown pour un contenu riche4.6. Animer avec les classes CSS4.7. Animer avec React Animation4.8. Animer des infographies avec TweenOne
5.1. Convertir les appels Network+ en crochets5.2. Rafraîchissement automatique avec des compteurs d'état5.3. Annuler les demandes de Network+ à l'aide de jetons5.4. Passer des appels Network+ avec l'intergiciel Redux5.5. Se connecter à GraphQL5.6. Réduire la charge du réseau grâce à des demandes débitées.
6.1. Utiliser la conception matérielle avec Material-UI6.2. Créer une interface utilisateur simple avec React Bootstrap6.3. Visualiser des ensembles de données avec la fenêtre React.6.4. Créer des dialogues réactifs avec Material-UI6.5. Construire une console d'administration avec React Admin6.6. Pas de designer ? Utilise l'interface utilisateur sémantique
7.1. Sécuriser les demandes, pas les itinéraires7.2. S'authentifier avec des jetons physiques7.3. Activer HTTPS7.4. S'authentifier avec les empreintes digitales7.5. Utiliser des logins de confirmation7.6. Utiliser l'authentification à facteur unique7.7. Test sur un appareil Android7.8. Vérifier la sécurité avec ESlint7.9. Rendre les formulaires de connexion conviviaux pour les navigateurs
8.1. Utilise la bibliothèque de test de React.8.2. Utiliser Storybook pour les tests de rendu8.3. Test sans serveur avec Cypress8.4. Utiliser Cypress pour les tests hors ligne8.5. Tester dans un navigateur avec Selenium8.6. Tester les visuels inter-navigateurs avec ImageMagick8.7. Ajouter une console aux navigateurs mobiles8.8. Supprimer le caractère aléatoire des tests8.9. Voyage dans le temps
9.1. Utiliser des points de repère9.2. Appliquer des rôles, des alts et des titres9.3. Vérifier l'accessibilité avec ESlint9.4. Utiliser les DevTools d'Axe au moment de l'exécution9.5. Automatiser les tests de navigateur avec Cypress Axe9.6. Ajout de boutons "Skip" (Sauter)9.7. Ajouter des régions de saut9.8. Capturer la portée dans les modales9.9. Créer un lecteur de pages avec l'API vocale

10.1. Utilise les outils de performance du navigateur10.2. Suivi du rendu avec Profiler10.3. Créer des tests unitaires pour Profiler10.4. Mesurer le temps avec précision10.5. Réduis ton application avec le découpage du code10.6. Combiner des promesses de réseau10.7. Utiliser le rendu côté serveur10.8. Utiliser Web Vitals
11.1. Créer des travailleurs de service avec Workbox11.2. Construire une PWA avec Create React App11.3. Mise en cache de ressources tierces11.4. Recharger automatiquement les travailleurs11.5. Ajouter des notifications11.6. Effectuer des modifications hors ligne avec la synchronisation en arrière-plan11.7. Ajouter une interface d'installation personnalisée11.8. Fournir des réponses hors ligne

Content preview from Livre de cuisine React

Chapitre 3. Gestion de l'État

Cet ouvrage a été traduit à l'aide de l'IA. Tes réactions et tes commentaires sont les bienvenus : translation-feedback@oreilly.com

Lorsque nous gérons l'état dans React, nous devons stocker des données, mais nous enregistrons également des dépendances de données. Les dépendances sont intrinsèques à la façon dont React fonctionne. Elles permettent à React de mettre à jour la page de manière efficace et uniquement lorsque c'est nécessaire.

La gestion des dépendances de données est donc la clé de la gestion de l'état dans React. Tu verras tout au long de ce chapitre que la plupart des outils et des techniques que nous utilisons servent à nous assurer que nous gérons efficacement les dépendances.

Un concept clé dans les recettes suivantes est un réducteur de données. Un réducteur est simplement une fonction qui reçoit un objet unique ou un tableau, puis renvoie une copie modifiée. Ce concept simple est ce qui se cache derrière une grande partie de la gestion de l'état dans React. Nous verrons comment React utilise les fonctions de réducteur de manière native et comment nous pouvons utiliser la bibliothèque Redux pour gérer les données à l'échelle de l'application avec des réducteurs.

Nous allons également nous pencher sur les fonctions de sélection. Celles-ci nous permettent de creuser dans l'état renvoyé par les réducteurs. Les sélecteurs nous aident à ignorer les données non pertinentes et, ce faisant, ils améliorent considérablement les performances ...