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

Siga um clique ao longo do ciclo: clique → setCount(count + 1) → React re-renderiza → o parágrafo mostra o novo valor de count. Observe a arrow function: onClick={() => setCount(count + 1)} passa uma função para ser chamada depois. Escrever onClick={setCount(count + 1)} a chamaria imediatamente durante a renderização, um bug clássico.

Desafio

Fácil

Crie o contador clássico.

Adicione o estado: count iniciando em 0 (a importação já está pronta).
Exiba o contador atual dentro do span com id="count".
Faça o botão +1 aumentar o contador 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>