Gestion des différents types d'inputs (text, textarea, select, checkbox, radio)

Apprenez à implémenter des composants contrôlés en React pour tous les types d'inputs de formulaire courants : text, textarea, select, checkbox et radio. Maîtrisez leur gestion d'état.
Sommaire

Adapter le pattern contrôlé à chaque élément de formulaire
Champs texte (``)
Zone de texte (`
`)</span></a>
				<meta itemprop="position" content="3">
			</li>
						<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
				<a itemprop="item" href="#section-liste-deroulante-select" title="Liste déroulante (`<select>`)"><span itemprop="name">Liste déroulante (`<select>`)</span></a>
				<meta itemprop="position" content="4">
			</li>
						<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
				<a itemprop="item" href="#section-case-a-cocher-input-type-checkbox" title="Case à cocher (`<input type="checkbox">`)"><span itemprop="name">Case à cocher (`<input type="checkbox">`)</span></a>
				<meta itemprop="position" content="5">
			</li>
						<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
				<a itemprop="item" href="#section-boutons-radio-input-type-radio" title="Boutons radio (`<input type="radio">`)"><span itemprop="name">Boutons radio (`<input type="radio">`)</span></a>
				<meta itemprop="position" content="6">
			</li>
					</ul>
	</nav>
	<div id="pageBody">
		<section><h2 id="section-adapter-le-pattern-controle-a-chaque-element-de-formulaire">Adapter le pattern contrôlé à chaque élément de formulaire</h2><p>Le principe fondamental des composants contrôlés reste le même pour tous les types d'inputs HTML : lier la valeur affichée à l'état React via la prop `value` (ou `checked`) et mettre à jour cet état via la fonction `onChange`. Cependant, les détails d'implémentation varient légèrement en fonction de l'élément spécifique.</p><p>Ce sous-chapitre détaille comment appliquer le pattern contrôlé aux éléments de formulaire les plus courants : `<input type="text">`, `<textarea>`, `<select>`, `<input type="checkbox">`, et `<input type="radio">`. Comprendre ces nuances est essentiel pour construire des formulaires complets et fonctionnels.</p></section><section><h2 id="section-champs-texte-input-type-text">Champs texte (`<input type="text">`)</h2><p>Nous avons déjà vu l'exemple de base pour `input type="text"` dans la section précédente. Il s'agit du cas le plus simple : l'état stocke une chaîne de caractères, la prop `value` reçoit cette chaîne, et `onChange` met à jour l'état avec `event.target.value`.</p><pre class="line-numbers"><code class="language-javascript">function TextInputExample() {
  const [textValue, setTextValue] = useState('');
const handleChange = (event) => {
    setTextValue(event.target.value);
  };
return (
    <label>
      Texte :
      <input type="text" value={textValue} onChange={handleChange} />
      <p>Valeur actuelle : {textValue}</p>
    </label>
  );
}</code></pre><p>Ce même pattern s'applique directement à d'autres types d'input basés sur du texte comme `password`, `email`, `number`, etc. Pour `number`, `event.target.value` sera toujours une chaîne, vous devrez peut-être la convertir explicitement (`parseInt` ou `parseFloat`) si vous souhaitez stocker un nombre dans l'état.</p></section><section><h2 id="section-zone-de-texte-textarea">Zone de texte (`<textarea>`)</h2><p>En HTML standard, la valeur d'une `<textarea>` est définie par son contenu enfant (entre les balises `<textarea>` et `
`). Cependant, en React, pour maintenir la cohérence avec les composants contrôlés, on utilise également la prop `value` pour définir son contenu. La gestion est donc identique à celle d'un ``.
function TextAreaExample() {
  const [textAreaValue, setTextAreaValue] = useState('Contenu initial ici.');

  const handleChange = (event) => {
    setTextAreaValue(event.target.value);
  };

  return (
    
      Description :
      {/* Notez l'utilisation de 'value' et non du contenu enfant */}
            <p>Valeur actuelle : {textAreaValue}</p>
    </label>
  );
}</code></pre></section><section><h2 id="section-liste-deroulante-select">Liste déroulante (`<select>`)</h2><p>Pour contrôler une liste déroulante (`<select>`), on définit également la prop `value` sur l'élément `<select>` lui-même. Cette `value` correspond à l'attribut `value` de l'option (`<option>`) qui doit être sélectionnée. React se charge de sélectionner l'option correspondante.</p><p>Lorsqu'une nouvelle option est choisie, l'événement `onChange` sur l'élément `<select>` est déclenché, et `event.target.value` contient la valeur de l'option sélectionnée.</p><pre class="line-numbers"><code class="language-javascript">function SelectExample() {
  const [selectedValue, setSelectedValue] = useState('pomme'); // Valeur initiale

  const handleChange = (event) => {
    setSelectedValue(event.target.value);
  };

  return (
    <label>
      Choisissez un fruit :
      {/* La prop 'value' sur select contrôle l'option sélectionnée */}
      <select value={selectedValue} onChange={handleChange}>
        <option value="pomme">Pomme</option>
        <option value="banane">Banane</option>
        <option value="orange">Orange</option>
      </select>
      <p>Fruit sélectionné : {selectedValue}</p>
    </label>
  );
}</code></pre><p>Pour une balise `<select>` avec l'attribut `multiple`, la prop `value` attend un tableau contenant les valeurs des options sélectionnées. La fonction `onChange` devra alors parcourir `event.target.options` pour construire le nouveau tableau de valeurs sélectionnées à mettre dans l'état. C'est un cas plus complexe souvent simplifié par des bibliothèques de formulaires.</p></section><section><h2 id="section-case-a-cocher-input-type-checkbox">Case à cocher (`<input type="checkbox">`)</h2><p>Les cases à cocher et les boutons radio sont légèrement différents car leur état pertinent n'est pas `value` mais s'ils sont cochés ou non. On utilise donc la prop `checked` pour les contrôler, qui attend une valeur booléenne (`true` ou `false`).</p><p>Dans la fonction `onChange`, l'état coché/décoché se trouve dans `event.target.checked` (et non `event.target.value`).</p><pre class="line-numbers"><code class="language-javascript">function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleCheckboxChange = (event) => {
    // Utiliser event.target.checked pour obtenir le booléen
    setIsChecked(event.target.checked);
  };

  return (
    <label>
      Accepter les termes :
      <input 
        type="checkbox" 
        // Utiliser la prop 'checked'
        checked={isChecked} 
        onChange={handleCheckboxChange} 
      />
      <p>Accepté : {isChecked ? 'Oui' : 'Non'}</p>
    </label>
  );
}</code></pre></section><section><h2 id="section-boutons-radio-input-type-radio">Boutons radio (`<input type="radio">`)</h2><p>Les boutons radio sont généralement utilisés en groupe, où un seul choix est possible. Pour les contrôler, vous aurez besoin d'une seule variable d'état pour stocker la *valeur* du bouton radio actuellement sélectionné. Chaque bouton radio du groupe partagera le même gestionnaire `onChange`, mais aura une `value` distincte.</p><p>La prop `checked` de chaque bouton radio sera déterminée en comparant la `value` de ce bouton radio spécifique avec la valeur stockée dans l'état.</p><pre class="line-numbers"><code class="language-javascript">function RadioExample() {
  const [selectedOption, setSelectedOption] = useState('option1'); // Stocke la valeur de l'option choisie

  const handleRadioChange = (event) => {
    // Met à jour l'état avec la 'value' du radio qui a changé
    setSelectedOption(event.target.value);
  };

  return (
    <fieldset>
      <legend>Choisissez une option :</legend>
      <label>
        <input 
          type="radio" 
          value="option1" 
          // Vérifier si la valeur de CET input correspond à l'état
          checked={selectedOption === 'option1'} 
          onChange={handleRadioChange} 
        />
        Option 1
      </label>
      <br />
      <label>
        <input 
          type="radio" 
          value="option2" 
          checked={selectedOption === 'option2'} 
          onChange={handleRadioChange} 
        />
        Option 2
      </label>
      <br />
      <label>
        <input 
          type="radio" 
          value="option3" 
          checked={selectedOption === 'option3'} 
          onChange={handleRadioChange} 
        />
        Option 3
      </label>
      <p>Option choisie : {selectedOption}</p>
    </fieldset>
  );
}</code></pre><p>En maîtrisant ces patterns pour chaque type d'input, vous pouvez construire des formulaires contrôlés complexes et gérer finement leur état et leur comportement dans vos applications React.</p></section><div id="quizz"></div><p id="pagination"><a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/composants-controles-controlled-components-liaison-etat-et-input" title="React : maîtriser les composants contrôlés pour les formulaires" rel="prev">◄ Précédent</a> <a href="/fr/cours/programmation/react-js/react-js-le-guide-de-reference/gestion-de-la-soumission-de-formulaire-onsubmit" title="React : gérer la soumission de formulaires avec onSubmit" 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: 1279,name: "gestion-des-differents-types-d-inputs-text-textarea-select-checkbox-radio"},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>