Licznik kliknięć

Część sekcji Podstawy ścieżki React w Coddy. Lekcja 23 z 42.

Stan potrzebuje wyzwalacza, zwykle zdarzenia. Przypisz funkcję do przycisku za pomocą onClick i zmień stan wewnątrz niej:

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>
    );
}

Prześledź jedno kliknięcie w pętli: kliknięcie → setCount(count + 1) → React renderuje ponownie → akapit pokazuje nową wartość. Zwróć uwagę na funkcję strzałkową: onClick={() => setCount(count + 1)} przekazuje funkcję do wywołania później. Zapisanie onClick={setCount(count + 1)} wywołałoby ją natychmiast podczas renderowania — to klasyczny błąd.

Wyzwanie

Łatwy

Zbuduj klasyczny licznik.

Dodaj stan: count zaczynający się od 0 (import jest gotowy).
Wyświetl bieżącą wartość licznika wewnątrz elementu span z id="count".
Spraw, by przycisk +1 zwiększał wartość licznika o 1 po każdym kliknięciu.

Spróbuj swoich sił

<!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>