Entrée
__Pourquoi réagir ?
__Histoire de React
Les défis de Facebook en matière de développement front-end dans les années 2010
L'émergence et les limitations de BoltJS
React émerge comme une alternative à l'équipe Facebook
__Critiques et critiques de React
__React voit enfin le jour
Le présent et l'avenir de __React

Chapitre 1 : Notions essentielles de JavaScript pour le développement React

1.1 Comparaison d'équivalence en JavaScript
__1.1.1 Types de données en JavaScript
1.1.2 Différences dans la manière dont les valeurs sont stockées
__1.1.3 Une autre formule de comparaison en JavaScript, Object.is
__1.1.4 Comparaison d'équivalence dans React
__1.1.5 Résumé
1.2 Fonction
__1.2.1 Qu'est-ce qu'une fonction ?
1.2.2 Quatre façons de définir une fonction
1.2.3 Analyse de différentes fonctions
1.2.4 Éléments à prendre en compte lors de la création de fonctions
__1.2.5 Résumé
1.3 Classe
__1.3.1 Qu'est-ce qu'une classe ?
1.3.2 Relation entre les classes et les fonctions
__1.3.3 Résumé
1.4 Fermeture
1.4.1 Définition de la fermeture
__1.4.2 Portée des variables, portée
__1.4.3 Utilisation des fermetures
1.4.4 Points à noter
__1.4.5 Résumé
1.5 Comprendre les boucles d'événements et la communication asynchrone
__1.5.1 JavaScript monothread
__1.5.2 Qu'est-ce qu'une boucle d'événements ?
__1.5.3 Files d'attente de tâches et files d'attente de microtâches
__1.5.4 Résumé
1.6 Syntaxe JavaScript fréquemment utilisée dans React
__1.6.1 Affectation de déstructuration
__1.6.2 Syntaxe de déploiement
__1.6.3 Initialiseur d'objet
__1.6.4 Méthodes du prototype Array : map, filter, reduce, forEach
__1.6.5 Opérateur conditionnel ternaire
__1.6.6 Résumé
TypeScript 1.7 est indispensable, pas une option.
__1.7.1 Qu'est-ce que TypeScript ?
1.7.2 Comment utiliser TypeScript pour écrire efficacement du code React
Guide de migration TypeScript __1.7.3
__1.7.4 Résumé

Chapitre 2 : Une exploration approfondie des éléments fondamentaux de React

2.1 Qu'est-ce que JSX ?
__2.1.1 Définition de JSX
Exemple JSX __2.1.2
__2.1.3 Comment JSX est-il transformé en JavaScript ?
__2.1.4 Résumé
2.2 DOM virtuel et React Fiber
__2.2.1 Processus de rendu du DOM et du navigateur
__2.2.2 Contexte de la naissance du DOM virtuel
__2.2.3 Architecture pour le DOM virtuel, React Fiber
__2.2.4 Fibres et DOM virtuel
__2.2.5 Résumé
2.3 Composants de classe et composants fonctionnels
__2.3.1 Composants de type classe
__2.3.2 Composants fonctionnels
__2.3.3 Composants fonctionnels vs.
Composants de type classe
__2.3.4 Résumé
2.4 Comment se déroule le rendu ?
__2.4.1 Qu'est-ce que le rendu React ?
__2.4.2 Pourquoi le rendu React a-t-il lieu
__2.4.3 Processus de rendu de React
__2.4.4 Rendu et validation
__2.4.5 Examen des scénarios de rendu courants
__2.4.6 Résumé
2.5 Mémorisation pour se souvenir des opérations complexes sur les composants et les fonctions
__2.5.1 Affirmation 1 : L'optimisation prématurée est toxique ; n'ajoutez la mémoïsation que lorsque c'est absolument nécessaire.
__2.5.2 Affirmation 2 : Le processus de rendu est coûteux, alors mémorisons tout.
2.5.3 Conclusion et résumé

Chapitre 3 : Une exploration approfondie des hooks React

3.1 Exploration approfondie de tous les hooks dans React
__3.1.1 useState
__3.1.2 useEffect
__3.1.3 utiliserMemo
__3.1.4 utiliserCallback
__3.1.5 useRef
__3.1.6 utiliserContexte
__3.1.7 utiliserReducer
__3.1.8 utiliser la poignée impérative
__3.1.9 useLayoutEffect
__3.1.10 utiliserDebugValue
3.1.11 Règles de l'hameçon
__3.1.12 Résumé
3.2 Dois-je utiliser des hooks personnalisés ou des composants d'ordre supérieur ?
__3.2.1 Crochets personnalisés
3.2.2 Composants d'ordre supérieur
__3.2.3 Dois-je utiliser des hooks personnalisés ou des composants d'ordre supérieur ?
__3.2.4 Résumé

Chapitre 4 : Rendu côté serveur

4.1 Qu'est-ce que le rendu côté serveur ?
4.1.1 Le monde des applications monopages
__4.1.2 Qu'est-ce que le rendu côté serveur ?
4.1.3 Pourquoi vous devez connaître à la fois SPA et SSR
__4.1.4 Résumé
4.2 Exploration de l'API React pour le rendu côté serveur
__4.2.1 renderToString
__4.2.2 renderToStaticMarkup
__4.2.3 renduToNodeStream
__4.2.4 renderToStaticNodeStream
__4.2.5 hydrate
__4.2.6 Exemple de projet de rendu côté serveur
__4.2.7 Résumé
4.3 Présentation de Next.js
__4.3.1 Qu'est-ce que Next.js ?
__4.3.2 Premiers pas avec Next.js
4.3.3 Récupération des données
__4.3.4 Application des styles
Application de __4.3.5 _app.tsx
__4.3.6 Examen du fichier next.config.js
__4.3.7 Résumé

Chapitre 5 : React et les bibliothèques de gestion d’état

5.1 Pourquoi la gestion d'État est-elle nécessaire ?
5.1.1 Historique de la gestion d'état React
__5.1.2 Résumé
5.2 Gestion d'état avec les hooks React
5.2.1 La méthode la plus basique : useState et useReducer
5.2.2 Dépassons les limitations de l'état local : séparons l'état de useState en dehors de celui-ci.
5.2.3 Utilisation simultanée de useState et Context
5.2.4 Bibliothèques de gestion d'état : Recoil, Jotai et Zustand
__5.2.5 Résumé

Chapitre 6 : Débogage avec les outils de développement React

6.1 Que sont les outils de développement React ?
6.2 Installation des outils de développement React
6.3 Utilisation des outils de développement React
6.3.1 Composants
__6.3.2 Profiler
6.4 Résumé

Chapitre 7 : Analyse des applications à l’aide des outils de développement Chrome

7.1 Que sont les outils de développement Chrome ?
7.2 Onglet Éléments
__7.2.1 Écran d'élément
__7.2.2 Informations sur l'élément
7.3 Onglet Source
7.4 Onglet Réseau
7.5 Onglet Mémoire
7.5.1 Sélection d'une instance de machine virtuelle JavaScript
__7.5.2 Instantané du tas
__7.5.3 Instrumentation d'allocation temporelle
__7.5.4 Échantillonnage d'allocation
7.6 Débogage de l'environnement Next.js
7.6.1 Exécution d'un projet Next.js en mode débogage
7.6.2 Générer du trafic vers votre serveur Next.js
__7.6.3 Identification des fuites de mémoire dans Next.js
7.7 Résumé

Chapitre 8 : Mise en place d’un environnement propice à l’écriture de code React de qualité

8.1 Analyse statique de code avec ESLint
8.1.1 Aperçu d'ESLint
__8.1.2 eslint-plugin et eslint-config
8.1.3 Création de vos propres règles ESLint
8.1.4 Points à noter
__8.1.5 Résumé
8.2 Bibliothèques de test React recommandées par l'équipe React
__8.2.1 Qu'est-ce que la bibliothèque de test React ?
8.2.2 Notions de base des tests JavaScript
8.2.3 Écriture de code de test pour les composants React
8.2.4 Test des hooks personnalisés
8.2.5 Éléments à prendre en compte avant de rédiger des tests
__8.2.6 Plusieurs autres tests méritent d'être essayés
__8.2.7 Résumé

Chapitre 9 : Création d’un environnement de développement et de déploiement avec des outils de développement React modernes

9.1 Mise en place d'un environnement de développement React avec Next.js
__9.1.1 Construction un par un sans créer d'application suivante
__9.1.2 Écriture du fichier tsconfig.json
__9.1.3 Écriture du fichier next.config.js
__9.1.4 Configuration d'ESLint et de Prettier
__9.1.5 Définition des styles
__9.1.6 Écriture du code d'application
__9.1.7 Résumé
9.2 Utilisation à 100 % de GitHub
__9.2.1 Création d'un environnement CI avec GitHub Actions
9.2.2 Utiliser des actions utiles et des applications GitHub sans les écrire soi-même
__9.2.3 Correction des failles de sécurité avec GitHub Dependabot
__9.2.4 Résumé
9.3 Déploiement d'une application React
__9.3.1 Netlify
__9.3.2 Vercel
__9.3.3 DigitalOcean
__9.3.4 Résumé
9.4 Dockerisation d'une application React
__9.4.1 Comment conteneuriser une application React
__9.4.2 Déploiement d'une image créée avec Docker
__9.4.3 Résumé

Chapitre 10 : Exploration des changements apportés à React 17 et 18

10.1 Aperçu de React 17
__10.1.1 Mise à niveau incrémentale de React
__10.1.2 Modification de la méthode de délégation d'événements
__10.1.3 L'importation de React depuis 'reac' n'est plus nécessaire : nouvelle transformation JSX
__10.1.4 Autres changements importants
__10.1.5 Résumé
10.2 Aperçu de React 18
__10.2.1 Aperçu des nouveaux hooks ajoutés
__10.2.2 react-dom/client
__10.2.3 react-dom/serveur
__10.2.4 Traitement par lots automatique
__10.2.5 Mode plus strict
__10.2.6 Amélioration de la fonctionnalité de suspense
__10.2.7 Des polyfills supplémentaires sont nécessaires en raison de l'arrêt de la prise en charge d'Internet Explorer
__10.2.8 Autres changements importants à connaître
__10.2.9 Résumé

Chapitre 11 : Next.js 13 et React 18

11.1 Apparence du répertoire d'applications
__11.1.1 Routage
11.2 Composants serveur React
11.2.1 Limitations des composants React existants et du rendu côté serveur
__11.2.2 Qu'est-ce qu'un composant serveur ?
11.2.3 Différences entre le rendu côté serveur et les composants serveur
__11.2.4 Comment fonctionne le composant serveur ?
11.3 Composants serveur React dans Next.js
__11.3.1 Introduction de la nouvelle méthode fetch et suppression des méthodes getServerSideProps, getStaticProps et getInitialProps
__11.3.2 Rendu statique et dynamique
__11.3.3 Mise en cache, mutation et revalidation
__11.3.4 Chargement progressif des pages à l'aide du streaming
11.4 Turbopack, concurrent de Webpack, fait son apparition (bêta)
11.5 Actions du serveur (alpha)
__11.5.1 action de formulaire
__11.5.2 Action de soumission du champ de saisie et de l'image
__11.5.3 Intégration avec startTransition
__11.5.4 Tâches sans mutations du serveur
__11.5.5 Éléments à prendre en compte lors de l'utilisation des actions serveur
11.6 Autres modifications
Aperçu du code de Next.js 13 (11.7)
__11.7.1 Implémentation du rendu côté serveur similaire à getServerSideProps
__11.7.2 Implémentation du rendu de page statique similaire à getStaticProps
__11.7.3 Chargement, diffusion en continu, suspense
11.8 Résumé et précautions

Chapitre 12 : Indicateurs clés du Web que tout développeur Web devrait connaître

12.1 Site Web et performances
12.2 Que sont les indicateurs Web de base ?
12.3 Peinture du pool de contenu maximal (LCP)
__12.3.1 Définition
__12.3.2 Signification
__12.3.3 Exemple
__12.3.4 Score des critères
__12.3.5 Plan d'amélioration
12.4 Délai de première entrée (FID)
__12.4.1 Définition
__12.4.2 Signification
__12.4.3 Exemple
__12.4.4 Score des critères
__12.4.5 Plan d'amélioration
12.5 Déplacement de la disposition cumulative (CLS)
__12.5.1 Définition
__12.5.2 Signification
__12.5.3 Exemple
__12.5.4 Score des critères
Plan d'amélioration 12.5.5
__12.5.6 Métriques non essentielles pour le Web, mais importantes pour la vérification des performances
12.6 Résumé

Chapitre 13 : Différentes façons de mesurer les performances des pages Web

13.1 Vérifier dans l'application
__13.1.1 create-react-app
__13.1.2 créer-prochaine-application
13.2 Phare de Google
__13.2.1 Google Lighthouse - Mode Exploration
__13.2.2 Google Lighthouse - Mode Durée
__13.2.3 Google Lighthouse - Instantané
13.3 Test de page Web
13.3.1 Résumé des performances
__13.3.2 Opportunités et expériences
__13.3.3 Film fixe
__13.3.4 Détails
__13.3.5 Indicateurs Web
__13.3.6 Optimisations
__13.3.7 Contenu
__13.3.8 Domaines
__13.3.9 Journal de la console
__13.3.10 Technologies détectées
__13.3.11 Traitement du thread principal
Rapport du phare du 13 mars 2012
__13.3.13 Autres
13.4 Outils de développement Chrome
13.4.1 Statistiques de performance
13.4.2 Performance
13.5 Résumé

Chapitre 14 : React et les problèmes de sécurité des pages web pour la sécurité des sites web

14.1 Script intersite (XSS) dans React
__14.1.1 propriété dangerouslySetInnerHTML
__14.1.2 Insertion directe à l'aide de useRef
__14.1.3 Comment éviter les problèmes XSS dans React
14.2 Soyez prudent avec getServerSideProps et les composants serveur.
14.3 Les valeurs de la balise 〈a〉 doivent être limitées de manière appropriée.
14.4 Configuration des en-têtes de sécurité HTTP
__14.4.1 Sécurité stricte des transports
__14.4.2 Protection contre les attaques XSS
__14.4.3 Options X-Frame
__14.4.4 Politique d'autorisation
__14.4.5 X-Content-Type-Options
__14.4.6 Politique de parrainage
__14.4.7 Politique de sécurité du contenu
__14.4.8 Configuration de l'en-tête de sécurité
__14.4.9 Vérification de l'en-tête de sécurité
14.5 Évitez d'utiliser des packages vulnérables
14,6 OWASP Top 10
14.7 Résumé

Chapitre 15 : Conclusion

15.1 Éléments à prendre en compte lors du démarrage d'un projet React
__15.1.1 Si le service est en maintenance, mettez à niveau la version de React d'au moins 16.8.6 à au plus 17.0.2.
__15.1.2 Si vous ciblez la prise en charge d'Internet Explorer 11, soyez particulièrement prudent.
__15.1.3 Prioriser les applications de rendu côté serveur
__15.1.4 N’utilisez la bibliothèque de gestion d’état que lorsque cela est absolument nécessaire.
__15.1.5 Soyez prudent lors de l'installation des bibliothèques de dépendances React
15.2 React pourrait disparaître un jour
__15.2.1 Alors, React est-il vraiment la bibliothèque parfaite ?
15.2.2 La lumière et l'obscurité de l'écosystème open source
__15.2.3 jQuery, AngularJS, React et la suite ?
15.2.4 Attitude flexible requise pour un développeur web

Ce que ce livre couvre

- Historique de React
- Concepts fondamentaux de React : JSX, composants fonctionnels/de classe, et mémorisation
- Le rendu côté serveur et les composants serveur de React
- Bibliothèque de gestion d'état pour l'écosystème React
- Débogage d'applications React
- Changements dans React 17 et 18
- Next.js 12 et 13
- Analyse des performances et des problèmes de sécurité des sites web basés sur React