Aller au contenu principal

État et événements avec React

Notions théoriques​

Qu'est-ce que l'état (state) ?​

L'état est la mémoire d'un composant React. Quand l'état change, React re-rend automatiquement le composant avec les nouvelles valeurs.

En Svelte, on utilise $state(). En React, on utilise le hook useState :

import { useState } from 'react'

function Compteur() {
  const [compteur, setCompteur] = useState(0)

  return (
    <div>
      <p>{compteur}</p>
      <button onClick={() => setCompteur(compteur + 1)}>+1</button>
    </div>
  )
}

Décortiquer useState​

const [compteur, setCompteur] = useState(0)
//     ↑           ↑              ↑
//   valeur    fonction de     valeur
//  actuelle     mise à jour   initiale
  • compteur — la valeur actuelle (lecture seule, ne pas modifier directement)
  • setCompteur — la fonction pour mettre à jour l'état
  • useState(0) — l'état initial est 0
Ne JAMAIS modifier l'état directement
// ❌ INTERDIT — React ne détectera pas le changement
compteur = compteur + 1

// ✅ CORRECT — React re-rend le composant
setCompteur(compteur + 1)

Les événements en React​

En React, les événements s'écrivent en camelCase avec un on majuscule :

Événement DOMReact
onclickonClick
oninputonInput ou onChange
onsubmitonSubmit
onmouseenteronMouseEnter
function Bouton() {
  function gererClic() {
    alert('Cliqué !')
  }

  return <button onClick={gererClic}>Cliquer</button>
}

Les champs de formulaire : onChange​

Pour lier un <input> à l'état, React utilise value et onChange :

import { useState } from 'react'

function Formulaire() {
  const [prenom, setPrenom] = useState('')

  return (
    <div>
      <input
        type="text"
        value={prenom}
        onChange={e => setPrenom(e.target.value)}
        placeholder="Votre prénom"
      />
      <p>Bonjour, {prenom} !</p>
    </div>
  )
}
Comparaison Svelte / React pour les inputs
SvelteReact
Lier un inputbind:value={variable}value={etat} onChange={e => setEtat(e.target.value)}
Variable réactivelet x = $state(val)const [x, setX] = useState(val)

Le rendu conditionnel​

En React, on utilise des expressions JavaScript dans le JSX :

Opérateur ternaire :

{estConnecte ? <p>Bienvenue !</p> : <p>Veuillez vous connecter.</p>}

Opérateur && (afficher seulement si vrai) :

{estConnecte && <p>Bienvenue !</p>}

Les listes avec .map()​

Pour afficher une liste, on utilise .map() qui retourne un tableau de JSX :

const fruits = ['Pomme', 'Banane', 'Orange']

return (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
)
L'attribut key est obligatoire

React a besoin de key pour identifier chaque élément de la liste lors des mises à jour. Sans key, React affiche un avertissement et les performances sont dégradées. Utilisez un identifiant unique (id, valeur) plutôt que l'index quand c'est possible.

Exemple pratique​

Un composant de liste de courses complet :

import { useState } from 'react'

function ListeCourses() {
  const [articles, setArticles] = useState(['Pommes', 'Lait'])
  const [nouvelArticle, setNouvelArticle] = useState('')

  function ajouterArticle() {
    if (nouvelArticle.trim()) {
      setArticles([...articles, nouvelArticle.trim()])
      setNouvelArticle('')
    }
  }

  return (
    <div>
      <h1>Liste de courses ({articles.length})</h1>
      <input
        value={nouvelArticle}
        onChange={e => setNouvelArticle(e.target.value)}
        placeholder="Ajouter un article..."
      />
      <button onClick={ajouterArticle}>Ajouter</button>
      <ul>
        {articles.map((article, index) => (
          <li key={index}>{article}</li>
        ))}
      </ul>
    </div>
  )
}

export default ListeCourses
Tableau réactif en React

Comme en Svelte, pour ajouter un élément à un tableau en React, on remplace le tableau : setArticles([...articles, nouvelArticle]). On ne doit jamais appeler .push() directement sur le tableau d'état.

Test de mémorisation/compréhension​


Quelle syntaxe déclare un état React initialisé à 0 ?


Comment met-on à jour l'état `compteur` en React ?


Comment s'écrit l'événement de clic en React ?


Quel attribut React est obligatoire pour les éléments d'une liste `.map()` ?


Quelle syntaxe React lie un input à l'état `texte` ?


Quel import est nécessaire pour utiliser useState ?


TP pour réfléchir et résoudre des problèmes​

Dans ce TP, vous allez créer une application de compteur avec React, puis une liste d'éléments interactive.

Étape 1 — Créer le projet​

npm create vite@latest tp-react-state --template react
cd tp-react-state
npm install
npm run dev

Bonne pratique - Importer uniquement ce dont on a besoin

React exporte de nombreux hooks. Importez uniquement ceux que vous utilisez avec les accolades : import { useState, useEffect } from 'react'. N'importez pas React en entier sauf si nécessaire.

Étape 2 — Créer un compteur avec useState​

Remplacez src/App.jsx par un compteur avec boutons + et - :


Bonne pratique - Nommer la fonction setter avec 'set'

La convention React est de nommer la fonction de mise à jour set + nom de la variable en PascalCase : setCompteur, setPrenom, setArticles. Cette convention rend le code immédiatement compréhensible par tout développeur React.

Étape 3 — Affichage conditionnel​

Ajoutez un message qui change selon la valeur du compteur :


Bonne pratique - Ternaire pour les conditions simples

En JSX, le rendu conditionnel s'exprime avec l'opérateur ternaire ? : ou l'opérateur &&. Évitez les if/else à l'intérieur du JSX : extrayez la logique dans une variable avant le return si la condition devient complexe.

Étape 4 — Liste d'éléments avec ajout et suppression​

Ajoutez une liste interactive dans App.jsx :


Bonne pratique - Immutabilité de l'état

En React, ne modifiez jamais directement le tableau d'état (articles.push(...), articles.splice(...)). Créez toujours un nouveau tableau avec filter, map, ou le spread operator [...articles, ...]. React compare les références pour détecter les changements : si le tableau est le même objet en mémoire, React ne re-rend pas.

📌 Une solution