¿Cómo crear un evento en React?

Todas y cada una de las páginas web modernas que creamos hoy tienden a tener interacciones con los usuarios. Cuando el usuario interactúa con la aplicación web, se activan eventos. Ese evento puede ser un clic del mouse, presionar una tecla o algo raro como conectar la batería con un cargador. Desde el lado del desarrollador, necesitamos ‘escuchar’ dichos eventos y luego hacer que nuestra aplicación responda en consecuencia. Esto se llama manejo de eventos que proporciona una interfaz dinámica a una página web. Al igual que el DOM de JavaScript, React también nos proporciona algunos métodos integrados para crear un oyente que responda en consecuencia a un evento específico.

Ahora veremos ciertas reglas a tener en cuenta al crear eventos en React.

• Convención camelCase: en lugar de usar minúsculas, usamos camelCase mientras damos nombres de los eventos de reacción. Eso simplemente significa que escribimos ‘onClick’ en lugar de ‘onclick’.
• Pase el evento como una función: en React, pasamos una función encerrada entre corchetes como el detector de eventos o el controlador de eventos, a diferencia de HTML, donde pasamos el controlador de eventos o el detector de eventos como una string.
• Evitar el valor predeterminado: solo devolver falso dentro del elemento JSX no evita el comportamiento predeterminado en reaccionar. En su lugar, tenemos que llamar al método ‘ prevenirDefault’ directamente dentro de la función del controlador de eventos.

Sintaxis:

function Component(){
 doSomething(e){
   e.preventDefault();
   // Some more response to the event
 }
return (
   <button onEvent={doSomething}></button>
 );
}

Ahora, después de ver la sintaxis anterior, debe surgir una pregunta: qué es el objeto ‘e’ y de dónde proviene. En realidad, ‘e’ es un evento sintético. Este es un objeto creado con un envoltorio alrededor del evento real del navegador. Este objeto es multinavegador.

Creando una aplicación de reacción:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app name_of_the_app

• Paso 2: después de crear la aplicación de reacción, muévase al directorio según el nombre de su aplicación usando el siguiente comando:

  cd name_of_the_app

Estructura del proyecto: ahora abra la carpeta de su aplicación en un editor. Verá la siguiente estructura de archivos:

Enfoque: ahora modifique el archivo App.js predeterminado dentro de su directorio de código fuente de acuerdo con los siguientes pasos:

• Asegúrate de que React esté importado. Y también importe el archivo ‘App.css’ ya que contiene algunos estilos CSS para el componente de la aplicación.
• Borre todo lo escrito dentro de <div> con la aplicación ‘className’.
• Cree un encabezado y un botón dentro de este div.
• Cree un evento onClick dentro del botón y pase la función ‘eventHandler’ dentro de él. Definimos la función en la parte superior del componente ‘App’.
• Agregue la alerta dentro de la función para que podamos escuchar el evento y generar una alerta cada vez que ocurra el evento.

Ejemplo:

import React from 'react';
  
function App() {
  function eventHandler(){
    alert('Geeksforgeeks is the best platform to learn coding!');
  }
  
  
  return (
    <div className='App'>
      <h1>Welcome to Geeksforgeeks</h1>
      <button onClick={eventHandler}>Click for alert!</button>
    </div>
  );
}
  
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando en su terminal.

npm start

Salida: Abra el navegador y escriba localhost:3000 para ver la siguiente salida.