Contador de Cliques

Parte da seção Fundamentos do Journey de React da Coddy. Lição 23 de 42.

O estado precisa de um gatilho, geralmente um evento. Conecte uma função a um botão com onClick e altere o estado dentro dela:

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

Acompanhe um clique pelo ciclo: clique → setCount(count + 1) → o React renderiza novamente → o parágrafo mostra a nova contagem. Observe a função de seta: onClick={() => setCount(count + 1)} passa uma função para ser chamada mais tarde. Escrever onClick={setCount(count + 1)} a chamaria imediatamente durante a renderização, um erro clássico.

Desafio

Fácil

Crie o contador clássico.

Adicione o estado: count começando em 0 (a importação está pronta).
Mostre a contagem atual dentro do span com id="count".
Faça o botão +1 aumentar a contagem em 1 a cada clique.

Experimente você mesmo

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