Compteur de clics

Fait partie de la section Les fondamentaux du Journey React de Coddy — leçon 23 sur 42.

L'état a besoin d'un déclencheur, généralement un événement. Reliez une fonction à un bouton avec onClick et modifiez l'état à l'intérieur de celle-ci :

import { useState } from 'react';

export default function App() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <button onClick={() => setCount(count + 1)}>+1</button>
            <p>{count}</p>
        </div>
    );
}

Suivez un clic à travers la boucle : clic → setCount(count + 1) → React re-rend → le paragraphe affiche le nouveau count. Notez la fonction fléchée : onClick={() => setCount(count + 1)} transmet une fonction à appeler plus tard. Écrire onClick={setCount(count + 1)} l'appellerait immédiatement pendant le rendu, un bug classique.

Défi

Facile

Créez le compteur classique.

Ajoutez l'état : count démarrant à 0 (l'importation est prête).
Affichez le compteur actuel à l'intérieur du span avec id="count".
Faites en sorte que le bouton +1 augmente le compteur de 1 à chaque clic.

Essayez vous-même

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>