export default function App() {
  // Crea una función handleClick que muestre un alert

  // Crea una función handleChange que haga console.log del valor

  return (
    <div>
      <button>Haz click</button>
      <br />
      <input placeholder="Escribe algo..." />
    </div>
  );
}

Eventos en React

Respondiendo al usuario

Una interfaz estática es como un póster — bonita pero no hace nada. Lo que hace que una app sea una app son los eventos: clicks, escritura, envío de formularios, movimiento del ratón...

En React, los eventos funcionan de forma muy similar a HTML, pero con algunas diferencias importantes.

Eventos en JSX

En HTML escribes onclick en minúsculas. En JSX, usas camelCase:

Dos diferencias cruciales:

1. camelCase: onclick → onClick, onchange → onChange
2. Función, no string: pasas la función directamente, no un string con código

Pasar la función, NO llamarla

Este es el error más común de principiantes:

Con handleClick() (con paréntesis), la función se ejecuta al renderizar el componente, no al hacer click. Sin paréntesis, le pasas la referencia a la función y React la llama cuando el evento ocurra.

Funciones handler

La convención es nombrar las funciones que manejan eventos con el prefijo handle:

Funciones inline (arrow functions)

Para handlers simples, puedes usar una función flecha directamente:

Esto es útil cuando necesitas pasar un argumento:

El objeto event

Cada handler recibe automáticamente un objeto event con información sobre el evento:

e.target es el elemento que disparó el evento. e.target.value es el texto actual del input.

Eventos más comunes

Tu desafío 🚀

1. Crea una función handleClick y conéctala al botón con onClick
2. Añade un onChange al input que muestre el valor con console.log o alert

Prueba a escribir en el input y a hacer click en el botón.

Los eventos son el puente entre el usuario y tu aplicación. Sin eventos, no hay interacción. Sin interacción, no hay app.