[PARTIE 1] Retour sur le développement front-end

Chapitre 1 : Retour sur les composants front-end et leur développement
1.1 Pourquoi devons-nous revenir sur les composants et le processus de développement du front-end ?
1.2 État des lieux et composantes du développement web et du front-end
__1.3 Interface web initiale
__1.4 Naissance et limites des modules
__1.5 La naissance d'un fagoteur
1.6 Introduction du gestionnaire de paquets
1.7 Introduction du moteur de modèles
1.8 Programmation impérative et déclarative
____1.8.1 Développement front-end impératif
____1.8.2 Développement front-end déclaratif
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 2 : Retour sur les applications monopages
2.1 Pourquoi devrions-nous examiner les avantages des applications monopages ?
2.2 Fréquence des appels réseau
__2.3 Améliorations des performances
2.4 Amélioration de la productivité
____2.4.1 Séparation stricte des zones de développement front-end et back-end
____2.4.2 Prototypage rapide à l'aide de la programmation déclarative
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 3 : Retour sur les phases des composants d'interface utilisateur
3.1 Pourquoi devons-nous revenir sur la phase des composants d'interface utilisateur ?
3.2 État des composants d'interface utilisateur dans le développement front-end
3.3 Abstraction, interface et encapsulation des composants d'interface utilisateur
3.4 Création de composants avec JavaScript pur
3.5 Création de composants à l'aide de l'API Web Components
3.6 Comparaison des composants utilisant JavaScript pur et l'API Web Components
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 4 : Retour sur le statut et la réactivité
4.1 Pourquoi devons-nous examiner le statut et la réactivité ?
4.2 Composants d'état et de conception
____4.2.1 Interface utilisateur, Vue en charge de l'interaction
____4.2.2 Modèle responsable des données
____4.2.3 Médiateur entre le modèle et la vue
4.3 Mise en œuvre de la réactivité à l'aide de modèles de conception clés
____4.3.1 Création d'un médiateur de modèle MVC non réactif
____4.3.2 Injection de réactivité dans le modèle MVC
4.4 Comprendre le modèle de l'observateur
4.5 Modèle MVVM et réactivité
____4.5.1 Reliure à double sens et à sens unique
____4.5.2 Création d'une liste de tâches à l'aide du modèle MVVM
____4.5.3 Découverte des classeurs
____4.5.4 Création d'un classeur
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 5 : Retour sur les composants front-end et leur développement
5.1 Pourquoi devriez-vous examiner votre environnement de développement ?
5.2 Node.js et gestionnaire de versions
____5.2.1 Structure et principes de Node.js
____5.2.2 Gestionnaire de versions de nœuds
__5.3 Gestionnaire de paquets
____5.3.1 Comparaison des gestionnaires de paquets
__5.4 Monorepo
____5.4.1 Avantages des monorepos et des outils monorepos
5.5 Qualité et formatage du code
____5.5.1 Linter
____5.5.2 Formateur
____5.5.3 Analyseur statique de code
__5.6 Outils de développement React
____5.6.1 Outils de développement React
____5.6.2 Analyse de réaction
5.7 Environnement de développement React et outils de compilation
____5.7.1 bits
____5.7.2 Rsbuild
____5.7.3 Routeur React
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

[PARTIE 2] Une exploration approfondie des éléments fondamentaux de React

Chapitre 6 : Retour sur les composants JSX
6.1 Pourquoi étudier JSX
6.2 Comprendre DSL et JSX
6.3 Éléments constituant JSX
____6.3.1 Éléments JSX
____6.3.2 Attributs JSX
____6.3.3 JSXEnfants
____6.3.4 Chaînes JSX
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 7 : Révision de la grammaire de base de JSX et de la transformation JavaScript
7.1 Pourquoi devons-nous revoir la syntaxe de base de JSX et la transformation JavaScript ?
7.2 Conversion de JSX
____7.2.1 Qu'est-ce que l'exécution automatique ?
____7.2.2 Conversion de JSX avec Babel
____7.2.3 Conversion de JSX en SWC
____7.2.4 Conversion de JSX avec ESBuild
____7.2.5 React.createElement, les éléments React et le DOM virtuel
7.3 Révision de la grammaire de base de JSX
____7.3.1 Examen des littéraux de modèles et des modèles balisés
____7.3.2 JSX VS Littéraux de modèle
____7.3.3 Événement de synthèse
____7.3.4 Élément racine unique
____7.3.5 Opérateur ternaire et &&
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 8 : Refactorisation React et propriétés clés
8.1 Pourquoi envisager le rendu et le DOM virtuel ?
8.2 Composants et instances React
8.3 Rendu et re-rendu
8.4 Processus de rééquilibrage
8.5 Comparaison superficielle et optimisation du rendu
__8.6 Propriétés clés et rendu de liste
8.7 Accessoires clés et mémorisation
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 9 : Révision des règles de rendu React
__9.1 Pourquoi vous devriez revoir les règles de rendu React
__9.2 Conditions de rendu
____9.2.1 Lors du premier chargement de l'application
____9.2.2 Nouveau rendu suite à des changements d'état interne du composant
____9.2.3 Lorsque le composant parent est rendu à nouveau
____9.2.4 Lorsque la valeur du contexte change
__9.3 Malentendu concernant le rendu
____9.3.1 Composants et accessoires pour enfants
____9.3.2 Que se passe-t-il lorsque la valeur de la propriété transmise au composant change ?
9.4 Règles de rendu React
____9.4.1 Élimination des effets secondaires et garantie de l'idempotence
____9.4.2 Règles de rendu React - Maintien de l'immuabilité des valeurs transmises avec JSX
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 10 : Les props et les modèles de composants de React
10.1 Pourquoi vous devriez revoir les props et les modèles de composants de React
__10.2 Concepts de props et d'état de React
____10.2.1 Propriétés et état de React
____10.2.2 Invariance des propriétés
____10.2.3 Accessoires et attributs
__10.3 Validation du type de données des propriétés
____10.3.1 Bibliothèque prop-types pour la validation à l'exécution
____10.3.2 TypeScript pour la vérification à la compilation
__10.4 Modèle de composant utilisant des propriétés
____10.4.1 Composition et héritage des composants, et composants d'ordre supérieur
____10.4.2 Composants imbriqués et enfants, forage d'étai
____10.4.3 Modèle de rendu des accessoires
____10.4.4 Modèle d'accessoires de machine à sous
____10.4.5 Modèle de composant composé
____10.4.6 Modèles d'emplacements explicites - RFC de type d'emplacement
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 11 : État de React et traitement par lots
11.1 Pourquoi s'intéresser à l'état et au traitement par lots dans React ?
__11.2 Définition et types d'état de React
____11.2.1 États locaux et dérivés
____11.2.2 État et instantanés
____11.2.3 Immuabilité de l'état
____11.2.4 Élévation du statut
11.3 Analyse du flux de données entre les composants
____11.3.1 Flux de données unidirectionnel et liaison unidirectionnelle
____11.3.2 Flux de données bidirectionnel et liaison bidirectionnelle
__11.4 Retour sur le traitement par lots React
____11.4.1 Le concept et la nécessité du traitement par lots
____11.4.
2. Traitement par lots en mode asynchrone
____11.4.3 flushSync() de react-dom
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 12 : Retour sur les fibres, à l’origine de React
12.1 Pourquoi vous devriez reconsidérer React Fiber
__12.2 Comprendre le réconciliateur de pile React
____12.2.1 Fonctionnement du rééquilibrage de pile
____12.2.2 Limitations du rééquilibreur de pile
__12.3 Comprendre l'architecture des fibres
____12.3.1 Anatomie d'un nœud fibreux
____12.3.2 Modèle de priorité des fibres et des voies
____12.3.3 Structure arborescente des fibres : Parcours sans récursivité
____12.3.4 Double tampon et pointeurs alternatifs
____12.3.5 Architecture de la fibre et principes de la fonction de concurrence
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

[PARTIE 3] Exploration approfondie de l'utilisation des hooks React

Chapitre 13 : Révision des règles d’utilisation des hooks React
__13.1 Pourquoi vous devriez revoir les Hooks React
__13.2 Pourquoi l'appelle-t-on un crochet ?
__13.3 Des composants de classe aux composants fonctionnels
____13.3.1 La confusion liée à ce mot-clé et les difficultés de la reliure manuelle
____13.3.2 Composants d'ordre supérieur et enfer des wrappers
____13.3.3 Réutilisation de la logique à l'aide de hooks personnalisés
__13.4 Règles d'utilisation des hooks React
____13.4.1 Les hooks ne doivent être appelés que depuis le niveau supérieur
____13.4.2 Les hooks ne doivent être appelés que depuis des fonctions React
____13.4.3 Les arguments Hook doivent être immuables
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 14 : Les hooks essentiels de React
__14.1 Pourquoi vous devriez revoir les hooks React essentiels
__14.2 useState() : Le début et le cœur de la gestion d'état dans React
____14.2.1 Initialisation d'état et initialisation différée
____14.2.2 Mises à jour de statut et fonctions de mise à jour
____14.2.3 Fonctions de mise à jour et fermetures
__14.3 useEffect() : Synchronisation d'un composant avec le monde extérieur
____14.3.1 Examen de l'utilisation de useEffect() et du tableau de dépendances
____14.3.2 Nettoyage après les effets secondaires : fonction de nettoyage de useEffect()
____14.3.3 Gestion des effets secondaires : Synchronisation avec les systèmes externes
____14.3.4 useEffect() en mode strict
__14.4 useRef() : Comment mémoriser des valeurs au-delà du rendu
____14.4.1 useRef() ne provoque pas de nouveau rendu
____14.4.2 Accès direct aux éléments DOM à l'aide de useRef()
____14.4.3 forwardRef() : Comment un parent accède au DOM de l'enfant
____14.4.4 forwardRef() dans React 19
__14.5 useReducer() et React Portal
____14.5.1 Comprendre useReducer()
____14.5.2 Création d'un composant modal avec createPortal()
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 15 : Révision de la mémoïsation React
__15.1 Pourquoi vous devriez réexaminer la mémorisation React
__15.2 Optimisation du rendu à l'aide de memo()
____15.2.1 Comment utiliser la fonction mémo()
____15.2.2 Les pièges de l'optimisation prématurée
____15.2.3 Structures imbriquées et les pièges des accessoires pour enfants
__15.3 useMemo() : Mémorisation de valeur
____15.3.1 Un aperçu du fonctionnement interne de useMemo()
____15.3.2 Exemple d'optimisation des opérations à l'aide de useMemo()
__15.4 useCallback() : Mémorisation de fonction
____15.4.1 Transmission d'une fonction de rappel stable à un hook personnalisé avec useCallback()
____15.4.2 Mémorisation des propriétés avec useCallback()
____15.4.3 Utilisation de useCallback() : Faire fonctionner correctement le mécanisme de debounce
__15.5 Mémorisation automatique à l'aide du compilateur React
____15.5.1 Limites de la mémorisation manuelle
____15.5.2 Historique du développement des compilateurs
____15.5.3 Rôle et fonction du compilateur React
____15.5.4 Fonctionnement du compilateur React et son fonctionnement
____15.5.5 Le compilateur React peut-il remplacer la mémoïsation manuelle ?
____15.5.6 Essai du compilateur React
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 16 : Contexte React, limites d’erreur et suspense
__16.1 Pourquoi vous devriez revoir les contextes React, les limites d'erreur et le suspense
__16.2 Création d'applications robustes à l'aide de limites d'erreur
____16.2.1 Création d'un composant de limite d'erreur à l'aide d'un composant de classe
____16.2.2 Comprendre la propagation des erreurs
____16.2.3 Erreurs de rendu et conditions de fonctionnement aux limites d'erreur
__16.3 Partage d'état efficace à l'aide de l'API Context
____16.3.1 Qu'est-ce que le forage à étais ?
____16.3.2 Création d'un contexte
__16.4 Cas d'utilisation de l'API Context
____16.4.1 Lorsqu'une hiérarchie de composants intermédiaires est créée et que le modèle de rendu des propriétés est utilisé dans l'imbrication
____16.4.2 Amélioration grâce à l'API de contexte
__16.5 API de contexte et rendu ultérieur
____16.5.1 Mémorisation des propositions de valeur dans les fournisseurs de contexte
____16.5.2 Réduire la portée de la réinterprétation de l'impact en séparant les contextes
____16.5.3 Optimisation à l'aide du modèle de sélecteur
____16.5.4 Utilisation des composants d'ordre supérieur et de la fonction mémo( )
__16.6 Exécution d'opérations asynchrones au sein d'un composant à l'aide de Suspense
____16.6.1 Histoire et développement du suspense
____16.6.2 Limites d'erreur et suspense
____16.6.3 Mise en œuvre interne du suspense et son fonctionnement
__16.7 Lecture du contexte et des promesses à l'aide de use()
____16.7.1 Valeurs du contexte de lecture
____16.7.2 Dévoiler les résultats de la promesse
____16.7.3 Comment peut-on appeler use() dans une instruction conditionnelle ?
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 17 : Fonctionnalités de concurrence et hooks avancés de React
__17.1 Pourquoi vous devriez examiner les fonctionnalités de concurrence et les hooks profonds de React
__17.2 Cas d'utilisation de useLayoutEffect() et useInsertionEffect()
____17.2.1 Différence entre useEffect() et useLayoutEffect()
____17.2.2 Réagir au casque et utiliser InsertionEffect()
____17.2.3 Métadonnées et feuilles de style pour React 19
__17.3 Inversion de contrôle à l'aide de useImperativeHandle()
__17.4 Fonctionnalités de concurrence et transitions
____17.4.1 Sélection d'une tâche de priorité inférieure à l'aide de useTransition()
____17.4.2 Utilisation des valeurs d'état différées avec useDeferredValue()
____17.4.3 startTransition() et fonctions asynchrones
__17.5 Synchronisation de l'état externe avec useSyncExternalStore()
____17.5.1 États internes et externes
____17.5.2 useSyncExternalStore() et hiérarchisation
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

[PARTIE 4] La technologie et l'avenir de React

Chapitre 18 : Révision des modèles de rendu React
18.1 Pourquoi vous devriez revoir le modèle de rendu React
18.2 Retour sur le rendu côté client et le SSR
____18.2.1 Comprendre le rendu côté client
____18.2.2 Comprendre le rendu côté serveur
____18.2.3 Isomorphisme et processus d'hydratation dans le rendu côté serveur
____18.2.4 Analyse de la taille du bundle et next.config
__18.3 API React pour le rendu côté serveur
____18.3.1 Comprendre renderToString()
____18.3.2 renderToNodeStream() et streaming
____18.3.3 renderToPipeableStream() et rendu en flux continu
18.4 Réexamen de la génération de sites statiques et de la régénération statique incrémentale
____18.4.1 Tentative de génération de site statique dans un environnement Next.js
____18.4.2 Ajout d'une régénération statique incrémentale
__18.5 Comprendre les composants serveur React
____18.5.1 Comprendre les concepts et les fonctionnalités des composants serveur
____18.5.2 Qu'est-ce qu'un composant client ?
____18.5.3 Règles des composants serveur React
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

Chapitre 19 : Retour sur le routeur d’applications Next.js, les actions serveur et les nouveaux hooks React
__19.1 Pourquoi vous devriez examiner le routeur d'applications Next.js, les actions serveur et les nouveaux hooks React
__19.2 Utilisation de base du routeur d'application Next.js
____19.2.1 Routage et règles dans le routeur d'application
____19.2.2 Fichiers spéciaux et hiérarchie des composants
____19.2.3 Routage et disposition imbriqués
__19.3 Rendu statique et dynamique, mise en cache
____19.3.1 Rendu statique et dynamique pour les itinéraires dynamiques
____19.3.2 Rendu dynamique pour les itinéraires statiques
____19.3.3 Comprendre le cache d'itinéraire complet
____19.3.4 Comprendre le cache du routeur
____19.3.5 Mémorisation des requêtes et React.cache()
____19.3.6 Cache de données et récupération()
____19.3.7 Fourniture d'une API aux clients à l'aide de gestionnaires de routes
__19.4 Utilisation des fonctions et actions du serveur
____19.4.1 Comprendre les fonctions et les actions du serveur
____19.4.2 Fonctionnement des actions du serveur
Hooks de la version 19.5 de React 19 à utiliser avec les actions
____19.5.1 Relation entre les actions et les actions du serveur
____19.5.2 Utilisation de useActionState() et des transitions
____19.5.3 Mise en œuvre des mises à jour optimistes avec useOptimistic()
____19.5.4 Vérification de l'état du formulaire avec useFormStatus()
Récapitulatif de l'apprentissage | Rappel des mots-clés importants

★ Apprendre de manière approximative ne produira que des résultats approximatifs.
★ Pour offrir une expérience client de niveau supérieur et prévenir les problèmes potentiels à l'avance
★ Vous devez parfaitement comprendre et assimiler la philosophie et les principes du framework React.

Un développeur compétent doit aller au-delà de la simple utilisation des API et comprendre clairement le processus de rendu pour écrire un code prévisible et sans bogues.
Par conséquent, pour utiliser l'IA sans être remplacé par elle, il est indispensable de bien comprendre la structure et les principes de fonctionnement de React.
Cela vous permet d'optimiser les performances en évitant les rendus inutiles, d'améliorer la maintenabilité du code et de répondre avec souplesse aux exigences complexes et aux évolutions technologiques.
Ce livre propose un contenu approfondi destiné aux développeurs en quête d'une compréhension ultime et poussée.
J'espère que vous deviendrez un développeur chevronné qui ira au-delà de la simple connaissance de la grammaire et qui comprendra et assimilera pleinement la philosophie et les principes du framework React.

★ À l'ère de l'IA, pourquoi est-il nécessaire de comprendre 'React' en profondeur ?
★ Créez un tournant pour devenir un senior irremplaçable par l'IA !

React n'est pas une technologie unique, mais le centre d'un vaste « écosystème ».
Du rendu côté serveur avec Next.js au développement d'applications mobiles avec React Native en passant par la gestion d'état sophistiquée avec des bibliothèques comme Zustand, il s'agit de toutes des branches d'une même racine : React.
En comprenant en profondeur la philosophie et la structure fondamentales de React, vous pouvez acquérir les technologies de ce vaste écosystème beaucoup plus rapidement et avec précision, élargissant ainsi infiniment vos capacités.
Cela constitue la base la plus fiable pour évoluer du développeur « en forme de I », compétent dans une technologie spécifique, vers un talent « en forme de T » capable de créer de la valeur sur le web et les appareils mobiles.
La valeur de l'extensibilité exceptionnelle de React est différente des avantages de la courbe d'apprentissage rapide de Vue ou de la structure monolithique d'Angular.

En fin de compte, étudier React en profondeur revient à poser un solide « point d'ancrage » qui vous empêche de vous perdre au milieu des tendances technologiques en constante évolution.
Plutôt que de suivre les dernières modes en matière de grammaire ou d'API, c'est le moyen le plus fiable de développer les capacités inhérentes du développeur à concevoir des structures d'applications Web et à résoudre des problèmes.

L'ère de l'automatisation pose des questions aux développeurs.
Resterez-vous un simple exécutant, suivant les instructions des outils de programmation ? Ou deviendrez-vous un véritable architecte, maîtrisant ces outils pour créer votre propre valeur ajoutée ? Si vous aspirez à cette dernière option, ce livre vous permettra d'explorer en profondeur React et de devenir un expert incontournable en résolution de problèmes, un pionnier dans le domaine des technologies.

★ Qui a besoin de ce livre ?
★ Présentation du public cible de ce livre, commencez votre test de qualification avec 10 questions !

Ce livre s'adresse à ceux qui connaissent déjà JavaScript et React, mais qui sont curieux d'en apprendre davantage sur les principes fondamentaux de leur fonctionnement lorsqu'ils rencontrent des difficultés au travail et qui souhaitent approfondir leurs connaissances.
Si vous pouvez répondre à la plupart des 10 questions suivantes sur le développement web et React, vous êtes déjà devenu un développeur front-end indispensable qui ne sera pas remplacé par l'IA.
Malheureusement, s'il y a beaucoup de questions auxquelles vous ne connaissez pas la réponse, c'est que vous devez encore progresser un peu.
Mais ne vous inquiétez pas trop.
Car vous l'apprendrez bientôt grâce à ce livre.

- [Question 01] Quels étaient les principaux défauts de la structure MPA qui existaient encore même après l'avènement d'Ajax, et quelles méthodes d'organisation du code les développeurs front-end ont-ils utilisées pour surmonter ces défauts ?
- [Question 02] Expliquez la plus grande différence entre la programmation impérative et la programmation déclarative du point de vue des mises à jour de l'interface utilisateur.
- [Question 03] Quels sont les deux principaux aspects qui contribuent à améliorer la productivité des SPA ?
- [Question 04] Que signifient « abstraction » et « encapsulation » dans le développement de composants d'interface utilisateur, et quels sont leurs principaux objectifs ?
- [Question 05] Quelles sont les principales différences entre l'état du client et l'état du serveur, et expliquez chacune d'elles avec un exemple dans une application Web ?
- [Question 06] Quels rôles jouent la « boucle d'événements » et le « pool de threads » dans Node.js, et comment contribuent-ils au traitement asynchrone des tâches dans Node.js ?
- [Question 07] Quels sont les deux principaux avantages d'une structure monorepo par rapport à une structure polyrepo ?
- [Question 08] À quoi dois-je faire attention lorsque j'utilise l'opérateur && pour le rendu conditionnel en JSX, et quelles sont les alternatives pour éviter cela ?
- [Question 09] Que font les étapes de rendu et de validation dans le processus de rendu de React, et quelle est la principale raison pour laquelle ces deux étapes sont séparées ?
- [Question 10] Qu'est-ce que le « traitement par lots automatique » introduit dans React 18, et quels avantages apporte-t-il au développement front-end ?

* Les réponses aux [Questions] se trouvent dans l’annexe intitulée « Réponses aux 10 questions React ».

★ Pourquoi devrions-nous nous intéresser de plus près à React ?
★ Dès que vous pensez tout savoir, vous installez un micro.
★ Découvrez 19 raisons pour lesquelles vous devriez vous intéresser à la technologie React !

Ce livre couvre un large éventail d'éléments fondamentaux du développement front-end et leur évolution, guidant les lecteurs vers une vision d'ensemble.
Il explique de manière systématique les concepts fondamentaux, depuis les premières pages web statiques jusqu'à l'émergence et les avantages des applications monopages (SPA), la naissance des modules, des regroupements et des moteurs de modèles, et le changement de paradigme de la programmation impérative à la programmation déclarative.
De plus, il couvre la structure et le processus de transformation de JSX, qui est au cœur de React, les principes de l'état et des propriétés, le flux de données, le mécanisme de rendu de React et le processus de restructuration du DOM virtuel, et même les règles fondamentales de fonctionnement et d'utilisation des hooks React, de l'architecture Fiber et des fonctionnalités de concurrence, vous aidant ainsi à comprendre en profondeur les principes internes de React et à consolider vos bases techniques.


Lorsque nous présentons chaque technologie, nous expliquons également pourquoi il est pertinent de la réexaminer.
Le POURQUOI est important.
Le COMMENT n'est qu'une des nombreuses façons de s'attaquer à la cause.
Plus la réflexion s'approfondit, plus la qualité du code et des services s'améliore.
Découvrez ces 19 raisons de relire ce livre.

- Raison 01.
Pourquoi devons-nous examiner les composants front-end et leur développement ?
- Raison 02.
Pourquoi vous devriez réexaminer les avantages des applications monopages
Raison 03. Pourquoi nous devons revenir sur l'état des composants d'interface utilisateur
- Raison 04.
Pourquoi devons-nous examiner le statut et la réactivité ?
- Raison 05.
Pourquoi vous devriez revoir votre environnement de développement
Raison n° 6 : Pourquoi étudier JSX ?
- Raison 07.
Pourquoi vous devriez revoir la syntaxe de base de JSX et les transformations JavaScript
- Raison 08.
Pourquoi il est nécessaire de repenser le rendu et le DOM virtuel
- Raison 09.
Pourquoi vous devriez revoir les règles de rendu React
- Raison 10.
Pourquoi devriez-vous revoir les props et les modèles de composants de React ?
- Raison 11.
Pourquoi devriez-vous revoir l'état et le traitement par lots de React ?
- Raison 12.
Pourquoi vous devriez reconsidérer React Fiber
- Raison 13.
Pourquoi vous devriez revoir les Hooks React
- Raison 14.
Pourquoi devriez-vous revoir les hooks essentiels de React ?
- Raison 15.
Pourquoi vous devriez réexaminer la mémorisation React
- Raison 16.
Pourquoi vous devriez revoir les contextes React, les limites d'erreur et le suspense
- Raison 17.
Pourquoi vous devriez réexaminer les fonctionnalités de concurrence et les hooks profonds de React
- Raison 18.
Pourquoi vous devriez revoir les modèles de rendu React
- Raison 19.
Pourquoi vous devriez vous pencher à nouveau sur le routeur d'applications Next.js, les actions serveur et les nouveaux hooks React

★ Pour ceux qui souhaitent devenir développeur React Steel
★ Pour vous aider à faire passer vos compétences en développement front-end au niveau supérieur
★ Cinq caractéristiques sont généreusement présentées dans le livre.

Arrêtez de mémoriser la grammaire React ! Allez au-delà du simple codage et devenez un développeur compétent pour éviter d'être remplacé par l'IA.
Ce livre n'est pas un ouvrage qui enseigne toute la grammaire.
Commençons par examiner l'évolution des technologies web et expliquons pourquoi React est nécessaire.
Ensuite, nous approfondirons les concepts fondamentaux et expliquerons en détail comment ils sont appliqués en pratique, élargissant ainsi vos horizons sur React et le développement front-end web.
Voici cinq choses à retenir de React tirées de ce livre :

_Premièrement, une introduction simple et claire à la « vue d'ensemble » du développement web.
Nous aborderons l'évolution du développement web, des débuts du HTML à l'émergence de JavaScript et CSS, en passant par la naissance des modules et des outils de regroupement pour surmonter les limitations des pages complexes.
Explique la différence entre la programmation « impérative » et la programmation « déclarative » à l'aide d'une analogie simple, et montre comment une approche déclarative comme React rend le code plus concis et plus lisible.
Grâce à cela, vous pouvez naturellement comprendre la nécessité de React sans avoir à mémoriser la technologie.

Deuxièmement, il fournit une base solide pour les « technologies de base » de React.
Apprenez les bases de JSX, la syntaxe spécifique à la création d'interfaces utilisateur React, et comment les navigateurs la comprennent.
De plus, nous expliquons clairement le « DOM virtuel » et le « processus de rendu », qui sont les secrets des mises à jour d'écran efficaces de React, et nous présentons l'importance des propriétés clés qui optimisent les performances.
Vous pouvez facilement apprendre les fonctions essentielles telles que useState() (gestion des données), useEffect() (gestion des effets externes) et useRef() (conservation des valeurs indépendamment du rendu) grâce à des exemples concrets.

_Maîtriser un « environnement de développement robuste » et des « principes de conception »
Nous vous apprendrons comment fonctionne Node.js, essentiel au développement, et comment utiliser efficacement les gestionnaires de paquets tels que pnpm, npm et yarn.
Au-delà du simple dessin d'écrans, vous apprendrez à concevoir des composants d'interface utilisateur réutilisables et à appliquer des concepts orientés objet tels que l'abstraction et l'encapsulation à votre interface utilisateur.

_Net, nous partageons les secrets d'une « performance optimale » et d'une « expérience utilisateur optimale ».
Découvrez comment utiliser efficacement les techniques de mémoïsation telles que `React.memo()`, `useMemo()` et `useCallback()` pour éviter les rendus inutiles et optimiser les performances de votre application. Vous apprendrez également en détail le principe du « traitement par lots automatique », qui permet à React de traiter simultanément plusieurs mises à jour d'état.
De plus, vous pouvez facilement comparer les avantages et les inconvénients des différentes stratégies de rendu, telles que CSR, SSR, SSG et ISR, qui déterminent la vitesse de chargement initiale d'un site web, et choisir la méthode optimale pour votre projet.

_Cinq, présentant les dernières technologies et tendances pour préparer l'avenir de React.
Ce livre explore les concepts de composants serveur React (RSC) et de composants clients, qui façonneront l'avenir du développement web, vous aidant à comprendre l'innovation des actions serveur qui brouillent les frontières entre serveurs et clients.
En définitive, il offre un aperçu des technologies futures qui permettent une optimisation automatique, comme le compilateur React, et jette les bases d'une réponse flexible aux évolutions technologiques.

★ Structure et contenu de ce livre

Ce livre couvre un large éventail d'éléments fondamentaux du développement front-end et leur évolution, guidant les lecteurs vers une vision d'ensemble.
Il explique de manière systématique les concepts fondamentaux, depuis les premières pages web statiques jusqu'à l'émergence et les avantages des applications monopages (SPA), la naissance des modules, des regroupements et des moteurs de modèles, et le changement de paradigme de la programmation impérative à la programmation déclarative.
De plus, il couvre la structure et le processus de transformation de JSX, qui est au cœur de React, les principes de l'état et des propriétés, le flux de données, le mécanisme de rendu de React et le processus de restructuration du DOM virtuel, et même les règles fondamentales de fonctionnement et d'utilisation des hooks React, ainsi que l'architecture Fiber et les fonctionnalités de concurrence, vous aidant ainsi à comprendre en profondeur les principes internes de React et à consolider vos bases techniques.

[Partie 1] Retour sur le développement front-end

_Chapitre 1.
Retour sur les composants front-end et leur développement
Il couvre les composants clés des applications web (MPA, modules) et l'évolution des environnements de développement front-end (l'émergence des outils de regroupement).
Explique la différence entre la programmation impérative et la programmation déclarative.

_Chapitre 2.
Retour sur les applications monopages
Nous abordons la structure des SPA, leurs différences avec les MPA et leurs avantages, notamment la réduction de la fréquence des appels réseau, le chargement différé et l'augmentation de la productivité (séparation des domaines de développement front-end et back-end, programmation déclarative).

Chapitre 3. Retour sur les phases des composants d'interface utilisateur
Explique l'importance des composants d'interface utilisateur, le rôle des outils de conception et comment les concepts orientés objet tels que l'abstraction, les interfaces et l'encapsulation s'appliquent aux composants d'interface utilisateur.
Revenons sur la signification des termes « État » et « Propriétés ».

_Chapitre 4.
État et réactivité de l'examen
Il aborde la distinction entre l'état du client et celui du serveur, le rôle que jouent l'état et la réactivité dans le développement front-end, les architectures d'applications comme MVC et MVVM, le modèle observateur et les concepts de liaison bidirectionnelle et unidirectionnelle.

_Chapitre 5.
Retour sur l'environnement de développement
Nous abordons la structure et les principes de Node.js (moteur V8, boucle d'événements, Libuv, etc.), les gestionnaires de versions Node (NVM, Volta, fnm, etc.), l'importance et la comparaison des gestionnaires de paquets (npm, Yarn, pnpm), le concept et les avantages des monorepos, les outils de qualité du code (linters, formateurs, analyseurs statiques) et les outils de construction React (Vite, ESBuild).

[Partie 2] Une exploration approfondie des éléments fondamentaux de React

Chapitre 6. Analyse des composants JSX
Découvrez JSX, un outil essentiel pour implémenter des composants d'interface utilisateur React, ainsi que ses composants, et s'il s'agit d'un DSL externe ou interne.

Chapitre 7. Révision de la grammaire de base de JSX et de la transformation JavaScript
JSX est une extension syntaxique utilisée dans React pour concevoir de manière déclarative des interfaces utilisateur, et décrit le processus par lequel JSX est traduit en appels de fonctions JavaScript que le navigateur comprend.
Ce document aborde les concepts de règles d'élément racine unique, de rendu conditionnel et d'événements synthétiques.

_Chapitre 8.
Refactorisation React et revue des propriétés clés
Découvrez le processus de rendu de React (déclenchement, rendu, validation), le DOM virtuel, la réconciliation, l'algorithme de comparaison et l'importance des propriétés clés.

_Chapitre 9.
Retour sur les règles de rendu React
Nous aborderons les règles qui déclenchent le rendu de React, corrigerons les idées fausses concernant le rendu ultérieur et traiterons des principes d'idempotence et d'immuabilité durant le processus de rendu.

_Chapitre 10.
Retour sur les props et les modèles de composants de React
Nous allons approfondir la notion de props, un concept fondamental de React.
Explique différents modèles de conception de composants tels que l'immuabilité des propriétés, les composants imbriqués, la composition de composants et le modèle de rendu des propriétés.

_Chapitre 11.
Retour sur l'état et le traitement par lots dans React
Nous allons approfondir la notion d'état, un concept fondamental de React.
Nous expliquons les concepts et la nécessité de l'état local, de l'état dérivé, du flux de données unidirectionnel/bidirectionnel et de la liaison, ainsi que du traitement par lots automatique introduits dans React 18.

_Chapitre 12.
Retour sur Fiber, à l'origine de React
Cet article explique en détail les limitations des réconciliateurs de pile traditionnels, l'introduction de l'architecture fibre pour les surmonter, la structure des objets fibre et la manière dont les priorités fibre et les fonctionnalités de concurrence sont mises en œuvre.

[Partie 3] Exploration approfondie de l'utilisation des hooks React

_Chapitre 13.
Révision des règles d'utilisation des hooks React
Nous expliquons le contexte de l'introduction des hooks, les avantages des composants fonctionnels par rapport aux composants de classe et les principales règles d'utilisation des hooks, y compris les hooks personnalisés commençant par le préfixe use (appel uniquement au niveau supérieur, appel uniquement dans les fonctions React et maintien de l'immuabilité des arguments).

_Chapitre 14.
Retour sur les hooks essentiels de React
Nous verrons en détail comment utiliser les fonctions essentielles comme useState() et useEffect().
Il souligne notamment l'importance de gérer le tableau de dépendances de useEffect(), son comportement en mode strict et la nécessité de respecter l'idempotence.

_Chapitre 15.
Retour sur la mémorisation React
Nous abordons les techniques de mémoïsation permettant d'éviter les rendus inutiles.
Nous présentons l'historique de développement et les objectifs (optimisation automatique) du compilateur React, et mentionnons également l'importance de la mémoïsation manuelle.

_Chapitre 16.
Retour sur les contextes React, les limites d'erreur et le suspense
Ce document présente des techniques avancées pour la stabilité des applications et le partage efficace des données.
Nous aborderons la gestion des erreurs via les composants de limite d'erreur, l'API de contexte pour résoudre les problèmes de forage de propriétés, l'accès au contexte et aux valeurs de promesse à l'aide de l'API use(), ainsi que le concept et l'utilisation de suspense pour le rendu asynchrone.

_Chapitre 17.
Retour sur les fonctionnalités de concurrence et les hooks avancés de React
Nous verrons comment utiliser des hooks de cycle de vie avancés comme useLayoutEffect(), useInsertionEffect() et useImperativeHandle(), et comment tirer parti des fonctionnalités de concurrence de React (transitions) pour offrir une expérience utilisateur fluide.

[Partie 4] Retour sur les technologies entourant React et son avenir

_Chapitre 18.
Retour sur les modèles de rendu React
Comparez les concepts de base, les avantages et les inconvénients, ainsi que les cas d'utilisation des différents modèles de rendu React, notamment CSR, SSR, SSG et ISR.
Nous expliquons en détail le contexte et les règles du concept le plus récent, React Server Components (RSC).

_Chapitre 19.
Retour sur les routeurs d'applications Next.js, les actions serveur et les nouveaux hooks React
Nous aborderons les bases de l'utilisation du routeur d'application Next.js, les actions serveur innovantes introduites dans React 19 et leur relation avec la mise en cache, le rendu statique et le rendu dynamique.
Nous présenterons l'évolution de React vers une intégration plus poussée avec les serveurs et découvrirons les nouveaux hooks ajoutés à la version 19 de React.

Note de l'auteur

Jim Keller, légende de la conception de semi-conducteurs, a déclaré ceci lors de son passage dans le populaire podcast animé par Lex Fridman :

« La plupart des gens ne s’intéressent qu’à la recette (comment faire du pain avec de la farine, de l’eau et de la levure). »
« Je ne m’intéresse pas vraiment à la biologie, à la distribution des matières premières ou à la thermodynamique qui entrent en jeu dans la fabrication du pain. »

Il en va de même pour le développement front-end.
Si vous vous contentez de suivre les recettes fournies par le framework, vous atteindrez rapidement ses limites.
Cela est particulièrement vrai à l'ère de l'intelligence artificielle, où les vitesses d'apprentissage sont exponentiellement plus rapides.
C'est comme si un développeur apprenait à utiliser useState() et fetch() sans comprendre comment l'état de React est mis à jour, comment la boucle d'événements de JavaScript gère l'asynchronisme, ni le protocole HTTP et les principes de mise en réseau qui constituent le fondement du web.
Je suis d'accord avec Jim Keller.
Si vous comprenez la cuisine en elle-même, et pas seulement la recette, vous pouvez faire non seulement du pain, mais aussi des omelettes et des sandwichs.

L'environnement de développement évolue beaucoup plus vite qu'auparavant.
Désormais, l'IA crée des composants d'un simple clic et suggère même des systèmes de conception.
Au début, c'était excitant, mais à un moment donné, j'ai commencé à me sentir mal à l'aise.
Je suis souvent surpris par les annonces de licenciements massifs de développeurs dans la Silicon Valley.
« Quelle est la différence entre le code que j'ai créé et celui créé par Copilot ? », « Serai-je un jour remplacé par un outil d'IA ? »

Nombreux sont les développeurs qui hésitent face à cette question.
Le développement est devenu plus facile, mais il nous met aussi à l'épreuve. Si les outils d'IA sont indéniablement d'excellents assistants, ils ne parviennent pas à répondre pleinement aux exigences complexes ni à créer des expériences nuancées qui captivent les utilisateurs.
C’est à ce stade que la « profondeur » des développeurs humains se révèle pleinement.

Ce livre est le point de départ d'un voyage vers cette « profondeur ».
Même si vous connaissez déjà React, ce qui compte vraiment, ce n'est pas la syntaxe superficielle, mais les critères permettant de juger « pourquoi cela fonctionne ainsi », « comment cela peut être mieux conçu » et « ce qui constitue un bon code ».

Vous n'avez pas choisi ce livre simplement pour devenir un bon programmeur.
Parce que je souhaite devenir un développeur capable de résoudre les problèmes de manière proactive sans perdre le cap, même à l'ère de l'automatisation.

Nous vous invitons maintenant à découvrir les profondeurs d'« Inside React ».
Développez vos compétences sur des principes solides grâce à ce livre et devenez un développeur irremplaçable par l'IA.
React sera l'outil le plus puissant que vous puissiez utiliser pour devenir ce type de développeur.

* Venez à 〈Naekobu〉 !

Si vous avez besoin de quelqu'un avec qui discuter et faire des recherches, faisons des recherches ensemble sur Discord et KakaoTalk.
Posez des questions sur les choses que vous ne connaissez pas et essayez de résoudre les erreurs.
En visitant « Please Take Care of My Code: Naekobu », vous pouvez partager votre savoir-faire avec d'autres développeurs et acquérir de nouvelles connaissances.

- Boîte de réception Discord : discord.com/invite/BYRpaDrfbH
- KakaoTalk Naekobu : open.kakao.com/o/ggK7EAJh