Escriba un código para representar un botón en ReactJS

React es una biblioteca de interfaz de usuario. Representa componentes escritos en JSX. Puede construir y renderizar cualquier componente según su uso. 

Enfoque: Vamos a crear un proyecto React y luego crearemos una interfaz de usuario que represente un botón. El usuario puede interactuar con la interfaz de usuario y hacer clic en el botón para activar un evento a través de esto. 

Creando proyecto React:

Paso 1: para crear una aplicación de reacción, debe instalar los módulos de reacción a través del comando npx. Se usa «Npx» en lugar de «npm» porque necesitará este comando en el ciclo de vida de su aplicación solo una vez.

npx create-react-app project_name

Paso 2: después de crear su proyecto de reacción, muévase a la carpeta para realizar diferentes operaciones.

cd project_name

Estructura del proyecto: después de ejecutar los comandos mencionados en los pasos anteriores, si abre el proyecto en un editor, puede ver una estructura de proyecto similar a la que se muestra a continuación. Los nuevos componentes que haga el usuario o los cambios de código que realizaremos se realizarán en la carpeta de origen.

Estructura del proyecto

Crearemos un botón que envíe un mensaje de bienvenida, es decir, una alerta cada vez que haga clic en el botón.

import React from "react";
  
class App extends React.Component {
 call() {
   alert("Welcome to Geeks for Geeeks!");
 }
 render() {
  
   // Rendering a button
   return (
     <button onClick={this.call}>Click the button!</button>
   );
 }
}
  
export default App;

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

npm start

Salida: Abra su navegador. De forma predeterminada, abrirá una pestaña con localhost ejecutándose (http://localhost:3000/) y podrá ver el resultado que se muestra en la imagen. Haga clic en el botón para ver el mensaje de bienvenida.