Attributs ARIA et HTML sémantique dans React

Fondations accessibles : La puissance du HTML sémantique

La première étape, et la plus importante, pour construire des interfaces accessibles en React (comme pour tout développement web) est d'utiliser le HTML sémantique de manière appropriée. Les balises HTML n'ont pas été créées uniquement pour la présentation visuelle ; beaucoup d'entre elles portent une signification intrinsèque (une sémantique) qui décrit le rôle ou la nature du contenu qu'elles enveloppent.

Les technologies d'assistance, comme les lecteurs d'écran utilisés par les personnes malvoyantes, s'appuient fortement sur cette sémantique pour interpréter la structure de la page et transmettre l'information à l'utilisateur. Utiliser un pour un bouton, une .

Pour un lien vers une autre page ou ressource : utilisez .

Pour un champ de saisie : utilisez , </code>, <code><select></code> avec une <code><label htmlFor="..."></code> associée.</li><li>Pour structurer le contenu : utilisez <code><header></code>, <code><nav></code>, <code><main></code>, <code><article></code>, <code><aside></code>, <code><footer></code>, et une hiérarchie logique de titres <code><h1></code> à <code><h6></code>.</li></ul><p>Utiliser le HTML sémantique correctement vous donne gratuitement une grande partie de l'accessibilité de base (structure, navigation au clavier pour les éléments interactifs natifs).</p></section><section><h2 id="section-combler-les-lacunes-introduction-a-aria">Combler les lacunes : Introduction à ARIA</h2><p>Malgré la richesse du HTML sémantique, il arrive que l'on construise des composants d'interface utilisateur personnalisés ou des widgets interactifs complexes (onglets, menus déroulants, carrousels, sliders, etc.) pour lesquels il n'existe pas d'élément HTML natif parfaitement équivalent. Dans ces cas, la sémantique seule ne suffit pas à transmettre le rôle, l'état ou les propriétés du composant aux technologies d'assistance.</p><p>C'est là qu'intervient <b>ARIA (Accessible Rich Internet Applications)</b>. ARIA est une spécification du W3C qui définit un ensemble d'attributs que l'on peut ajouter aux éléments HTML pour améliorer leur accessibilité, sans changer leur apparence ou leur comportement pour les utilisateurs voyants.</p><p>ARIA permet de "boucher les trous" de la sémantique HTML en fournissant des informations supplémentaires aux technologies d'assistance. Ces attributs se répartissent en trois catégories principales :</p><ul><li><b>Rôles (<code>role="..."</code>) :</b> Indiquent le type de widget ou de structure. Exemples : <code>role="tab"</code>, <code>role="tablist"</code>, <code>role="tabpanel"</code>, <code>role="dialog"</code>, <code>role="alert"</code>, <code>role="checkbox"</code>, <code>role="radiogroup"</code>, <code>role="menu"</code>, <code>role="menuitem"</code>.</li><li><b>Propriétés (<code>aria-...</code>) :</b> Décrivent des caractéristiques ou des relations qui ne changent généralement pas. Exemples : <code>aria-label</code> (étiquette alternative si pas de texte visible), <code>aria-labelledby</code> (pointe vers l'ID de l'élément qui sert d'étiquette), <code>aria-describedby</code> (pointe vers l'ID de l'élément qui sert de description), <code>aria-haspopup</code> (indique qu'un élément ouvre un menu ou une boîte de dialogue), <code>aria-controls</code> (lie un élément de contrôle à l'élément qu'il contrôle).</li><li><b>Etats (<code>aria-...</code>) :</b> Décrivent l'état actuel d'un élément, qui est susceptible de changer dynamiquement. Exemples : <code>aria-expanded</code> (pour les éléments dépliants), <code>aria-selected</code> (pour les onglets, options), <code>aria-pressed</code> (pour les boutons bascule), <code>aria-disabled</code> (pour les éléments désactivés), <code>aria-checked</code> (pour les cases à cocher/radio personnalisées), <code>aria-invalid</code> (pour les champs de formulaire en erreur).</li></ul></section><section><h2 id="section-utiliser-aria-judicieusement-en-react">Utiliser ARIA judicieusement en React</h2><p>En React, vous ajoutez les attributs ARIA directement à vos éléments JSX comme n'importe quel autre attribut. La plupart des attributs ARIA correspondent directement aux attributs HTML (ex: `aria-label`, `role`). Notez que React utilise la casse camelCase pour les attributs qui contiennent des tirets en HTML (ex: `aria-labelledby` devient <code>ariaLabelledby</code> en JSX).</p><p><b>Quelques règles d'or pour utiliser ARIA :</b></p><ol><li><b>Ne pas utiliser ARIA si le HTML natif suffit :</b> C'est la règle la plus importante. Par exemple, n'ajoutez pas `role="button"` et `tabindex="0"` à un `<div>` pour le faire agir comme un bouton ; utilisez directement la balise `<button>`. Le HTML natif gère la sémantique, le focus et l'interaction clavier pour vous.</li><li><b>Ne pas changer la sémantique native (sauf cas très spécifiques) :</b> Evitez d'ajouter un `role` qui contredit la sémantique native d'un élément (par exemple, ne mettez pas `role="button"` sur un `<h1>`).</li><li><b>Tous les éléments interactifs ARIA doivent être accessibles au clavier :</b> Si vous créez un widget personnalisé (comme un slider ou un menu), assurez-vous que toutes ses fonctionnalités sont utilisables uniquement avec le clavier (souvent en ajoutant `tabIndex="0"` aux éléments appropriés et en gérant les événements `onKeyDown`).</li><li><b>Ne pas cacher les éléments focalisables :</b> Un élément qui peut recevoir le focus (`tabIndex="0"`) ne doit pas être caché visuellement (par exemple avec `display: none` ou `visibility: hidden`). S'il est désactivé, utilisez `aria-disabled="true"`.</li><li><b>Fournir un nom accessible :</b> Tous les éléments interactifs (boutons, liens, champs de formulaire) doivent avoir un nom accessible, que ce soit via leur contenu textuel, une `<label>` associée, `aria-label` ou `aria-labelledby`.</li></ol><p><b>Exemple avec état dynamique :</b></p><pre class="line-numbers"><code class="language-jsx">import React, { useState } from 'react'; function AccordionItem({ title, children }) { const [isExpanded, setIsExpanded] = useState(false); const panelId = `panel-${React.useId()}`; // Génère un ID unique const headerId = `header-${React.useId()}`; return ( <div> <h3> <button id={headerId} aria-expanded={isExpanded} aria-controls={panelId} // Lie le bouton au panneau onClick={() => setIsExpanded(!isExpanded)} > {title} </button> </h3> {isExpanded && ( <div id={panelId} role="region" // Indique une région de contenu aria-labelledby={headerId} // Lie le panneau à son titre > {children} </div> )} </div> ); } </code></pre><p>Dans cet exemple, l'état `isExpanded` est utilisé pour mettre à jour dynamiquement l'attribut ARIA `aria-expanded`, et `aria-controls`/`aria-labelledby` sont utilisés pour lier le bouton de contrôle au panneau qu'il gère. C'est ce type d'utilisation dynamique qui rend ARIA puissant dans les applications interactives comme celles construites avec React.</p><p>En combinant judicieusement l'utilisation du HTML sémantique natif et l'ajout ciblé d'attributs ARIA lorsque c'est nécessaire, vous pouvez construire des composants React qui sont non seulement fonctionnels et esthétiques, mais aussi robustes et accessibles à tous les utilisateurs.</p></section><div id="quizz"></div><p id="pagination"><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/importance-de-l-accessibilite-web" title="L'importance cruciale de l'accessibilité web (a11y) dans le développement React" rel="prev">◄ Précédent</a> <a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-du-focus" title="Gestion du focus en React pour l'accessibilité (a11y)" 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: 1782,name: "attributs-aria-et-html-semantique-dans-react"},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>