Bonnes pratiques pour les formulaires, modales, etc.

Appliquez les bonnes pratiques d'accessibilité (a11y) aux formulaires, modales, images, et autres composants courants dans vos applications React pour une meilleure inclusion.

Appliquer les principes d'accessibilité aux composants clés

Au-delà des principes généraux d'accessibilité, certains composants et motifs d'interface utilisateur (UI patterns) courants présentent des défis spécifiques et nécessitent une attention particulière lors de leur implémentation en React. Se concentrer sur les bonnes pratiques pour ces éléments critiques comme les formulaires et les modales peut améliorer considérablement l'accessibilité globale de votre application.

Cette section détaille des recommandations concrètes pour rendre ces composants courants accessibles, en s'appuyant sur le HTML sémantique, les attributs ARIA et une gestion rigoureuse du focus.

Bonnes pratiques pour les formulaires accessibles

Les formulaires sont des points d'interaction essentiels et doivent être utilisables par tous.

Etiquettes explicites () : C'est la règle la plus fondamentale. Chaque champ de formulaire (, </code>, <code><select></code>) doit avoir une étiquette associée via l'attribut <code>htmlFor</code> en JSX, qui correspond à l'<code>id</code> unique de l'élément de formulaire. Cela permet aux utilisateurs de lecteurs d'écran de savoir à quoi sert chaque champ et aux utilisateurs de souris de cliquer sur l'étiquette pour activer le champ.</li></ul><pre class="line-numbers"><code class="language-jsx">function ChampEmail() { const inputId = React.useId(); // Génère un ID unique et stable return ( <div> <label htmlFor={inputId}>Adresse e-mail :</label> <input type="email" id={inputId} name="email" /> </div> ); } </code></pre><ul><li>Groupement des contrôles (<code><fieldset></code>, <code><legend></code>) : Lorsque plusieurs contrôles sont liés (par exemple, une série de boutons radio pour une même question, ou des cases à cocher pour des options multiples), regroupez-les dans un <code><fieldset></code>. Utilisez une balise <code><legend></code> comme premier enfant du <code><fieldset></code> pour fournir une description globale du groupe.</li><li>Indication des champs obligatoires : Indiquez clairement quels champs sont requis, à la fois visuellement (souvent avec un astérisque `*` ou le mot "(requis)") et pour les technologies d'assistance en ajoutant l'attribut <code>aria-required="true"</code> à l'élément de formulaire.</li><li>Gestion des erreurs de validation :<ul><li>Affichez les messages d'erreur de manière claire et à proximité du champ concerné.</li><li>Associez programmatiquement le message d'erreur à l'input en utilisant l'attribut <code>aria-describedby</code> sur l'input, pointant vers l'<code>id</code> de l'élément contenant le message d'erreur. Cela permet aux lecteurs d'écran d'annoncer l'erreur lorsque l'utilisateur arrive sur le champ.</li><li>Optionnellement, ajoutez <code>aria-invalid="true"</code> à l'input en erreur.</li><li>Après une tentative de soumission échouée, déplacez le focus programmatiquement vers le premier champ en erreur pour guider l'utilisateur.</li></ul></li></ul><pre class="line-numbers"><code class="language-jsx">function ChampAvecErreur({ error }) { const inputId = React.useId(); const errorId = error ? `error-${inputId}` : undefined; return ( <div> <label htmlFor={inputId}>Nom :</label> <input type="text" id={inputId} aria-invalid={!!error} aria-describedby={errorId} /> {error && {error}} </div> ); } </code></pre><ul><li>Boutons de soumission clairs : Utilisez une balise <code><button type="submit"></code> avec un texte descriptif (ex: "S'inscrire", "Envoyer le message").</li></ul></section><section><h2 id="section-bonnes-pratiques-pour-les-modales-dialogs-accessibles">Bonnes pratiques pour les modales (Dialogs) accessibles</h2>Les boîtes de dialogue modales, qui apparaissent par-dessus le contenu principal, nécessitent une attention particulière pour l'accessibilité :<ul><li>Rôle ARIA : Utilisez <code>role="dialog"</code> pour la plupart des modales. Si la modale contient un message critique nécessitant une réponse immédiate, utilisez <code>role="alertdialog"</code>.</li><li>Nom accessible : La modale doit avoir un nom. Utilisez <code>aria-labelledby</code> pointant vers l'<code>id</code> du titre visible de la modale. S'il n'y a pas de titre visible, utilisez <code>aria-label</code> pour fournir un nom concis.</li><li>Description (optionnelle) : Si nécessaire, une description plus longue peut être liée via <code>aria-describedby</code>.</li><li>Etat modal : Ajoutez <code>aria-modal="true"</code> à l'élément ayant le `role="dialog"`. Cela indique aux technologies d'assistance que le contenu en dehors de la modale est temporairement inerte.</li><li>Gestion du focus : C'est l'aspect le plus critique :<ul><li>Focus initial : A l'ouverture, déplacez le focus programmatiquement à l'intérieur de la modale, idéalement sur le premier élément interactif (comme le bouton de fermeture ou le premier champ de formulaire), ou sur le conteneur de la modale lui-même (avec `tabIndex="-1"`) si aucun élément interactif n'est immédiatement pertinent.</li><li>Piège à focus (Focus Trap) : Empêchez le focus de sortir de la modale lorsque l'utilisateur appuie sur Tab ou Maj+Tab. Le focus doit rester confiné à l'intérieur des éléments interactifs de la modale. Des bibliothèques comme <code>focus-trap-react</code> peuvent aider.</li><li>Retour du focus : A la fermeture de la modale, renvoyez impérativement le focus à l'élément qui a déclenché son ouverture (bouton, lien...).</li></ul></li><li>Fermeture au clavier : Permettez aux utilisateurs de fermer la modale en appuyant sur la touche `Escape`.</li></ul></section><section><h2 id="section-autres-bonnes-pratiques-courantes">Autres bonnes pratiques courantes</h2><ul><li>Images (<code><img></code>) : Toujours fournir un attribut <code>alt</code>. Décrivez le contenu de l'image si elle apporte une information. Si l'image est purement décorative ou si son information est déjà présente dans le texte adjacent, laissez l'attribut `alt` vide (<code>alt=""</code>) pour que les lecteurs d'écran l'ignorent.</li><li>Liens (<code><a></code>) : Le texte du lien doit être suffisamment descriptif pour comprendre sa destination hors contexte. Evitez les "Cliquez ici" ou "En savoir plus" génériques. Si un lien ouvre une nouvelle fenêtre, indiquez-le (visuellement et/ou via un texte caché ou ARIA).</li><li>Boutons (<code><button></code>) : Le texte doit décrire clairement l'action effectuée. Pour les boutons ne contenant qu'une icône, utilisez <code>aria-label</code> pour fournir une alternative textuelle.</li><li>Contrastes de couleurs : Assurez-vous que le rapport de contraste entre la couleur du texte et celle de son arrière-plan respecte au minimum les ratios définis par les WCAG (généralement 4.5:1 pour le texte normal, 3:1 pour le grand texte). Utilisez des outils pour vérifier vos palettes de couleurs.</li><li>Contenu dynamique : Si du contenu est ajouté, supprimé ou mis à jour dynamiquement, assurez-vous que les technologies d'assistance en sont informées si nécessaire, par exemple en utilisant des régions live ARIA (<code>aria-live="polite"</code> ou <code>aria-live="assertive"</code>) pour les notifications ou les messages d'état.</li></ul>En appliquant systématiquement ces bonnes pratiques spécifiques aux composants courants, en plus des principes généraux, vous ferez un grand pas vers la création d'applications React véritablement accessibles et utilisables par le plus grand nombre.</section><div id="quizz"></div><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/outils-de-test-d-accessibilite-axe-lighthouse" title="Tester l'accessibilité de vos applications React avec axe et Lighthouse" rel="prev">◄ Précédent</a> <a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/portails-portals" title="React Portals : Rendre des composants hors de la hiérarchie DOM" rel="next">Suivant ►</a></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">Les Fondamentaux de React</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">Introduction à React.js</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)">Qu'est-ce que React ? (Bibliothèque vs framework)</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)">Philosophie et avantages de React (Déclaratif, basé sur les composants, apprendre une fois, écrire partout)</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">Le DOM virtuel (Virtual DOM) : Concept et fonctionnement</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)">React vs autres frameworks/bibliothèques (Angular, Vue.js, Svelte)</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.)">L'écosystème React (React Native, Next.js, Gatsby, etc.)</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">Mise en place de l'environnement de développement</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)">Prérequis logiciels (Node.js, npm/yarn)</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)">Création d'un projet React avec Create React App (CRA)</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">Structure d'un projet React typique</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)">Lancement du serveur de développement et outils de base (DevTools)</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)">Alternatives à CRA (Vite, Next.js, configuration manuelle avec Webpack/Babel - Aperçu)</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">JSX - Syntaxe JavaScript étendue</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 ?">Introduction à JSX : Pourquoi et comment ?</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)">Règles de base de JSX (Elément racine unique, fermeture des balises)</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 (`{}`)">Intégration d'expressions JavaScript dans JSX (`{}`)</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.)">Attributs JSX (className, htmlFor, style, etc.)</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)">JSX et la prévention des injections (XSS)</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">Commentaires en JSX</a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/fragments" itemprop="url" title="Fragments">Fragments</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">Les composants React : Blocs de construction fondamentaux</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">Composants fonctionnels (Function Components) - Approche moderne et privilégiée</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)">Composants classe (Class Components) - Comprendre l'héritage (pour maintenance/lecture)</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">Rendu des composants</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)">Composition de composants (imbrication)</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">Modules JavaScript (import/export) pour les composants</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">Props - Passage de données aux composants</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)">Introduction aux props (Propriétés)</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">Passer des props d'un parent à un enfant</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">Lecture des props dans les composants fonctionnels et classe</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">`props.children` : Passer des éléments enfants</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)">Props par défaut (Default Props)</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)">PropTypes : Validation des types de props (Importance et utilisation)</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">Déstructuration des props</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">State - Gestion de l'état local d'un composant</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)">Introduction au concept d'état (State)</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">Le hook `useState` : Introduction et utilisation</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">Déclaration d'une variable d'état</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">Lecture de l'état</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)">Mise à jour de l'état (Fonction de mise à jour)</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">Mise à jour basée sur l'état précédent</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">L'état dans les composants classe (`this.state`, `this.setState`) - Comparaison</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 ?">Quand utiliser le state vs les props ?</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">Lifting state up (Remonter l'état) : Partage d'état entre composants</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">Gestion des événements</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...)">Ecouteurs d'événements en JSX (onClick, onChange, onSubmit...)</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)">Gestionnaires d'événements (Event handlers)</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">L'objet événement synthétique de React</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">Passer des arguments aux gestionnaires d'événements</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">Liaison (`bind`) et fonctions fléchées dans les composants classe (Contexte `this`) - Pertinence historique</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">Rendu conditionnel</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`">Utilisation des instructions `if`</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`)">Opérateur ternaire (`condition ? expr1 : expr2`)</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">Opérateur logique ET (`&&`) pour le rendu conditionnel court</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">Renvoyer `null` pour ne rien afficher</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">Stratégies pour des conditions multiples</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)">Listes et clés (Keys)</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()`)">Rendu de listes d'éléments (méthode `map()`)</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">L'importance des `key` props : Identification et performance</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)">Choisir une bonne `key` (stable, unique et prédictible)</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é)">Pièges courants avec les clés (index comme clé)</a></li></ol></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/formulaires" itemprop="url" title="Formulaires">Formulaires</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">Composants contrôlés (Controlled components) : Liaison état et input</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)">Gestion des différents types d'inputs (text, textarea, select, checkbox, radio)</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`)">Gestion de la soumission de formulaire (`onSubmit`)</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">Validation de base des formulaires</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)">Composants non contrôlés (Uncontrolled components) et `useRef` (Alternative)</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)">Bibliothèques de gestion de formulaires (React Hook Form, Formik - Aperçu)</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">Maîtrise des Hooks</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">`useState` - Revisité et cas avancés</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)">Initialisation paresseuse (Lazy initial state)</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">Mises à jour fonctionnelles pour garantir la fraîcheur de l'état</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é)">Gestion d'objets et de tableaux dans l'état (Immutabilité)</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">`useEffect` - Effets de bord</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)">Introduction aux effets de bord (Data fetching, subscriptions, timers, mutations manuelles du DOM)</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">Utilisation de `useEffect` pour exécuter du code après le rendu</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">Le tableau des dépendances : Contrôler l'exécution de l'effet</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">Fonction de nettoyage (Cleanup function) : Prévenir les fuites mémoire</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)">`useEffect` sans dépendances (montage/démontage et mises à jour)</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)">`useEffect` avec dépendances vides (`[]`) (montage uniquement)</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">`useEffect` avec dépendances spécifiques</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)">Pièges courants avec `useEffect` (dépendances manquantes, boucles infinies)</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é">`useContext` - Partage d'état global simplifié</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"">Le problème du "prop drilling"</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)">Introduction à l'API Context (React.createContext, Provider, Consumer)</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">Le hook `useContext` : Consommer le contexte facilement</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">Structurer les Providers</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)">Mises à jour du contexte et optimisation (séparation des contextes)</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 ?">Quand utiliser Context vs state local vs state management externe ?</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">`useRef` - Accès aux éléments DOM et valeurs persistantes</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)">Accéder aux noeuds du DOM (focus, mesures, intégration de bibliothèques tierces)</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">Stocker des valeurs mutables persistantes sans causer de re-render</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">Différences entre `useRef` et le state</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">`forwardRef` : Transmettre des refs à des composants enfants</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">`useReducer` - Gestion d'état complexe</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">Alternative à `useState` pour une logique d'état plus complexe</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)">Concept de reducer (inspiré de Redux)</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)">Mise en place de `useReducer` (état initial, fonction reducer, dispatch)</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">Actions et payloads</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)">Avantages par rapport à `useState` (logique centralisée, testabilité, optimisation des dispatchs via Context)</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)">Les hooks personnalisés (Custom Hooks)</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">Motivation : Réutiliser la logique d'état et d'effets</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...`)">Création d'un custom hook : Règles et conventions (`use...`)</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`">Exemples : `useFetch`, `useLocalStorage`, `useToggle`, `useFormInput`</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">Partage de logique non visuelle</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">Règles des hooks et linters</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)">Les deux règles fondamentales des hooks (Appel au niveau supérieur, appel depuis fonctions React)</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`)">Plugin ESLint pour les hooks (`eslint-plugin-react-hooks`)</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">Structuration d'Applications et Interactions</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">Styles et CSS dans React</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">CSS classique (`className`) et feuilles de style globales/locales</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">CSS Modules : Styles scopés localement</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)">CSS-in-JS : Styled Components, Emotion (Principes et exemples)</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">Frameworks CSS utility-first (Tailwind CSS) : Intégration et avantages</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 ?">Styles en ligne (Inline styles) : Quand et comment ?</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)">Utilisation de préprocesseurs CSS (Sass/SCSS, Less)</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">Routage côté client avec React Router</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)">Introduction au routage SPA (Single Page Application)</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`)">Installation et configuration de React Router DOM (`BrowserRouter`, `Routes`, `Route`)</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`)">Création de liens (`Link`, `NavLink`)</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`)">Routes dynamiques et paramètres d'URL (`useParams`)</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`)">Routes imbriquées (`Outlet`)</a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/redirections-navigate" itemprop="url" title="Redirections (`Navigate`)">Redirections (`Navigate`)</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`)">Navigation programmatique (`useNavigate`)</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)">Routes protégées (Authentification)</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)">Gestion du "Not Found" (404)</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`)">Paramètres de recherche (`useSearchParams`) et état de localisation (`useLocation`)</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">Gestion d'état globale avancée</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">Limites de `useState` et `useContext` pour les grandes applications</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">Introduction aux bibliothèques de gestion d'état dédiées</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)">Redux : Concepts clés (Store, Actions, Reducers, Dispatch, Middleware - Thunk/Saga)</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`)">Mise en place avec React Redux (`Provider`, `useSelector`, `useDispatch`)</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">Redux Toolkit : L'approche moderne et simplifiée</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">Zustand : Approche minimaliste basée sur les hooks</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)">MobX, Recoil, Jotai (Aperçu des alternatives et de leurs philosophies)</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">Choisir la bonne stratégie de gestion d'état pour votre projet</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)">Communication avec les API (Data fetching)</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`">Utilisation de `fetch` ou `axios` dans `useEffect`</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)">Gestion des états de chargement (Loading), succès (Success) et erreur (Error)</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)">Annulation des requêtes (AbortController)</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 :">Bibliothèques dédiées au data fetching :</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)">SWR (Stale-While-Revalidate)</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">React Query (TanStack Query) : Caching, synchronisation, mises à jour en arrière-plan</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">Gestion des requêtes POST, PUT, DELETE</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)">Authentification et en-têtes (Headers)</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">Gestion des erreurs d'API</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">Optimisation et Patterns Avancés</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">Optimisation des performances de rendu</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">Comprendre le processus de rendu et de réconciliation de React</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)">Outils de profiling React (React DevTools Profiler)</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">`React.memo` : Mémoïsation des composants fonctionnels</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">`useMemo` : Mémoïsation des valeurs calculées</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">`useCallback` : Mémoïsation des fonctions callback</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)">Quand et comment utiliser `memo`, `useMemo`, `useCallback` (Eviter l'optimisation prématurée)</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)">Virtualisation des listes longues (react-window, react-virtualized)</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)">Code splitting (Découpage du code)</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)">Pourquoi découper son code ? (Réduire la taille du bundle initial)</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">`React.lazy` : Chargement paresseux des composants</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">`Suspense` : Gérer l'état de chargement des composants lazy</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">Code splitting basé sur les routes</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)">Gestion des erreurs (Error Boundaries)</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)">Introduction aux Error Boundaries (Composants classe uniquement pour la capture)</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`)">Implémentation d'un Error Boundary (`componentDidCatch`, `getDerivedStateFromError`)</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">Placement stratégique des Error Boundaries</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">Utilisation avec des bibliothèques (ex: `react-error-boundary`) pour une approche Hooks-friendly</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)">Accessibilité (a11y)</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">Importance de l'accessibilité web</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">Attributs ARIA et HTML sémantique dans React</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">Gestion du focus</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)">Outils de test d'accessibilité (axe, Lighthouse)</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.">Bonnes pratiques pour les formulaires, modales, etc.</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)">Portails (Portals)</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">Rendre des composants en dehors de leur hiérarchie DOM parente</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">Cas d'usage : Modales, tooltips, popovers</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`)">Création et utilisation de portails (`ReactDOM.createPortal`)</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">Patterns de composition avancés</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)">Higher-Order Components (HOCs) - Comprendre le pattern (moins courant avec les hooks)</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)">Render Props - Comprendre le pattern (moins courant avec les hooks)</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">Compound Components (Composants composés) : API flexible et expressive</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)">Provider Pattern (via Context API)</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">Tests et Qualité du Code</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">Introduction aux tests dans React</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)">Pourquoi tester ? Types de tests (Unitaire, intégration, end-to-end)</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">Pyramide des tests</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)">Outils courants : Jest (Test runner), React Testing Library (Philosophie et utilisation)</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)">Tests unitaires et d'intégration avec Jest et React Testing Library (RTL)</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">Configuration de l'environnement de test</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">Philosophie de RTL : Tester comme un utilisateur</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`)">Rendu de composants (`render`)</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...)">Requêtes de sélection (Queries : getBy, findBy, queryBy...)</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`)">Simulation d'événements utilisateur (`user-event`)</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`)">Assertions avec Jest (`expect`)</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">Tests de composants simples et complexes</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`)">Tests de hooks personnalisés (`renderHook`)</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.)">Mocking de modules et de fonctions (Appels API, etc.)</a></li><li><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/tests-asynchrones" itemprop="url" title="Tests asynchrones">Tests asynchrones</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">Tests de contexte et de routage</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)">Tests end-to-end (E2E)</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)">Introduction aux tests E2E (Simuler le parcours utilisateur complet)</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)">Outils populaires : Cypress, Playwright (Aperçu)</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">Ecriture de scénarios de test E2E de base</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">Qualité du code et bonnes pratiques</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">Linting avec ESLint et configuration pour React</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">Formatage avec Prettier</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">Conventions de nommage et structure de projet</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">Ecrire du code lisible et maintenable</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)">Revue de code (Code reviews)</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">Ecosystème et outils complémentaires</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">Frameworks meta basés sur React</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...">Next.js : Rendu côté serveur (SSR), génération de site statique (SSG), routage basé sur les fichiers, API Routes, optimisation d'images...</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.">Remix : Focus sur les fondamentaux du web, SSR/SSG, gestion des formulaires, routage imbriqué puissant.</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).">Gatsby : Générateur de site statique puissant (focus sur la performance et les sources de données via GraphQL).</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 ?">Quand utiliser un framework meta vs CRA/Vite ?</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)">React Native (Aperçu)</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">Introduction à React Native : Créer des applications mobiles natives avec React</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">Différences clés avec React pour le web</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">Composants spécifiques à la plateforme</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">Utiliser TypeScript avec React</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)">Introduction à TypeScript et ses avantages (Typage statique)</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">Configuration d'un projet React avec TypeScript</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`)">Typer les composants fonctionnels (`React.FC`) et les props (`interface`, `type`)</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>`)">Typer le state (`useState<Type>`)</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">Typer les événements</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>`)">Typer les refs (`useRef<Type>`)</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>`)">Typer le Context (`createContext<Type>`)</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">Typer les hooks personnalisés</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/...`)">Utilisation de types provenant de bibliothèques tierces (`@types/...`)</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)">Server Components (Concept)</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)">Introduction aux React Server Components (RSC) - (Principalement via Next.js/Remix)</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">Différences entre Server Components et Client Components</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)">Avantages (Réduction du bundle JS client, accès direct au backend)</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">Modèle mental et utilisation</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">Mise en Production et Suivi</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">Processus de build</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`)">Comprendre le build de production (`npm run build` / `yarn build`)</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)">Optimisations du build (Minification, bundling, tree shaking)</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`)">Variables d'environnement (`.env`)</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">Stratégies de déploiement</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)">Déploiement sur des plateformes statiques (Netlify, Vercel, GitHub Pages)</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)">Déploiement sur des serveurs traditionnels (Node.js/Express servant le build)</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)">Déploiement dans des conteneurs (Docker)</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.">Intégration continue et déploiement continu (CI/CD) avec GitHub Actions, GitLab CI, etc.</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">Monitoring et debugging en production</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)">Outils de suivi d'erreurs (Sentry, LogRocket)</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)">Analyse de performance (Web Vitals, Lighthouse CI)</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">Techniques de débogage avancées</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">Projet Pratique et Conclusion</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">Projet de synthèse</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)">Définition du projet (Ex: Application e-commerce, tableau de bord, réseau social simple)</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">Application pratique des concepts appris tout au long du cours</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">Phases du projet : Planification, développement, test, déploiement</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">Conclusion et prochaines étapes</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">Résumé des compétences acquises</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)">Comment rester à jour avec l'écosystème React (Veille technologique)</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)">Pistes pour aller plus loin (GraphQL, WebSockets, micro-frontends, design systems)</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">Contribution à l'Open Source</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><img src="/favicon.svg" alt="Logo CertiQuizz" width="40" height="40">ertiQuizzVotre plateforme de microlearning : 1. Testez vos connaissances 2. Apprenez de nouvelles compétences 3. Excellez dans votre parcours<a href="/fr/quiz/classement/" title="Classement des membres">🏆 Classement des membres</a></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">© 2025 CertiQuizz. Tous droits réservés.Conçu avec un objectif d'<a href="/fr/eco-responsabilite-et-performance" title="Eco-conception">éco-conception</a></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: 1785,name: "bonnes-pratiques-pour-les-formulaires-modales-etc"},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>