Os botões são componentes de UI inegavelmente importantes de qualquer aplicativo de reação. Os botões podem ser usados ​​em cenários como enviar um formulário ou abrir uma nova página. Você pode construir componentes de botão reutilizáveis ​​em React.js que podem ser utilizados em diferentes seções de seu aplicativo. Como resultado, a manutenção da sua aplicação será mais simples e o seu código será mantido SECO (Não se repita).

Você deve primeiro criar um novo arquivo em sua pasta de componentes chamado Button.jsx para construir um componente de botão reutilizável. O próximo passo é definir a função “Button”, que aceita os parâmetros text e onClick.

O texto que será exibido no botão está contido na propriedade text. Quando o botão é clicado, uma função especificada pela propriedade onClick será chamada.

Finalmente, você deve retornar um elemento "button" que tenha a propriedade text definida para o texto a ser exibido no botão e a propriedade onClick definida para o manipulador do evento onclick do botão.

Aqui está um exemplo de componente de botão reutilizável em React.js:

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

export default Button;

Depois de criar seu componente de botão reutilizável, você pode importá-lo para qualquer outro componente no qual deseja usá-lo. Por exemplo, você pode criar um componente chamado MyComponent que usa o componente Button para renderizar um botão com o texto "Clique em mim!".

Aqui está um exemplo de como usar o componente Button em outro componente:

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

const MyComponent = () => {
  return (
    

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

export default MyComponent;

Isso renderizará um botão com o texto "Clique em mim!". Ao clicar no botão, a função console.log será chamada e a mensagem "Botão clicado!" será registrado no console.

Você também pode usar o componente Button para criar botões com estilos diferentes. Por exemplo, você pode adicionar uma classe ao elemento botão para aplicar um estilo personalizado. Por exemplo:

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

const MyComponent = () => {
  return (
    

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

export default MyComponent;

Isso renderizará um botão com o texto "Clique em mim!". O botão também terá a classe my-custom-class aplicada a ele. Você pode usar esta classe para estilizar o botão em seu arquivo CSS.