Contador de clics

Parte de la sección Fundamentos del Journey de React de Coddy — lección 23 de 42.

El estado necesita un disparador, generalmente un evento. Conecta una función a un botón con onClick y cambia el estado dentro de ella:

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

Sigue un clic a lo largo del ciclo: clic → setCount(count + 1) → React vuelve a renderizar → el párrafo muestra el nuevo count. Observa la función de flecha: onClick={() => setCount(count + 1)} pasa una función para llamar más tarde. Escribir onClick={setCount(count + 1)} la llamaría inmediatamente durante el renderizado, un error clásico.

Desafío

Fácil

Crea el contador clásico.

Añade el estado: count comenzando en 0 (la importación está lista).
Muestra el conteo actual dentro del span con id="count".
Haz que el botón +1 incremente el conteo en 1 con cada clic.

Pruébalo tú mismo

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