Tutoriel React avec exemples en direct
Un tutoriel React 19 gratuit : composants, JSX, props, état, hooks et performances. Chaque exemple s'exécute dans la page : modifiez le code et regardez le composant et sa console se mettre à jour.
Commencer le coursPour commencer
- React c'est quoiReact est une bibliothèque JavaScript pour construire des interfaces utilisateur à partir de composants. Vous décrivez ce que l'écran doit afficher pour les données actuelles, et React garde la page à jour quand ces données changent.
- Installer ReactInstallez React en créant un projet avec Vite : vérifiez Node.js, lancez une commande de création, installez les dépendances et démarrez le serveur de développement. Aussi : les fichiers générés, le build de production et pourquoi Create React App est obsolète.
- JSXJSX est une extension de syntaxe JavaScript qui permet d'écrire un balisage proche du HTML dans les composants React. Découvrez ses règles : un seul élément racine, balises fermées, className, attributs en camelCase, accolades, styles inline, commentaires et ce qu'il devient après compilation.
- ComposantsUn composant React est une fonction JavaScript qui renvoie du JSX. Apprenez à écrire et nommer des composants fonctions, à les assembler en arbre, à les répartir dans des fichiers, à les garder purs, et la différence entre composants et éléments.
- PropsLes props sont les entrées d'un composant React : des valeurs qu'un parent passe à un enfant sous forme d'attributs JSX. Apprenez à passer et déstructurer des props, définir des valeurs par défaut, passer des fonctions, décomposer des props, et pourquoi les props sont en lecture seule.
- Childrenchildren est la prop qui contient tout ce que vous placez entre les balises ouvrante et fermante d'un composant. Apprenez à construire des composants enveloppes et de mise en page, à passer plusieurs emplacements avec des props nommées, à utiliser children comme fonction, et quand l'API Children n'est pas le bon outil.
- FragmentsUn Fragment React regroupe plusieurs éléments en une seule valeur de retour sans ajouter de nœud à la page. Découvrez la syntaxe courte <>...</>, quand il vous faut <Fragment key>, et pourquoi les fragments comptent dans les tableaux et les listes.
- Rendu conditionnelLe rendu conditionnel en React, c'est du JavaScript ordinaire : une instruction if, un ternaire ou && décide du JSX qu'un composant renvoie. Découvrez chaque pattern, le 0 égaré que && peut afficher, le retour de null, et pourquoi masquer un composant n'est pas la même chose que ne pas l'afficher.
- Listes et keysPour afficher une liste en React, vous appelez map() sur un tableau et renvoyez du JSX pour chaque élément, en donnant à chacun une prop key. Découvrez filter puis map, d'où doivent venir les keys, et pourquoi utiliser l'index du tableau mélange les éléments quand la liste change.
- ÉvénementsLes événements React sont des props comme onClick et onChange qui prennent une fonction, que React appelle avec un objet événement quand l'utilisateur agit. Apprenez à passer un gestionnaire au lieu de l'appeler, à passer des arguments, à lire e.target.value et e.key, à empêcher le rechargement des formulaires et à stopper la propagation.
- CSS en ReactVous stylisez les composants React avec className et du CSS classique, avec la prop style pour les valeurs calculées en JavaScript, avec les CSS Modules pour des noms de classes isolés, ou avec les classes utilitaires de Tailwind. Découvrez chaque méthode, les classes conditionnelles et quand utiliser laquelle.
État et formulaires
- useStateuseState donne à un composant une valeur qui survit aux nouveaux rendus et un setter qui redessine l'écran quand la valeur change. Découvrez la syntaxe, les fonctions de mise à jour, les objets et tableaux dans l'état, et pourquoi une valeur semble périmée juste après l'avoir modifiée.
- Mettre à jour tableaux et objetsPour modifier un tableau ou un objet dans l'état React, construisez-en un nouveau et passez-le au setter. Apprenez à ajouter, retirer, remplacer, insérer et trier des éléments, à mettre à jour des objets imbriqués, et pourquoi muter l'état laisse l'écran inchangé.
- FormulairesConstruisez des formulaires en React avec des champs contrôlés : champs texte, textarea, select, cases à cocher et boutons radio, un seul objet d'état pour plusieurs champs, l'envoi avec onSubmit, l'affichage des erreurs de validation et les actions de formulaire de React 19.
- Contrôlé ou non contrôléUn champ contrôlé reçoit sa valeur de l'état React et ne change que par onChange. Un champ non contrôlé garde sa propre valeur dans le DOM, et vous la lisez avec une ref ou FormData. Découvrez la différence, les avertissements courants et quand utiliser chacun.
- Faire remonter l'étatFaire remonter l'état consiste à sortir l'état de deux composants pour le placer dans leur parent commun le plus proche, qui redescend la valeur et un setter sous forme de props. Découvrez quand le faire, comment le faire en trois étapes, et quand garder plutôt l'état local.
- useReduceruseReducer stocke l'état et regroupe chaque mise à jour dans une seule fonction reducer : vous envoyez une action, et le reducer renvoie l'état suivant. Découvrez la syntaxe, comment écrire un reducer pur, un exemple de liste de tâches, l'initialisation paresseuse et quand le préférer à useState.
Effets et refs
- useEffectuseEffect exécute du code après que React a mis l'écran à jour, pour qu'un composant se synchronise avec quelque chose d'extérieur à React : un minuteur, un abonnement, un écouteur d'événement. Découvrez les trois formes du tableau de dépendances, le nettoyage, les boucles infinies et quand vous n'avez pas du tout besoin d'un effet.
- Récupérer des donnéesRécupérez des données en React en lançant la requête dans useEffect, en gardant le chargement, l'erreur et les données dans l'état, et en ignorant les réponses qui arrivent après un changement des entrées. Aussi : async/await dans les effets, AbortController, conditions de course et quand passer à une bibliothèque.
- useRefuseRef donne à un composant une boîte, `{ current }`, qui garde son contenu d'un rendu à l'autre sans provoquer de rendu quand vous la modifiez. Utilisez-la pour atteindre un nœud DOM (focus, défilement, mesure) ou pour stocker un identifiant de minuteur ou toute valeur que l'écran n'affiche pas.
- forwardRefforwardRef permet à un composant de recevoir une ref de son parent et de l'attacher à un nœud DOM interne. Dans React 19, les composants fonctions reçoivent `ref` comme une prop normale, le nouveau code n'a donc plus besoin de forwardRef. Voyez les deux versions en action, plus useImperativeHandle et les types TypeScript.
- useLayoutEffectuseLayoutEffect fonctionne comme useEffect mais s'exécute juste après la mise à jour du DOM par React et avant que le navigateur affiche la page. Utilisez-le pour mesurer un élément et ajuster la mise en page sans scintillement visible, et gardez useEffect pour tout le reste.
Hooks et contexte
- Hooks ReactUn hook est une fonction dont le nom commence par use et qui permet à un composant d'utiliser une fonctionnalité de React comme l'état, le contexte, les refs ou les effets. Découvrez chaque hook intégré regroupé par usage, les deux règles que suit tout hook, et comment écrire le vôtre.
- useContextuseContext lit une valeur fournie par un composant parent, pour qu'un composant profondément imbriqué la reçoive sans que chaque composant intermédiaire la transmette en prop. Découvrez createContext, les providers, la mise à jour du contexte depuis un enfant, et l'effet du contexte sur les nouveaux rendus.
- Prop drillingLe prop drilling consiste à passer une prop à travers des composants qui ne l'utilisent pas, uniquement pour qu'un composant plus bas puisse la lire. Voyez-le dans un exemple exécutable, pourquoi il devient gênant quand une application grandit, et les solutions dans l'ordre où les essayer : composition, contexte, puis bibliothèque d'état.
- Hooks personnalisésUn hook personnalisé est une fonction dont le nom commence par use et qui appelle d'autres hooks, pour que plusieurs composants réutilisent la même logique avec état. Construisez useToggle, useLocalStorage, useDebounce et useWindowWidth, et comprenez pourquoi chaque appel a son propre état.
- Règles des hooksLes hooks ont deux règles : les appeler au niveau supérieur d'un composant, jamais dans des conditions, des boucles ou des fonctions imbriquées, et ne les appeler que depuis des composants fonctions ou des hooks personnalisés. Comprenez pourquoi React a besoin du même ordre d'appel à chaque rendu et comment corriger les erreurs quand il change.
- useIduseId renvoie un identifiant unique et stable pour chaque instance de composant, pour qu'un label, un champ et une aide aria-describedby puissent se désigner mutuellement même quand le composant apparaît plusieurs fois. Comprenez pourquoi Math.random et les compteurs cassent avec le rendu serveur, et pourquoi useId ne sert pas aux keys de liste.
- useSyncExternalStoreuseSyncExternalStore abonne un composant à des données qui vivent hors de React, comme un petit module de store ou une API du navigateur telle que navigator.onLine, et refait le rendu chaque fois que ces données changent. Découvrez subscribe et getSnapshot, pourquoi le snapshot doit être mis en cache, et getServerSnapshot.
Rendu et performances
- Rendu ReactUn composant React refait son rendu quand son état change, quand son parent fait son rendu, ou quand un contexte qu'il lit change. Découvrez la différence entre rendu et commit, ce que signifie vraiment le DOM virtuel, et comment éviter les rendus inutiles.
- useMemouseMemo met en cache le résultat d'un calcul entre les rendus et ne le recalcule que lorsque ses dépendances changent. Découvrez la syntaxe, comment garder un objet stable pour un enfant memo, et quand useMemo n'en vaut pas la peine.
- useCallbackuseCallback renvoie la même fonction d'un rendu à l'autre jusqu'à ce que ses dépendances changent. Il n'aide que lorsque cette fonction est passée à un enfant memo ou utilisée comme dépendance d'un effet. Découvrez la syntaxe, la différence avec useMemo et les erreurs à éviter.
- React.memomemo enveloppe un composant pour que React saute son nouveau rendu quand ses props sont superficiellement égales à la fois précédente. Découvrez quand il aide, pourquoi de nouveaux objets et de nouvelles fonctions dans les props l'annulent, et ce qu'il n'empêche pas.
- useTransitionuseTransition marque une mise à jour d'état comme non urgente, pour que React garde la page réactive pendant qu'il fait le rendu de la partie lente en arrière-plan. Découvrez isPending, startTransition, les transitions asynchrones de React 19, et pourquoi ce n'est pas du debounce.
- useDeferredValueuseDeferredValue vous donne une copie d'une valeur autorisée à prendre du retard pendant les rendus lourds, pour qu'un champ reste réactif pendant qu'une liste lente rattrape son retard. Découvrez son fonctionnement, la valeur initiale de React 19, et sa comparaison avec useTransition et le debounce.
- Suspense et lazySuspense affiche un contenu de repli tant que les composants qu'il contient ne sont pas prêts, et React.lazy ne charge le code d'un composant qu'à son premier rendu. Découvrez le code splitting, les frontières imbriquées, Suspense avec use() dans React 19 et la gestion des erreurs.
React 19 et notions avancées
- React 19React 19 a ajouté les Actions, useActionState, useOptimistic, use, ref en prop et les métadonnées du document, et la 19.2 a ajouté Activity et useEffectEvent. Voyez chaque nouveauté en action, ce qui a été supprimé et comment faire la mise à jour.
- useActionStateuseActionState enveloppe une action async, garde la dernière valeur qu'elle a renvoyée et vous indique si elle est encore en cours. Découvrez la signature, les actions de formulaire, le renvoi d'erreurs de validation et son appel en dehors d'un formulaire.
- useOptimisticuseOptimistic affiche le résultat attendu pendant qu'une action async est encore en cours, puis revient à l'état réel quand elle se termine, si bien qu'une requête échouée s'annule d'elle-même. Découvrez la syntaxe, la forme reducer, et pourquoi il doit s'exécuter dans une action.
- useuse lit la valeur d'une promesse ou d'un contexte pendant le rendu. Avec une promesse, il se suspend jusqu'à l'arrivée des données et affiche le contenu de repli du Suspense le plus proche. Contrairement aux autres hooks, il peut s'exécuter dans des instructions if et des boucles.
- Error boundariesUne error boundary est un composant qui intercepte les erreurs levées pendant le rendu des composants qu'il contient et affiche un contenu de repli au lieu d'un écran blanc. Découvrez ce qu'elle intercepte, comment l'écrire sous forme de classe, comment la réinitialiser, et la bibliothèque react-error-boundary.
- PortailscreatePortal affiche une partie d'un composant dans un autre nœud DOM, comme document.body, tout en la gardant à la même place dans l'arbre React. Utilisez-le pour les modales, les infobulles et les menus qui doivent échapper à overflow hidden et à l'empilement des z-index.
- Strict ModeStrictMode est une enveloppe réservée au développement qui fait le rendu des composants deux fois, exécute au montage la mise en place, le nettoyage puis à nouveau la mise en place des effets, et avertit au sujet des API obsolètes, pour que les rendus impurs et les nettoyages manquants apparaissent tôt. Il ne fait rien en production.
- Cycle de vie ReactChaque composant React se monte (apparaît), se met à jour (refait son rendu) et se démonte (est retiré). Découvrez à quoi correspond chaque phase avec useEffect, les méthodes de cycle de vie des classes et leurs équivalents en hooks, ainsi que les phases de rendu et de commit.
- Composants classesUn composant classe est une classe JavaScript qui étend React.Component et renvoie du JSX depuis une méthode render. Découvrez this.props, this.state et setState, la liaison des gestionnaires d'événements, les méthodes de cycle de vie, PureComponent, et comment convertir une classe en composant fonction.
Comparaisons et entretiens
- Questions d'entretien ReactUne trentaine de questions d'entretien React, du niveau débutant au niveau avancé, chacune avec une réponse courte qu'un recruteur accepterait et du code exécutable pour celles qu'il vaut mieux voir que lire.
- React vs AngularReact est une bibliothèque d'interface que vous combinez avec d'autres outils ; Angular est un framework complet avec routage, formulaires, HTTP et injection de dépendances intégrés. Comparez les mêmes composants écrits avec les deux, côte à côte.
- React vs VueReact et Vue sont deux outils JavaScript pour construire des interfaces à partir de composants. Ils diffèrent par le balisage (JSX ou templates), par leur façon de réagir aux changements (état immuable et nouveaux rendus ou refs réactives modifiables) et par la part officielle de leur écosystème.
- React avec TypeScriptComment typer une application React avec TypeScript : props et children, useState avec unions et null, useRef pour les éléments DOM, gestionnaires d'événements, contexte, composants génériques et props des éléments natifs.
