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 1. Création d'applications

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

React est un framework de développement étonnamment adaptable. Les développeurs l'utilisent pour créer de grandes applications à page unique (SPA) à forte teneur en JavaScript ou pour construire des plug-ins étonnamment petits. Tu peux l'utiliser pour intégrer du code à l'intérieur d'une application Rails ou générer un site web riche en contenu.

Dans ce chapitre, nous examinons les différentes façons de créer une application React. Nous nous penchons également sur certains des outils les plus précieux que tu pourrais vouloir ajouter à ton cycle de développement. Peu de gens créent aujourd'hui leurs projets JavaScript en partant de zéro. Le faire est un processus fastidieux, qui implique une quantité inconfortable de bricolage et de configuration. La bonne nouvelle, c'est que tu peux utiliser un outil pour générer le code dont tu as besoin dans presque tous les cas.

Faisons un tour d'horizon des nombreuses façons de commencer ton parcours React, en commençant par celle qui est la plus fréquemment utilisée :create-react-app.

1.1 Générer une application simple

Problème

Les projets React représentent un véritable défi lorsqu'il s'agit de les créer et de les configurer à partir de zéro. Non seulement il y a de nombreux choix de conception à faire - quelles bibliothèques inclure, quels outils utiliser, quelles fonctionnalités ...