Dé un ejemplo del uso de Eventos

React es una biblioteca front-end de Javascript que se utiliza para crear aplicaciones de una sola página (SPA). React proporciona sus propios eventos sintéticos compatibles con varios navegadores que envuelven los eventos nativos del navegador. Estos eventos se nombran usando la convención camelCase. Necesitamos pasar una función de controlador a estos accesorios de eventos que se ejecutan cuando se activa el evento. Podemos pasar la función del controlador a la propiedad del evento usando la sintaxis que se muestra a continuación.

const handleClick = () => {
    console.log("Hello");
}
<div onClick={handleClick}>Hello</div>

En este artículo, vamos a discutir un ejemplo simple del uso de eventos en React.

Creación de la aplicación React e instalación del módulo:

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

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: La estructura del proyecto tendrá el siguiente aspecto.

Enfoque: ahora, en este proyecto, hemos creado un botón en el que tenemos un accesorio onClick. Hemos asignado una función de controlador a este accesorio onClick. Cuando hacemos clic en este botón, nuestra función de controlador se ejecuta y muestra una ventana de alerta. Ahora, para continuar, puede escribir los siguientes códigos en su archivo App.js y App.css.

A continuación se muestra la implementación del enfoque anterior.

Nombre de archivo: App.js

import './App.css';
  
const App = () => {
  const handleClick = () => {
    alert('Hello Geek');
  };
  return (
    <div className='container'>
      <button className='btn' onClick={handleClick}>
        Press Me
      </button>
    </div>
  );
};
  
export default App;

Nombre de archivo: App.css

.container {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
}
  
.btn {
  align-self: center;
  background-color: rgb(47, 173, 173);
  font-size: 50px;
  color: white;
  border-radius: 10px;
  border: none;
}
  
.btn:active {
  background-color: rgb(16, 88, 88);
}

Paso para ejecutar la aplicación: Utilice el siguiente comando en la línea de comandos para iniciar la aplicación.

npm start

Salida: Podemos usar nuestra aplicación React visitando http://localhost:3000 en el navegador.