Composants contrôlés (Controlled components) : Liaison état et input

React prend le contrôle : la philosophie des composants contrôlés

En HTML standard, les éléments de formulaire comme ``, ``, et `<select>` gèrent leur propre état interne. Lorsque l'utilisateur tape du texte ou sélectionne une option, le DOM met à jour directement la valeur de l'élément. C'est un comportement intrinsèque et indépendant de tout framework JavaScript. Cependant, React préfère centraliser la gestion de l'état au sein des composants.</p><p>C'est là qu'intervient le concept de **composant contrôlé** (Controlled Component). Dans cette approche, l'état du composant React devient la source de vérité unique pour la valeur de l'élément de formulaire. Au lieu de laisser le DOM gérer la valeur, nous la stockons dans le `state` React et nous la passons explicitement à l'élément de formulaire via sa prop `value` (ou `checked` pour les checkboxes/radios).</p><p>Pour que l'utilisateur puisse modifier cette valeur, nous devons également fournir une fonction (`onChange`) qui sera appelée à chaque modification de l'input. Cette fonction mettra à jour l'état React, ce qui provoquera un nouveau rendu du composant avec la nouvelle valeur reflétée dans l'input. La boucle est bouclée : l'interaction utilisateur déclenche une mise à jour de l'état, qui à son tour met à jour la valeur affichée dans le formulaire.</p></section><section><h2 id="section-mise-en-oeuvre-usestate-value-et-onchange">Mise en oeuvre : `useState`, `value` et `onChange`</h2><p>La mise en place d'un composant contrôlé suit un schéma simple et répétitif, principalement basé sur le hook `useState`.</p><p>1. **Déclarer un état :** Utilisez `useState` pour créer une variable d'état qui contiendra la valeur actuelle de l'input.</p><p>2. **Lier la valeur :** Passez cette variable d'état à la prop `value` de votre élément de formulaire (`<input>`, `<textarea>`, `<select>`).</p><p>3. **Gérer les changements :** Attachez une fonction à l'événement `onChange` de l'élément. Cette fonction recevra l'objet événement synthétique de React. Elle utilisera la fonction de mise à jour de l'état (le deuxième élément retourné par `useState`) pour actualiser la valeur dans l'état, généralement en lisant `event.target.value`.</p><p>Prenons l'exemple le plus simple : un champ de saisie de texte (`<input type="text">`).</p><pre class="line-numbers"><code class="language-javascript">import React, { useState } from 'react'; function NameForm() { // 1. Déclarer un état pour stocker la valeur de l'input const [name, setName] = useState(''); // 3. Fonction pour gérer les changements de l'input const handleChange = (event) => { // Met à jour l'état 'name' avec la valeur actuelle de l'input setName(event.target.value); }; const handleSubmit = (event) => { alert('Un nom a été soumis : ' + name); event.preventDefault(); // Empêche le rechargement de la page }; return ( <form onSubmit={handleSubmit}> <label> Nom : <input type="text" // 2. Lier la valeur de l'input à l'état 'name' value={name} // 3. Appeler handleChange à chaque modification onChange={handleChange} /> </label> <button type="submit">Soumettre</button> <p>Vous avez tapé : {name}</p> { /* Visualisation en temps réel */ } </form> ); } export default NameForm;</code></pre><p>Dans cet exemple, `name` dans l'état React est toujours synchronisé avec la valeur affichée dans le champ de saisie. Chaque frappe de touche déclenche `handleChange`, qui met à jour `name`, ce qui fait que React re-rend le composant et passe la nouvelle valeur à l'attribut `value` de l'input. React contrôle entièrement la valeur de l'input.</p></section><section><h2 id="section-avantages-de-l-approche-controlee">Avantages de l'approche contrôlée</h2><p>L'utilisation des composants contrôlés offre plusieurs avantages significatifs :</p><p>1. **Source de vérité unique :** L'état React contient toujours la valeur actuelle du formulaire, simplifiant le raisonnement sur les données.</p><p>2. **Validation instantanée :** Puisque chaque changement passe par la fonction `onChange`, vous pouvez y intégrer une logique de validation ou de formatage en temps réel.</p><p>3. **Contrôle programmatique :** Vous pouvez facilement modifier la valeur du champ de manière programmatique en mettant simplement à jour l'état (par exemple, pour réinitialiser un formulaire).</p><p>4. **Logique conditionnelle simplifiée :** Vous pouvez désactiver le bouton de soumission ou afficher des messages d'erreur basés directement sur l'état qui représente les valeurs du formulaire.</p><p>Bien qu'elle nécessite un peu plus de code initial que l'approche HTML classique, la méthode des composants contrôlés est la manière idiomatique et recommandée de gérer les formulaires en React, car elle s'intègre parfaitement au modèle déclaratif et basé sur l'état de la bibliothèque. Nous verrons dans les sections suivantes comment appliquer ce pattern aux autres types d'éléments de formulaire.</p></section><div id="quizz"></div><p id="pagination"><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/formulaires" title="Gestion des formulaires en react : composants contrôlés et validation" rel="prev">◄ Précédent</a> <a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-des-differents-types-d-inputs-text-textarea-select-checkbox-radio" title="React : gérer text, textarea, select, checkbox et radio (contrôlés)" rel="next">Suivant ►</a></p></div></div><input type="checkbox" id="rightSidebarToggle" class="rightSidebarToggle toggle"><label for="rightSidebarToggle" id="rightSidebarToggleButton" class="toggleBtn">く</label><nav id="summary" class="rightSidebar" aria-label="Table des matières" itemscope itemtype="http://schema.org/SiteNavigationElement"><h2>Table des matières</h2><meta itemprop="description" content="Table des matières pour React.js : Le guide de référence"> <ol class="summary"><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/les-fondamentaux-de-react" itemprop="url" title="Les Fondamentaux de React"><span itemprop="name">Les Fondamentaux de React</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-a-react-js" itemprop="url" title="Introduction à React.js"><span itemprop="name">Introduction à React.js</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/qu-est-ce-que-react-bibliotheque-vs-framework" itemprop="url" title="Qu'est-ce que React ? (Bibliothèque vs framework)"><span itemprop="name">Qu'est-ce que React ? (Bibliothèque vs framework)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/philosophie-et-avantages-de-react-declaratif-base-sur-les-composants-apprendre-une-fois-ecrire-partout" itemprop="url" title="Philosophie et avantages de React (Déclaratif, basé sur les composants, apprendre une fois, écrire partout)"><span itemprop="name">Philosophie et avantages de React (Déclaratif, basé sur les composants, apprendre une fois, écrire partout)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/le-dom-virtuel-virtual-dom-concept-et-fonctionnement" itemprop="url" title="Le DOM virtuel (Virtual DOM) : Concept et fonctionnement"><span itemprop="name">Le DOM virtuel (Virtual DOM) : Concept et fonctionnement</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/react-vs-autres-frameworks-bibliotheques-angular-vue-js-svelte" itemprop="url" title="React vs autres frameworks/bibliothèques (Angular, Vue.js, Svelte)"><span itemprop="name">React vs autres frameworks/bibliothèques (Angular, Vue.js, Svelte)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/l-ecosysteme-react-react-native-next-js-gatsby-etc" itemprop="url" title="L'écosystème React (React Native, Next.js, Gatsby, etc.)"><span itemprop="name">L'écosystème React (React Native, Next.js, Gatsby, etc.)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mise-en-place-de-l-environnement-de-developpement" itemprop="url" title="Mise en place de l'environnement de développement"><span itemprop="name">Mise en place de l'environnement de développement</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/prerequis-logiciels-node-js-npm-yarn" itemprop="url" title="Prérequis logiciels (Node.js, npm/yarn)"><span itemprop="name">Prérequis logiciels (Node.js, npm/yarn)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/creation-d-un-projet-react-avec-create-react-app-cra" itemprop="url" title="Création d'un projet React avec Create React App (CRA)"><span itemprop="name">Création d'un projet React avec Create React App (CRA)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/structure-d-un-projet-react-typique" itemprop="url" title="Structure d'un projet React typique"><span itemprop="name">Structure d'un projet React typique</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/lancement-du-serveur-de-developpement-et-outils-de-base-devtools" itemprop="url" title="Lancement du serveur de développement et outils de base (DevTools)"><span itemprop="name">Lancement du serveur de développement et outils de base (DevTools)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/alternatives-a-cra-vite-next-js-configuration-manuelle-avec-webpack-babel-apercu" itemprop="url" title="Alternatives à CRA (Vite, Next.js, configuration manuelle avec Webpack/Babel - Aperçu)"><span itemprop="name">Alternatives à CRA (Vite, Next.js, configuration manuelle avec Webpack/Babel - Aperçu)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/jsx-syntaxe-javascript-etendue" itemprop="url" title="JSX - Syntaxe JavaScript étendue"><span itemprop="name">JSX - Syntaxe JavaScript étendue</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-a-jsx-pourquoi-et-comment" itemprop="url" title="Introduction à JSX : Pourquoi et comment ?"><span itemprop="name">Introduction à JSX : Pourquoi et comment ?</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/regles-de-base-de-jsx-element-racine-unique-fermeture-des-balises" itemprop="url" title="Règles de base de JSX (Elément racine unique, fermeture des balises)"><span itemprop="name">Règles de base de JSX (Elément racine unique, fermeture des balises)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/integration-d-expressions-javascript-dans-jsx" itemprop="url" title="Intégration d'expressions JavaScript dans JSX (`{}`)"><span itemprop="name">Intégration d'expressions JavaScript dans JSX (`{}`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/attributs-jsx-classname-htmlfor-style-etc" itemprop="url" title="Attributs JSX (className, htmlFor, style, etc.)"><span itemprop="name">Attributs JSX (className, htmlFor, style, etc.)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/jsx-et-la-prevention-des-injections-xss" itemprop="url" title="JSX et la prévention des injections (XSS)"><span itemprop="name">JSX et la prévention des injections (XSS)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/commentaires-en-jsx" itemprop="url" title="Commentaires en JSX"><span itemprop="name">Commentaires en JSX</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/fragments" itemprop="url" title="Fragments"><span itemprop="name">Fragments</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/les-composants-react-blocs-de-construction-fondamentaux" itemprop="url" title="Les composants React : Blocs de construction fondamentaux"><span itemprop="name">Les composants React : Blocs de construction fondamentaux</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/composants-fonctionnels-function-components-approche-moderne-et-privilegiee" itemprop="url" title="Composants fonctionnels (Function Components) - Approche moderne et privilégiée"><span itemprop="name">Composants fonctionnels (Function Components) - Approche moderne et privilégiée</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/composants-classe-class-components-comprendre-l-heritage-pour-maintenance-lecture" itemprop="url" title="Composants classe (Class Components) - Comprendre l'héritage (pour maintenance/lecture)"><span itemprop="name">Composants classe (Class Components) - Comprendre l'héritage (pour maintenance/lecture)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/rendu-des-composants" itemprop="url" title="Rendu des composants"><span itemprop="name">Rendu des composants</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/composition-de-composants-imbrication" itemprop="url" title="Composition de composants (imbrication)"><span itemprop="name">Composition de composants (imbrication)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/modules-javascript-import-export-pour-les-composants" itemprop="url" title="Modules JavaScript (import/export) pour les composants"><span itemprop="name">Modules JavaScript (import/export) pour les composants</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/props-passage-de-donnees-aux-composants" itemprop="url" title="Props - Passage de données aux composants"><span itemprop="name">Props - Passage de données aux composants</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-aux-props-proprietes" itemprop="url" title="Introduction aux props (Propriétés)"><span itemprop="name">Introduction aux props (Propriétés)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/passer-des-props-d-un-parent-a-un-enfant" itemprop="url" title="Passer des props d'un parent à un enfant"><span itemprop="name">Passer des props d'un parent à un enfant</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/lecture-des-props-dans-les-composants-fonctionnels-et-classe" itemprop="url" title="Lecture des props dans les composants fonctionnels et classe"><span itemprop="name">Lecture des props dans les composants fonctionnels et classe</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/props-children-passer-des-elements-enfants" itemprop="url" title="`props.children` : Passer des éléments enfants"><span itemprop="name">`props.children` : Passer des éléments enfants</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/props-par-defaut-default-props" itemprop="url" title="Props par défaut (Default Props)"><span itemprop="name">Props par défaut (Default Props)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/proptypes-validation-des-types-de-props-importance-et-utilisation" itemprop="url" title="PropTypes : Validation des types de props (Importance et utilisation)"><span itemprop="name">PropTypes : Validation des types de props (Importance et utilisation)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/destructuration-des-props" itemprop="url" title="Déstructuration des props"><span itemprop="name">Déstructuration des props</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/state-gestion-de-l-etat-local-d-un-composant" itemprop="url" title="State - Gestion de l'état local d'un composant"><span itemprop="name">State - Gestion de l'état local d'un composant</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-au-concept-d-etat-state" itemprop="url" title="Introduction au concept d'état (State)"><span itemprop="name">Introduction au concept d'état (State)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/le-hook-usestate-introduction-et-utilisation" itemprop="url" title="Le hook `useState` : Introduction et utilisation"><span itemprop="name">Le hook `useState` : Introduction et utilisation</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/declaration-d-une-variable-d-etat" itemprop="url" title="Déclaration d'une variable d'état"><span itemprop="name">Déclaration d'une variable d'état</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/lecture-de-l-etat" itemprop="url" title="Lecture de l'état"><span itemprop="name">Lecture de l'état</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mise-a-jour-de-l-etat-fonction-de-mise-a-jour" itemprop="url" title="Mise à jour de l'état (Fonction de mise à jour)"><span itemprop="name">Mise à jour de l'état (Fonction de mise à jour)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mise-a-jour-basee-sur-l-etat-precedent" itemprop="url" title="Mise à jour basée sur l'état précédent"><span itemprop="name">Mise à jour basée sur l'état précédent</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/l-etat-dans-les-composants-classe-this-state-this-setstate-comparaison" itemprop="url" title="L'état dans les composants classe (`this.state`, `this.setState`) - Comparaison"><span itemprop="name">L'état dans les composants classe (`this.state`, `this.setState`) - Comparaison</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/quand-utiliser-le-state-vs-les-props" itemprop="url" title="Quand utiliser le state vs les props ?"><span itemprop="name">Quand utiliser le state vs les props ?</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/lifting-state-up-remonter-l-etat-partage-d-etat-entre-composants" itemprop="url" title="Lifting state up (Remonter l'état) : Partage d'état entre composants"><span itemprop="name">Lifting state up (Remonter l'état) : Partage d'état entre composants</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-des-evenements" itemprop="url" title="Gestion des événements"><span itemprop="name">Gestion des événements</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/ecouteurs-d-evenements-en-jsx-onclick-onchange-onsubmit" itemprop="url" title="Ecouteurs d'événements en JSX (onClick, onChange, onSubmit...)"><span itemprop="name">Ecouteurs d'événements en JSX (onClick, onChange, onSubmit...)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestionnaires-d-evenements-event-handlers" itemprop="url" title="Gestionnaires d'événements (Event handlers)"><span itemprop="name">Gestionnaires d'événements (Event handlers)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/l-objet-evenement-synthetique-de-react" itemprop="url" title="L'objet événement synthétique de React"><span itemprop="name">L'objet événement synthétique de React</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/passer-des-arguments-aux-gestionnaires-d-evenements" itemprop="url" title="Passer des arguments aux gestionnaires d'événements"><span itemprop="name">Passer des arguments aux gestionnaires d'événements</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/liaison-bind-et-fonctions-flechees-dans-les-composants-classe-contexte-this-pertinence-historique" itemprop="url" title="Liaison (`bind`) et fonctions fléchées dans les composants classe (Contexte `this`) - Pertinence historique"><span itemprop="name">Liaison (`bind`) et fonctions fléchées dans les composants classe (Contexte `this`) - Pertinence historique</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/rendu-conditionnel" itemprop="url" title="Rendu conditionnel"><span itemprop="name">Rendu conditionnel</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utilisation-des-instructions-if" itemprop="url" title="Utilisation des instructions `if`"><span itemprop="name">Utilisation des instructions `if`</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/operateur-ternaire-condition-expr1-expr2" itemprop="url" title="Opérateur ternaire (`condition ? expr1 : expr2`)"><span itemprop="name">Opérateur ternaire (`condition ? expr1 : expr2`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/operateur-logique-et-pour-le-rendu-conditionnel-court" itemprop="url" title="Opérateur logique ET (`&&`) pour le rendu conditionnel court"><span itemprop="name">Opérateur logique ET (`&&`) pour le rendu conditionnel court</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/renvoyer-null-pour-ne-rien-afficher" itemprop="url" title="Renvoyer `null` pour ne rien afficher"><span itemprop="name">Renvoyer `null` pour ne rien afficher</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/strategies-pour-des-conditions-multiples" itemprop="url" title="Stratégies pour des conditions multiples"><span itemprop="name">Stratégies pour des conditions multiples</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/listes-et-cles-keys" itemprop="url" title="Listes et clés (Keys)"><span itemprop="name">Listes et clés (Keys)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/rendu-de-listes-d-elements-methode-map" itemprop="url" title="Rendu de listes d'éléments (méthode `map()`)"><span itemprop="name">Rendu de listes d'éléments (méthode `map()`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/l-importance-des-key-props-identification-et-performance" itemprop="url" title="L'importance des `key` props : Identification et performance"><span itemprop="name">L'importance des `key` props : Identification et performance</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/choisir-une-bonne-key-stable-unique-et-predictible" itemprop="url" title="Choisir une bonne `key` (stable, unique et prédictible)"><span itemprop="name">Choisir une bonne `key` (stable, unique et prédictible)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/pieges-courants-avec-les-cles-index-comme-cle" itemprop="url" title="Pièges courants avec les clés (index comme clé)"><span itemprop="name">Pièges courants avec les clés (index comme clé)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/formulaires" itemprop="url" title="Formulaires"><span itemprop="name">Formulaires</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/composants-controles-controlled-components-liaison-etat-et-input" itemprop="url" title="Composants contrôlés (Controlled components) : Liaison état et input"><span itemprop="name">Composants contrôlés (Controlled components) : Liaison état et input</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-des-differents-types-d-inputs-text-textarea-select-checkbox-radio" itemprop="url" title="Gestion des différents types d'inputs (text, textarea, select, checkbox, radio)"><span itemprop="name">Gestion des différents types d'inputs (text, textarea, select, checkbox, radio)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-de-la-soumission-de-formulaire-onsubmit" itemprop="url" title="Gestion de la soumission de formulaire (`onSubmit`)"><span itemprop="name">Gestion de la soumission de formulaire (`onSubmit`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/validation-de-base-des-formulaires" itemprop="url" title="Validation de base des formulaires"><span itemprop="name">Validation de base des formulaires</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/composants-non-controles-uncontrolled-components-et-useref-alternative" itemprop="url" title="Composants non contrôlés (Uncontrolled components) et `useRef` (Alternative)"><span itemprop="name">Composants non contrôlés (Uncontrolled components) et `useRef` (Alternative)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/bibliotheques-de-gestion-de-formulaires-react-hook-form-formik-apercu" itemprop="url" title="Bibliothèques de gestion de formulaires (React Hook Form, Formik - Aperçu)"><span itemprop="name">Bibliothèques de gestion de formulaires (React Hook Form, Formik - Aperçu)</span></a></li></ol></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/maitrise-des-hooks" itemprop="url" title="Maîtrise des Hooks"><span itemprop="name">Maîtrise des Hooks</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/usestate-revisite-et-cas-avances" itemprop="url" title="`useState` - Revisité et cas avancés"><span itemprop="name">`useState` - Revisité et cas avancés</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/initialisation-paresseuse-lazy-initial-state" itemprop="url" title="Initialisation paresseuse (Lazy initial state)"><span itemprop="name">Initialisation paresseuse (Lazy initial state)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mises-a-jour-fonctionnelles-pour-garantir-la-fraicheur-de-l-etat" itemprop="url" title="Mises à jour fonctionnelles pour garantir la fraîcheur de l'état"><span itemprop="name">Mises à jour fonctionnelles pour garantir la fraîcheur de l'état</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-d-objets-et-de-tableaux-dans-l-etat-immutabilite" itemprop="url" title="Gestion d'objets et de tableaux dans l'état (Immutabilité)"><span itemprop="name">Gestion d'objets et de tableaux dans l'état (Immutabilité)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/useeffect-effets-de-bord" itemprop="url" title="`useEffect` - Effets de bord"><span itemprop="name">`useEffect` - Effets de bord</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-aux-effets-de-bord-data-fetching-subscriptions-timers-mutations-manuelles-du-dom" itemprop="url" title="Introduction aux effets de bord (Data fetching, subscriptions, timers, mutations manuelles du DOM)"><span itemprop="name">Introduction aux effets de bord (Data fetching, subscriptions, timers, mutations manuelles du DOM)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utilisation-de-useeffect-pour-executer-du-code-apres-le-rendu" itemprop="url" title="Utilisation de `useEffect` pour exécuter du code après le rendu"><span itemprop="name">Utilisation de `useEffect` pour exécuter du code après le rendu</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/le-tableau-des-dependances-controler-l-execution-de-l-effet" itemprop="url" title="Le tableau des dépendances : Contrôler l'exécution de l'effet"><span itemprop="name">Le tableau des dépendances : Contrôler l'exécution de l'effet</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/fonction-de-nettoyage-cleanup-function-prevenir-les-fuites-memoire" itemprop="url" title="Fonction de nettoyage (Cleanup function) : Prévenir les fuites mémoire"><span itemprop="name">Fonction de nettoyage (Cleanup function) : Prévenir les fuites mémoire</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/useeffect-sans-dependances-montage-demontage-et-mises-a-jour" itemprop="url" title="`useEffect` sans dépendances (montage/démontage et mises à jour)"><span itemprop="name">`useEffect` sans dépendances (montage/démontage et mises à jour)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/useeffect-avec-dependances-vides-montage-uniquement" itemprop="url" title="`useEffect` avec dépendances vides (`[]`) (montage uniquement)"><span itemprop="name">`useEffect` avec dépendances vides (`[]`) (montage uniquement)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/useeffect-avec-dependances-specifiques" itemprop="url" title="`useEffect` avec dépendances spécifiques"><span itemprop="name">`useEffect` avec dépendances spécifiques</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/pieges-courants-avec-useeffect-dependances-manquantes-boucles-infinies" itemprop="url" title="Pièges courants avec `useEffect` (dépendances manquantes, boucles infinies)"><span itemprop="name">Pièges courants avec `useEffect` (dépendances manquantes, boucles infinies)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/usecontext-partage-d-etat-global-simplifie" itemprop="url" title="`useContext` - Partage d'état global simplifié"><span itemprop="name">`useContext` - Partage d'état global simplifié</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/le-probleme-du-prop-drilling" itemprop="url" title="Le problème du "prop drilling""><span itemprop="name">Le problème du "prop drilling"</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-a-l-api-context-react-createcontext-provider-consumer" itemprop="url" title="Introduction à l'API Context (React.createContext, Provider, Consumer)"><span itemprop="name">Introduction à l'API Context (React.createContext, Provider, Consumer)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/le-hook-usecontext-consommer-le-contexte-facilement" itemprop="url" title="Le hook `useContext` : Consommer le contexte facilement"><span itemprop="name">Le hook `useContext` : Consommer le contexte facilement</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/structurer-les-providers" itemprop="url" title="Structurer les Providers"><span itemprop="name">Structurer les Providers</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mises-a-jour-du-contexte-et-optimisation-separation-des-contextes" itemprop="url" title="Mises à jour du contexte et optimisation (séparation des contextes)"><span itemprop="name">Mises à jour du contexte et optimisation (séparation des contextes)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/quand-utiliser-context-vs-state-local-vs-state-management-externe" itemprop="url" title="Quand utiliser Context vs state local vs state management externe ?"><span itemprop="name">Quand utiliser Context vs state local vs state management externe ?</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/useref-acces-aux-elements-dom-et-valeurs-persistantes" itemprop="url" title="`useRef` - Accès aux éléments DOM et valeurs persistantes"><span itemprop="name">`useRef` - Accès aux éléments DOM et valeurs persistantes</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/acceder-aux-noeuds-du-dom-focus-mesures-integration-de-bibliotheques-tierces" itemprop="url" title="Accéder aux noeuds du DOM (focus, mesures, intégration de bibliothèques tierces)"><span itemprop="name">Accéder aux noeuds du DOM (focus, mesures, intégration de bibliothèques tierces)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/stocker-des-valeurs-mutables-persistantes-sans-causer-de-re-render" itemprop="url" title="Stocker des valeurs mutables persistantes sans causer de re-render"><span itemprop="name">Stocker des valeurs mutables persistantes sans causer de re-render</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/differences-entre-useref-et-le-state" itemprop="url" title="Différences entre `useRef` et le state"><span itemprop="name">Différences entre `useRef` et le state</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/forwardref-transmettre-des-refs-a-des-composants-enfants" itemprop="url" title="`forwardRef` : Transmettre des refs à des composants enfants"><span itemprop="name">`forwardRef` : Transmettre des refs à des composants enfants</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/usereducer-gestion-d-etat-complexe" itemprop="url" title="`useReducer` - Gestion d'état complexe"><span itemprop="name">`useReducer` - Gestion d'état complexe</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/alternative-a-usestate-pour-une-logique-d-etat-plus-complexe" itemprop="url" title="Alternative à `useState` pour une logique d'état plus complexe"><span itemprop="name">Alternative à `useState` pour une logique d'état plus complexe</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/concept-de-reducer-inspire-de-redux" itemprop="url" title="Concept de reducer (inspiré de Redux)"><span itemprop="name">Concept de reducer (inspiré de Redux)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mise-en-place-de-usereducer-etat-initial-fonction-reducer-dispatch" itemprop="url" title="Mise en place de `useReducer` (état initial, fonction reducer, dispatch)"><span itemprop="name">Mise en place de `useReducer` (état initial, fonction reducer, dispatch)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/actions-et-payloads" itemprop="url" title="Actions et payloads"><span itemprop="name">Actions et payloads</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/avantages-par-rapport-a-usestate-logique-centralisee-testabilite-optimisation-des-dispatchs-via-context" itemprop="url" title="Avantages par rapport à `useState` (logique centralisée, testabilité, optimisation des dispatchs via Context)"><span itemprop="name">Avantages par rapport à `useState` (logique centralisée, testabilité, optimisation des dispatchs via Context)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/les-hooks-personnalises-custom-hooks" itemprop="url" title="Les hooks personnalisés (Custom Hooks)"><span itemprop="name">Les hooks personnalisés (Custom Hooks)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/motivation-reutiliser-la-logique-d-etat-et-d-effets" itemprop="url" title="Motivation : Réutiliser la logique d'état et d'effets"><span itemprop="name">Motivation : Réutiliser la logique d'état et d'effets</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/creation-d-un-custom-hook-regles-et-conventions-use" itemprop="url" title="Création d'un custom hook : Règles et conventions (`use...`)"><span itemprop="name">Création d'un custom hook : Règles et conventions (`use...`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/exemples-usefetch-uselocalstorage-usetoggle-useforminput" itemprop="url" title="Exemples : `useFetch`, `useLocalStorage`, `useToggle`, `useFormInput`"><span itemprop="name">Exemples : `useFetch`, `useLocalStorage`, `useToggle`, `useFormInput`</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/partage-de-logique-non-visuelle" itemprop="url" title="Partage de logique non visuelle"><span itemprop="name">Partage de logique non visuelle</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/regles-des-hooks-et-linters" itemprop="url" title="Règles des hooks et linters"><span itemprop="name">Règles des hooks et linters</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/les-deux-regles-fondamentales-des-hooks-appel-au-niveau-superieur-appel-depuis-fonctions-react" itemprop="url" title="Les deux règles fondamentales des hooks (Appel au niveau supérieur, appel depuis fonctions React)"><span itemprop="name">Les deux règles fondamentales des hooks (Appel au niveau supérieur, appel depuis fonctions React)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/plugin-eslint-pour-les-hooks-eslint-plugin-react-hooks" itemprop="url" title="Plugin ESLint pour les hooks (`eslint-plugin-react-hooks`)"><span itemprop="name">Plugin ESLint pour les hooks (`eslint-plugin-react-hooks`)</span></a></li></ol></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/structuration-d-applications-et-interactions" itemprop="url" title="Structuration d'Applications et Interactions"><span itemprop="name">Structuration d'Applications et Interactions</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/styles-et-css-dans-react" itemprop="url" title="Styles et CSS dans React"><span itemprop="name">Styles et CSS dans React</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/css-classique-classname-et-feuilles-de-style-globales-locales" itemprop="url" title="CSS classique (`className`) et feuilles de style globales/locales"><span itemprop="name">CSS classique (`className`) et feuilles de style globales/locales</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/css-modules-styles-scopes-localement" itemprop="url" title="CSS Modules : Styles scopés localement"><span itemprop="name">CSS Modules : Styles scopés localement</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/css-in-js-styled-components-emotion-principes-et-exemples" itemprop="url" title="CSS-in-JS : Styled Components, Emotion (Principes et exemples)"><span itemprop="name">CSS-in-JS : Styled Components, Emotion (Principes et exemples)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/frameworks-css-utility-first-tailwind-css-integration-et-avantages" itemprop="url" title="Frameworks CSS utility-first (Tailwind CSS) : Intégration et avantages"><span itemprop="name">Frameworks CSS utility-first (Tailwind CSS) : Intégration et avantages</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/styles-en-ligne-inline-styles-quand-et-comment" itemprop="url" title="Styles en ligne (Inline styles) : Quand et comment ?"><span itemprop="name">Styles en ligne (Inline styles) : Quand et comment ?</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utilisation-de-preprocesseurs-css-sass-scss-less" itemprop="url" title="Utilisation de préprocesseurs CSS (Sass/SCSS, Less)"><span itemprop="name">Utilisation de préprocesseurs CSS (Sass/SCSS, Less)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/routage-cote-client-avec-react-router" itemprop="url" title="Routage côté client avec React Router"><span itemprop="name">Routage côté client avec React Router</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-au-routage-spa-single-page-application" itemprop="url" title="Introduction au routage SPA (Single Page Application)"><span itemprop="name">Introduction au routage SPA (Single Page Application)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/installation-et-configuration-de-react-router-dom-browserrouter-routes-route" itemprop="url" title="Installation et configuration de React Router DOM (`BrowserRouter`, `Routes`, `Route`)"><span itemprop="name">Installation et configuration de React Router DOM (`BrowserRouter`, `Routes`, `Route`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/creation-de-liens-link-navlink" itemprop="url" title="Création de liens (`Link`, `NavLink`)"><span itemprop="name">Création de liens (`Link`, `NavLink`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/routes-dynamiques-et-parametres-d-url-useparams" itemprop="url" title="Routes dynamiques et paramètres d'URL (`useParams`)"><span itemprop="name">Routes dynamiques et paramètres d'URL (`useParams`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/routes-imbriquees-outlet" itemprop="url" title="Routes imbriquées (`Outlet`)"><span itemprop="name">Routes imbriquées (`Outlet`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/redirections-navigate" itemprop="url" title="Redirections (`Navigate`)"><span itemprop="name">Redirections (`Navigate`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/navigation-programmatique-usenavigate" itemprop="url" title="Navigation programmatique (`useNavigate`)"><span itemprop="name">Navigation programmatique (`useNavigate`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/routes-protegees-authentification" itemprop="url" title="Routes protégées (Authentification)"><span itemprop="name">Routes protégées (Authentification)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-du-not-found-404" itemprop="url" title="Gestion du "Not Found" (404)"><span itemprop="name">Gestion du "Not Found" (404)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/parametres-de-recherche-usesearchparams-et-etat-de-localisation-uselocation" itemprop="url" title="Paramètres de recherche (`useSearchParams`) et état de localisation (`useLocation`)"><span itemprop="name">Paramètres de recherche (`useSearchParams`) et état de localisation (`useLocation`)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-d-etat-globale-avancee" itemprop="url" title="Gestion d'état globale avancée"><span itemprop="name">Gestion d'état globale avancée</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/limites-de-usestate-et-usecontext-pour-les-grandes-applications" itemprop="url" title="Limites de `useState` et `useContext` pour les grandes applications"><span itemprop="name">Limites de `useState` et `useContext` pour les grandes applications</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-aux-bibliotheques-de-gestion-d-etat-dediees" itemprop="url" title="Introduction aux bibliothèques de gestion d'état dédiées"><span itemprop="name">Introduction aux bibliothèques de gestion d'état dédiées</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/redux-concepts-cles-store-actions-reducers-dispatch-middleware-thunk-saga" itemprop="url" title="Redux : Concepts clés (Store, Actions, Reducers, Dispatch, Middleware - Thunk/Saga)"><span itemprop="name">Redux : Concepts clés (Store, Actions, Reducers, Dispatch, Middleware - Thunk/Saga)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mise-en-place-avec-react-redux-provider-useselector-usedispatch" itemprop="url" title="Mise en place avec React Redux (`Provider`, `useSelector`, `useDispatch`)"><span itemprop="name">Mise en place avec React Redux (`Provider`, `useSelector`, `useDispatch`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/redux-toolkit-l-approche-moderne-et-simplifiee" itemprop="url" title="Redux Toolkit : L'approche moderne et simplifiée"><span itemprop="name">Redux Toolkit : L'approche moderne et simplifiée</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/zustand-approche-minimaliste-basee-sur-les-hooks" itemprop="url" title="Zustand : Approche minimaliste basée sur les hooks"><span itemprop="name">Zustand : Approche minimaliste basée sur les hooks</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mobx-recoil-jotai-apercu-des-alternatives-et-de-leurs-philosophies" itemprop="url" title="MobX, Recoil, Jotai (Aperçu des alternatives et de leurs philosophies)"><span itemprop="name">MobX, Recoil, Jotai (Aperçu des alternatives et de leurs philosophies)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/choisir-la-bonne-strategie-de-gestion-d-etat-pour-votre-projet" itemprop="url" title="Choisir la bonne stratégie de gestion d'état pour votre projet"><span itemprop="name">Choisir la bonne stratégie de gestion d'état pour votre projet</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/communication-avec-les-api-data-fetching" itemprop="url" title="Communication avec les API (Data fetching)"><span itemprop="name">Communication avec les API (Data fetching)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utilisation-de-fetch-ou-axios-dans-useeffect" itemprop="url" title="Utilisation de `fetch` ou `axios` dans `useEffect`"><span itemprop="name">Utilisation de `fetch` ou `axios` dans `useEffect`</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-des-etats-de-chargement-loading-succes-success-et-erreur-error" itemprop="url" title="Gestion des états de chargement (Loading), succès (Success) et erreur (Error)"><span itemprop="name">Gestion des états de chargement (Loading), succès (Success) et erreur (Error)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/annulation-des-requetes-abortcontroller" itemprop="url" title="Annulation des requêtes (AbortController)"><span itemprop="name">Annulation des requêtes (AbortController)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/bibliotheques-dediees-au-data-fetching" itemprop="url" title="Bibliothèques dédiées au data fetching :"><span itemprop="name">Bibliothèques dédiées au data fetching :</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/swr-stale-while-revalidate" itemprop="url" title="SWR (Stale-While-Revalidate)"><span itemprop="name">SWR (Stale-While-Revalidate)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/react-query-tanstack-query-caching-synchronisation-mises-a-jour-en-arriere-plan" itemprop="url" title="React Query (TanStack Query) : Caching, synchronisation, mises à jour en arrière-plan"><span itemprop="name">React Query (TanStack Query) : Caching, synchronisation, mises à jour en arrière-plan</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-des-requetes-post-put-delete" itemprop="url" title="Gestion des requêtes POST, PUT, DELETE"><span itemprop="name">Gestion des requêtes POST, PUT, DELETE</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/authentification-et-en-tetes-headers" itemprop="url" title="Authentification et en-têtes (Headers)"><span itemprop="name">Authentification et en-têtes (Headers)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-des-erreurs-d-api" itemprop="url" title="Gestion des erreurs d'API"><span itemprop="name">Gestion des erreurs d'API</span></a></li></ol></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/optimisation-et-patterns-avances" itemprop="url" title="Optimisation et Patterns Avancés"><span itemprop="name">Optimisation et Patterns Avancés</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/optimisation-des-performances-de-rendu" itemprop="url" title="Optimisation des performances de rendu"><span itemprop="name">Optimisation des performances de rendu</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/comprendre-le-processus-de-rendu-et-de-reconciliation-de-react" itemprop="url" title="Comprendre le processus de rendu et de réconciliation de React"><span itemprop="name">Comprendre le processus de rendu et de réconciliation de React</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/outils-de-profiling-react-react-devtools-profiler" itemprop="url" title="Outils de profiling React (React DevTools Profiler)"><span itemprop="name">Outils de profiling React (React DevTools Profiler)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/react-memo-memoisation-des-composants-fonctionnels" itemprop="url" title="`React.memo` : Mémoïsation des composants fonctionnels"><span itemprop="name">`React.memo` : Mémoïsation des composants fonctionnels</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/usememo-memoisation-des-valeurs-calculees" itemprop="url" title="`useMemo` : Mémoïsation des valeurs calculées"><span itemprop="name">`useMemo` : Mémoïsation des valeurs calculées</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/usecallback-memoisation-des-fonctions-callback" itemprop="url" title="`useCallback` : Mémoïsation des fonctions callback"><span itemprop="name">`useCallback` : Mémoïsation des fonctions callback</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/quand-et-comment-utiliser-memo-usememo-usecallback-eviter-l-optimisation-prematuree" itemprop="url" title="Quand et comment utiliser `memo`, `useMemo`, `useCallback` (Eviter l'optimisation prématurée)"><span itemprop="name">Quand et comment utiliser `memo`, `useMemo`, `useCallback` (Eviter l'optimisation prématurée)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/virtualisation-des-listes-longues-react-window-react-virtualized" itemprop="url" title="Virtualisation des listes longues (react-window, react-virtualized)"><span itemprop="name">Virtualisation des listes longues (react-window, react-virtualized)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/code-splitting-decoupage-du-code" itemprop="url" title="Code splitting (Découpage du code)"><span itemprop="name">Code splitting (Découpage du code)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/pourquoi-decouper-son-code-reduire-la-taille-du-bundle-initial" itemprop="url" title="Pourquoi découper son code ? (Réduire la taille du bundle initial)"><span itemprop="name">Pourquoi découper son code ? (Réduire la taille du bundle initial)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/react-lazy-chargement-paresseux-des-composants" itemprop="url" title="`React.lazy` : Chargement paresseux des composants"><span itemprop="name">`React.lazy` : Chargement paresseux des composants</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/suspense-gerer-l-etat-de-chargement-des-composants-lazy" itemprop="url" title="`Suspense` : Gérer l'état de chargement des composants lazy"><span itemprop="name">`Suspense` : Gérer l'état de chargement des composants lazy</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/code-splitting-base-sur-les-routes" itemprop="url" title="Code splitting basé sur les routes"><span itemprop="name">Code splitting basé sur les routes</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-des-erreurs-error-boundaries" itemprop="url" title="Gestion des erreurs (Error Boundaries)"><span itemprop="name">Gestion des erreurs (Error Boundaries)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-aux-error-boundaries-composants-classe-uniquement-pour-la-capture" itemprop="url" title="Introduction aux Error Boundaries (Composants classe uniquement pour la capture)"><span itemprop="name">Introduction aux Error Boundaries (Composants classe uniquement pour la capture)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/implementation-d-un-error-boundary-componentdidcatch-getderivedstatefromerror" itemprop="url" title="Implémentation d'un Error Boundary (`componentDidCatch`, `getDerivedStateFromError`)"><span itemprop="name">Implémentation d'un Error Boundary (`componentDidCatch`, `getDerivedStateFromError`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/placement-strategique-des-error-boundaries" itemprop="url" title="Placement stratégique des Error Boundaries"><span itemprop="name">Placement stratégique des Error Boundaries</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utilisation-avec-des-bibliotheques-ex-react-error-boundary-pour-une-approche-hooks-friendly" itemprop="url" title="Utilisation avec des bibliothèques (ex: `react-error-boundary`) pour une approche Hooks-friendly"><span itemprop="name">Utilisation avec des bibliothèques (ex: `react-error-boundary`) pour une approche Hooks-friendly</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/accessibilite-a11y" itemprop="url" title="Accessibilité (a11y)"><span itemprop="name">Accessibilité (a11y)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/importance-de-l-accessibilite-web" itemprop="url" title="Importance de l'accessibilité web"><span itemprop="name">Importance de l'accessibilité web</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/attributs-aria-et-html-semantique-dans-react" itemprop="url" title="Attributs ARIA et HTML sémantique dans React"><span itemprop="name">Attributs ARIA et HTML sémantique dans React</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-du-focus" itemprop="url" title="Gestion du focus"><span itemprop="name">Gestion du focus</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/outils-de-test-d-accessibilite-axe-lighthouse" itemprop="url" title="Outils de test d'accessibilité (axe, Lighthouse)"><span itemprop="name">Outils de test d'accessibilité (axe, Lighthouse)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/bonnes-pratiques-pour-les-formulaires-modales-etc" itemprop="url" title="Bonnes pratiques pour les formulaires, modales, etc."><span itemprop="name">Bonnes pratiques pour les formulaires, modales, etc.</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/portails-portals" itemprop="url" title="Portails (Portals)"><span itemprop="name">Portails (Portals)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/rendre-des-composants-en-dehors-de-leur-hierarchie-dom-parente" itemprop="url" title="Rendre des composants en dehors de leur hiérarchie DOM parente"><span itemprop="name">Rendre des composants en dehors de leur hiérarchie DOM parente</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/cas-d-usage-modales-tooltips-popovers" itemprop="url" title="Cas d'usage : Modales, tooltips, popovers"><span itemprop="name">Cas d'usage : Modales, tooltips, popovers</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/creation-et-utilisation-de-portails-reactdom-createportal" itemprop="url" title="Création et utilisation de portails (`ReactDOM.createPortal`)"><span itemprop="name">Création et utilisation de portails (`ReactDOM.createPortal`)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/patterns-de-composition-avances" itemprop="url" title="Patterns de composition avancés"><span itemprop="name">Patterns de composition avancés</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/higher-order-components-hocs-comprendre-le-pattern-moins-courant-avec-les-hooks" itemprop="url" title="Higher-Order Components (HOCs) - Comprendre le pattern (moins courant avec les hooks)"><span itemprop="name">Higher-Order Components (HOCs) - Comprendre le pattern (moins courant avec les hooks)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/render-props-comprendre-le-pattern-moins-courant-avec-les-hooks" itemprop="url" title="Render Props - Comprendre le pattern (moins courant avec les hooks)"><span itemprop="name">Render Props - Comprendre le pattern (moins courant avec les hooks)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/compound-components-composants-composes-api-flexible-et-expressive" itemprop="url" title="Compound Components (Composants composés) : API flexible et expressive"><span itemprop="name">Compound Components (Composants composés) : API flexible et expressive</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/provider-pattern-via-context-api" itemprop="url" title="Provider Pattern (via Context API)"><span itemprop="name">Provider Pattern (via Context API)</span></a></li></ol></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-et-qualite-du-code" itemprop="url" title="Tests et Qualité du Code"><span itemprop="name">Tests et Qualité du Code</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-aux-tests-dans-react" itemprop="url" title="Introduction aux tests dans React"><span itemprop="name">Introduction aux tests dans React</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/pourquoi-tester-types-de-tests-unitaire-integration-end-to-end" itemprop="url" title="Pourquoi tester ? Types de tests (Unitaire, intégration, end-to-end)"><span itemprop="name">Pourquoi tester ? Types de tests (Unitaire, intégration, end-to-end)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/pyramide-des-tests" itemprop="url" title="Pyramide des tests"><span itemprop="name">Pyramide des tests</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/outils-courants-jest-test-runner-react-testing-library-philosophie-et-utilisation" itemprop="url" title="Outils courants : Jest (Test runner), React Testing Library (Philosophie et utilisation)"><span itemprop="name">Outils courants : Jest (Test runner), React Testing Library (Philosophie et utilisation)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-unitaires-et-d-integration-avec-jest-et-react-testing-library-rtl" itemprop="url" title="Tests unitaires et d'intégration avec Jest et React Testing Library (RTL)"><span itemprop="name">Tests unitaires et d'intégration avec Jest et React Testing Library (RTL)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/configuration-de-l-environnement-de-test" itemprop="url" title="Configuration de l'environnement de test"><span itemprop="name">Configuration de l'environnement de test</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/philosophie-de-rtl-tester-comme-un-utilisateur" itemprop="url" title="Philosophie de RTL : Tester comme un utilisateur"><span itemprop="name">Philosophie de RTL : Tester comme un utilisateur</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/rendu-de-composants-render" itemprop="url" title="Rendu de composants (`render`)"><span itemprop="name">Rendu de composants (`render`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/requetes-de-selection-queries-getby-findby-queryby" itemprop="url" title="Requêtes de sélection (Queries : getBy, findBy, queryBy...)"><span itemprop="name">Requêtes de sélection (Queries : getBy, findBy, queryBy...)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/simulation-d-evenements-utilisateur-user-event" itemprop="url" title="Simulation d'événements utilisateur (`user-event`)"><span itemprop="name">Simulation d'événements utilisateur (`user-event`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/assertions-avec-jest-expect" itemprop="url" title="Assertions avec Jest (`expect`)"><span itemprop="name">Assertions avec Jest (`expect`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-de-composants-simples-et-complexes" itemprop="url" title="Tests de composants simples et complexes"><span itemprop="name">Tests de composants simples et complexes</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-de-hooks-personnalises-renderhook" itemprop="url" title="Tests de hooks personnalisés (`renderHook`)"><span itemprop="name">Tests de hooks personnalisés (`renderHook`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mocking-de-modules-et-de-fonctions-appels-api-etc" itemprop="url" title="Mocking de modules et de fonctions (Appels API, etc.)"><span itemprop="name">Mocking de modules et de fonctions (Appels API, etc.)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-asynchrones" itemprop="url" title="Tests asynchrones"><span itemprop="name">Tests asynchrones</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-de-contexte-et-de-routage" itemprop="url" title="Tests de contexte et de routage"><span itemprop="name">Tests de contexte et de routage</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-end-to-end-e2e" itemprop="url" title="Tests end-to-end (E2E)"><span itemprop="name">Tests end-to-end (E2E)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-aux-tests-e2e-simuler-le-parcours-utilisateur-complet" itemprop="url" title="Introduction aux tests E2E (Simuler le parcours utilisateur complet)"><span itemprop="name">Introduction aux tests E2E (Simuler le parcours utilisateur complet)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/outils-populaires-cypress-playwright-apercu" itemprop="url" title="Outils populaires : Cypress, Playwright (Aperçu)"><span itemprop="name">Outils populaires : Cypress, Playwright (Aperçu)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/ecriture-de-scenarios-de-test-e2e-de-base" itemprop="url" title="Ecriture de scénarios de test E2E de base"><span itemprop="name">Ecriture de scénarios de test E2E de base</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/qualite-du-code-et-bonnes-pratiques" itemprop="url" title="Qualité du code et bonnes pratiques"><span itemprop="name">Qualité du code et bonnes pratiques</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/linting-avec-eslint-et-configuration-pour-react" itemprop="url" title="Linting avec ESLint et configuration pour React"><span itemprop="name">Linting avec ESLint et configuration pour React</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/formatage-avec-prettier" itemprop="url" title="Formatage avec Prettier"><span itemprop="name">Formatage avec Prettier</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/conventions-de-nommage-et-structure-de-projet" itemprop="url" title="Conventions de nommage et structure de projet"><span itemprop="name">Conventions de nommage et structure de projet</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/ecrire-du-code-lisible-et-maintenable" itemprop="url" title="Ecrire du code lisible et maintenable"><span itemprop="name">Ecrire du code lisible et maintenable</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/revue-de-code-code-reviews" itemprop="url" title="Revue de code (Code reviews)"><span itemprop="name">Revue de code (Code reviews)</span></a></li></ol></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/ecosysteme-et-outils-complementaires" itemprop="url" title="Ecosystème et outils complémentaires"><span itemprop="name">Ecosystème et outils complémentaires</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/frameworks-meta-bases-sur-react" itemprop="url" title="Frameworks meta basés sur React"><span itemprop="name">Frameworks meta basés sur React</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/next-js-rendu-cote-serveur-ssr-generation-de-site-statique-ssg-routage-base-sur-les-fichiers-api-routes-optimisation-d-images" itemprop="url" title="Next.js : Rendu côté serveur (SSR), génération de site statique (SSG), routage basé sur les fichiers, API Routes, optimisation d'images..."><span itemprop="name">Next.js : Rendu côté serveur (SSR), génération de site statique (SSG), routage basé sur les fichiers, API Routes, optimisation d'images...</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/remix-focus-sur-les-fondamentaux-du-web-ssr-ssg-gestion-des-formulaires-routage-imbrique-puissant" itemprop="url" title="Remix : Focus sur les fondamentaux du web, SSR/SSG, gestion des formulaires, routage imbriqué puissant."><span itemprop="name">Remix : Focus sur les fondamentaux du web, SSR/SSG, gestion des formulaires, routage imbriqué puissant.</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gatsby-generateur-de-site-statique-puissant-focus-sur-la-performance-et-les-sources-de-donnees-via-graphql" itemprop="url" title="Gatsby : Générateur de site statique puissant (focus sur la performance et les sources de données via GraphQL)."><span itemprop="name">Gatsby : Générateur de site statique puissant (focus sur la performance et les sources de données via GraphQL).</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/quand-utiliser-un-framework-meta-vs-cra-vite" itemprop="url" title="Quand utiliser un framework meta vs CRA/Vite ?"><span itemprop="name">Quand utiliser un framework meta vs CRA/Vite ?</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/react-native-apercu" itemprop="url" title="React Native (Aperçu)"><span itemprop="name">React Native (Aperçu)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-a-react-native-creer-des-applications-mobiles-natives-avec-react" itemprop="url" title="Introduction à React Native : Créer des applications mobiles natives avec React"><span itemprop="name">Introduction à React Native : Créer des applications mobiles natives avec React</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/differences-cles-avec-react-pour-le-web" itemprop="url" title="Différences clés avec React pour le web"><span itemprop="name">Différences clés avec React pour le web</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/composants-specifiques-a-la-plateforme" itemprop="url" title="Composants spécifiques à la plateforme"><span itemprop="name">Composants spécifiques à la plateforme</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utiliser-typescript-avec-react" itemprop="url" title="Utiliser TypeScript avec React"><span itemprop="name">Utiliser TypeScript avec React</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-a-typescript-et-ses-avantages-typage-statique" itemprop="url" title="Introduction à TypeScript et ses avantages (Typage statique)"><span itemprop="name">Introduction à TypeScript et ses avantages (Typage statique)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/configuration-d-un-projet-react-avec-typescript" itemprop="url" title="Configuration d'un projet React avec TypeScript"><span itemprop="name">Configuration d'un projet React avec TypeScript</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/typer-les-composants-fonctionnels-react-fc-et-les-props-interface-type" itemprop="url" title="Typer les composants fonctionnels (`React.FC`) et les props (`interface`, `type`)"><span itemprop="name">Typer les composants fonctionnels (`React.FC`) et les props (`interface`, `type`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/typer-le-state-usestate-type" itemprop="url" title="Typer le state (`useState<Type>`)"><span itemprop="name">Typer le state (`useState<Type>`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/typer-les-evenements" itemprop="url" title="Typer les événements"><span itemprop="name">Typer les événements</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/typer-les-refs-useref-type" itemprop="url" title="Typer les refs (`useRef<Type>`)"><span itemprop="name">Typer les refs (`useRef<Type>`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/typer-le-context-createcontext-type" itemprop="url" title="Typer le Context (`createContext<Type>`)"><span itemprop="name">Typer le Context (`createContext<Type>`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/typer-les-hooks-personnalises" itemprop="url" title="Typer les hooks personnalisés"><span itemprop="name">Typer les hooks personnalisés</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/utilisation-de-types-provenant-de-bibliotheques-tierces-types" itemprop="url" title="Utilisation de types provenant de bibliothèques tierces (`@types/...`)"><span itemprop="name">Utilisation de types provenant de bibliothèques tierces (`@types/...`)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/server-components-concept" itemprop="url" title="Server Components (Concept)"><span itemprop="name">Server Components (Concept)</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/introduction-aux-react-server-components-rsc-principalement-via-next-js-remix" itemprop="url" title="Introduction aux React Server Components (RSC) - (Principalement via Next.js/Remix)"><span itemprop="name">Introduction aux React Server Components (RSC) - (Principalement via Next.js/Remix)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/differences-entre-server-components-et-client-components" itemprop="url" title="Différences entre Server Components et Client Components"><span itemprop="name">Différences entre Server Components et Client Components</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/avantages-reduction-du-bundle-js-client-acces-direct-au-backend" itemprop="url" title="Avantages (Réduction du bundle JS client, accès direct au backend)"><span itemprop="name">Avantages (Réduction du bundle JS client, accès direct au backend)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/modele-mental-et-utilisation" itemprop="url" title="Modèle mental et utilisation"><span itemprop="name">Modèle mental et utilisation</span></a></li></ol></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/mise-en-production-et-suivi" itemprop="url" title="Mise en Production et Suivi"><span itemprop="name">Mise en Production et Suivi</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/processus-de-build" itemprop="url" title="Processus de build"><span itemprop="name">Processus de build</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/comprendre-le-build-de-production-npm-run-build-yarn-build" itemprop="url" title="Comprendre le build de production (`npm run build` / `yarn build`)"><span itemprop="name">Comprendre le build de production (`npm run build` / `yarn build`)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/optimisations-du-build-minification-bundling-tree-shaking" itemprop="url" title="Optimisations du build (Minification, bundling, tree shaking)"><span itemprop="name">Optimisations du build (Minification, bundling, tree shaking)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/variables-d-environnement-env" itemprop="url" title="Variables d'environnement (`.env`)"><span itemprop="name">Variables d'environnement (`.env`)</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/strategies-de-deploiement" itemprop="url" title="Stratégies de déploiement"><span itemprop="name">Stratégies de déploiement</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/deploiement-sur-des-plateformes-statiques-netlify-vercel-github-pages" itemprop="url" title="Déploiement sur des plateformes statiques (Netlify, Vercel, GitHub Pages)"><span itemprop="name">Déploiement sur des plateformes statiques (Netlify, Vercel, GitHub Pages)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/deploiement-sur-des-serveurs-traditionnels-node-js-express-servant-le-build" itemprop="url" title="Déploiement sur des serveurs traditionnels (Node.js/Express servant le build)"><span itemprop="name">Déploiement sur des serveurs traditionnels (Node.js/Express servant le build)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/deploiement-dans-des-conteneurs-docker" itemprop="url" title="Déploiement dans des conteneurs (Docker)"><span itemprop="name">Déploiement dans des conteneurs (Docker)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/integration-continue-et-deploiement-continu-ci-cd-avec-github-actions-gitlab-ci-etc" itemprop="url" title="Intégration continue et déploiement continu (CI/CD) avec GitHub Actions, GitLab CI, etc."><span itemprop="name">Intégration continue et déploiement continu (CI/CD) avec GitHub Actions, GitLab CI, etc.</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/monitoring-et-debugging-en-production" itemprop="url" title="Monitoring et debugging en production"><span itemprop="name">Monitoring et debugging en production</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/outils-de-suivi-d-erreurs-sentry-logrocket" itemprop="url" title="Outils de suivi d'erreurs (Sentry, LogRocket)"><span itemprop="name">Outils de suivi d'erreurs (Sentry, LogRocket)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/analyse-de-performance-web-vitals-lighthouse-ci" itemprop="url" title="Analyse de performance (Web Vitals, Lighthouse CI)"><span itemprop="name">Analyse de performance (Web Vitals, Lighthouse CI)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/techniques-de-debogage-avancees" itemprop="url" title="Techniques de débogage avancées"><span itemprop="name">Techniques de débogage avancées</span></a></li></ol></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/projet-pratique-et-conclusion" itemprop="url" title="Projet Pratique et Conclusion"><span itemprop="name">Projet Pratique et Conclusion</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/projet-de-synthese" itemprop="url" title="Projet de synthèse"><span itemprop="name">Projet de synthèse</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/definition-du-projet-ex-application-e-commerce-tableau-de-bord-reseau-social-simple" itemprop="url" title="Définition du projet (Ex: Application e-commerce, tableau de bord, réseau social simple)"><span itemprop="name">Définition du projet (Ex: Application e-commerce, tableau de bord, réseau social simple)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/application-pratique-des-concepts-appris-tout-au-long-du-cours" itemprop="url" title="Application pratique des concepts appris tout au long du cours"><span itemprop="name">Application pratique des concepts appris tout au long du cours</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/phases-du-projet-planification-developpement-test-deploiement" itemprop="url" title="Phases du projet : Planification, développement, test, déploiement"><span itemprop="name">Phases du projet : Planification, développement, test, déploiement</span></a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/conclusion-et-prochaines-etapes" itemprop="url" title="Conclusion et prochaines étapes"><span itemprop="name">Conclusion et prochaines étapes</span></a><ol><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/resume-des-competences-acquises" itemprop="url" title="Résumé des compétences acquises"><span itemprop="name">Résumé des compétences acquises</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/comment-rester-a-jour-avec-l-ecosysteme-react-veille-technologique" itemprop="url" title="Comment rester à jour avec l'écosystème React (Veille technologique)"><span itemprop="name">Comment rester à jour avec l'écosystème React (Veille technologique)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/pistes-pour-aller-plus-loin-graphql-websockets-micro-frontends-design-systems" itemprop="url" title="Pistes pour aller plus loin (GraphQL, WebSockets, micro-frontends, design systems)"><span itemprop="name">Pistes pour aller plus loin (GraphQL, WebSockets, micro-frontends, design systems)</span></a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/contribution-a-l-open-source" itemprop="url" title="Contribution à l'Open Source"><span itemprop="name">Contribution à l'Open Source</span></a></li></ol></li></ol></li> </ol></nav></main><footer id="footer" aria-labelledby="footer-heading"><div class="footer-main"><div><h2 id="footer-heading">Pied de page du site CertiQuizz</h2><p class="footer-logo"><img src="/favicon.svg" alt="Logo CertiQuizz" width="40" height="40"><span>ertiQuizz</span></p><p class="footer-description">Votre plateforme de microlearning :<br>1. Testez vos connaissances<br>2. Apprenez de nouvelles compétences<br>3. Excellez dans votre parcours</p><p><a href="/fr/quiz/classement/" title="Classement des membres">🏆 Classement des membres</a></p></div><nav class="footer-navigation" aria-label="Navigation secondaire"><h3>Navigation</h3><ul><li><a href="/fr/quiz-qcm-certification" title="A propos de CertiQuizz, la plateforme de microlearning">A propos</a></li><li><a href="/fr/faq" title="FAQ">FAQ</a></li><li><a href="/fr/contact" title="Contact">Contact</a></li></ul></nav><nav><h3>Légal</h3><ul><li><a href="/fr/mentions-legales" title="Mentions légales">Mentions légales</a></li><li><a href="/fr/politique-de-confidentialite" title="Politique de confidentilité">Politique de confidentilité</a></li><li><a href="/fr/cgu" title="Conditions Générales d'Utilisation">Conditions Générales d'Utilisation</a></li></ul></nav><nav><h3>Suivez-nous</h3><ul><li><a href="/fr/newsletter/" title="S'abonner à la newsletter">Newsletter</a></li></ul></nav></div><div class="footer-bottom"><p>© <span id="copyYear">2025</span> CertiQuizz. Tous droits réservés.</p><p>Conçu avec un objectif d'<a href="/fr/eco-responsabilite-et-performance" title="Eco-conception">éco-conception</a></p></div></footer><div id="overlayBody"></div><div id="overlay2Body"></div><script>/*<![CDATA[*/let loaded=false,f=()=>{loaded=true;let tag = _new("link");tag.rel = "stylesheet";tag.href = "/css/prism.css";_doc.head.appendChild(tag);tag = _new("script");tag.src = "/js/prism.js";tag.async = true;_doc.head.appendChild(tag);ajax({targetId: "quizz",url: "/fr/course/quizz,event",data: {courseId: 1278,name: "composants-controles-controlled-components-liaison-etat-et-input"},success: _event.onSuccess,error: _event.onError});initPageSummary("pageBody","pageSummary");activeMenu(window.location.pathname,"homeLink");initBreadcrumb();gtag("G-Y5V4QB3XL0")};document.getElementById("corejs").onload=f;window.addEventListener("load",()=>{!loaded&&f();});(async ()=>{const mb=document.getElementById("modeBtn"),dm="dark-mode",lm="light-mode",mk="mode",am=localStorage.getItem(mk),d=document.documentElement.classList;function cm(m1){const m2=m1!=dm?dm:lm,c=mb.children;d.add(m1);d.remove(m2);c[0].innerHTML=c[0].innerHTML.replace(m1,{[dm]:lm,[lm]:dm}[m1]);c[1].textContent={[dm]:"Clair",[lm]:"Sombre"}[m1];localStorage.setItem(mk,m1);}cm(am?am:dm);mb.addEventListener("click",(e)=>{e.preventDefault();cm(d.contains(dm)?lm:dm)});})();/*]]>*/</script></body></html>