Los botones son innegablemente importantes componentes de la interfaz de usuario de cualquier aplicación de reacción; los botones pueden usarse en escenarios como enviar un formulario o abrir una nueva página. Puede crear componentes de botones reutilizables en React.js que puede utilizar en diferentes secciones de su aplicación. Como resultado, mantener su aplicación será más simple y su código se mantendrá SECO (No se repita).

Primero debe crear un nuevo archivo en su carpeta de componentes llamado Button.jsx para poder construir un componente de botón reutilizable. El siguiente paso es definir la función "Botón", que acepta los parámetros texto y onClick.

El texto que se mostrará en el botón está contenido en el accesorio de texto. Cuando se hace clic en el botón, se llamará una función especificada por la propiedad onClick.

Finalmente, debes devolver un elemento "botón" que tenga la propiedad de texto configurada para el texto que se mostrará en el botón y la propiedad onClick configurada para el controlador para el evento onclick del botón.

Aquí hay un ejemplo de un componente de botón reutilizable en React.js:

const Button = ({ text, onClick }) => {
  return (
    
      {text}
    
  );
};

export default Button;

Una vez que haya creado su componente de botón reutilizable, puede importarlo a cualquier otro componente en el que desee usarlo. Por ejemplo, podría crear un componente llamado MyComponent que use el componente Botón para representar un botón con el texto. "¡Haz clic en mí!".

Aquí hay un ejemplo de cómo usar el componente Botón en otro componente:

import Button from "../components/Button";

const MyComponent = () => {
  return (
    

       console.log("Button clicked!")} />
    
  );
};

export default MyComponent;

Esto generará un botón con el texto "¡Haz clic en mí!". Cuando se hace clic en el botón, se llamará a la función console.log y aparecerá el mensaje "¡Se hizo clic en el botón!" se registrará en la consola.

También puedes usar el componente Botón para crear botones con diferentes estilos. Por ejemplo, puede agregar una clase al elemento del botón para aplicar un estilo personalizado. Por ejemplo:

import Button from "../components/Button";

const MyComponent = () => {
  return (
    

       console.log("Button clicked!")} className="my-custom-class" />
    
  );
};

export default MyComponent;

Esto generará un botón con el texto "¡Haz clic en mí!". Al botón también se le aplicará la clase my-custom-class. Puedes usar esta clase para darle estilo al botón en tu archivo CSS.