Klick-Zähler

Teil des Abschnitts Grundlagen der React-Journey von Coddy. Lektion 23 von 42.

Status benötigt einen Auslöser, normalerweise ein Ereignis. Verknüpfe eine Funktion mit einer Schaltfläche über onClick und ändere den Status darin:

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

Folge einem Klick durch den gesamten Ablauf: Klicken → setCount(count + 1) → React rendert erneut → der Absatz zeigt den neuen Zählerstand. Beachte die Pfeilfunktion: onClick={() => setCount(count + 1)} übergibt eine Funktion, die später aufgerufen werden soll. onClick={setCount(count + 1)} würde sie bereits während des Renderns sofort aufrufen – ein klassischer Fehler.

Aufgabe

Einfach

Erstelle den klassischen Zähler.

Füge den Zustand hinzu: count, der bei 0 startet (der Import ist bereit).
Zeige den aktuellen Zählerstand innerhalb des Span-Elements mit id="count" an.
Sorge dafür, dass die Schaltfläche +1 den Zähler bei jedem Klick um 1 erhöht.

Probier es selbst

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