Entenda componentes reutilizáveis no React

O que são componentes reutilizáveis?

📽️

Quer entender ainda melhor? Confira este vídeo:

Por que usar componentes reutilizáveis?

• Adeus, retrabalho doloroso!
• Altere em um único lugar e veja a mágica acontecer na aplicação toda. Precisou corrigir um bug em um botão usado 10 vezes? Fácil, edite apenas o componente original.

• Sua aplicação com estilo profissional!
• Garanta consistência visual e funcional em toda sua UI, mantendo alinhada a identidade visual e comportamental da sua aplicação.

• Codando na velocidade da luz!
• Construa telas novas rapidamente, reutilizando componentes que já foram criados por você ou pela sua equipe.

• Organização que dá gosto de ver!
• Código mais limpo, organizado e fácil de entender, com responsabilidades bem definidas para cada componente.

• Testes unitários sem sofrimento!
• Componentes menores e focados são mais fáceis de testar individualmente, garantindo robustez e qualidade.

Mão na massa: criando componentes reutilizáveis

Exemplo 1: componente <Button> simples

// src/components/Button.tsx
import './styled.css';

export function Button({ text, onClick }) {
  return (
    <button className="button" onClick={onClick}>
      {text}
    </button>
  );
}

<Button text="Botão 1" onClick={() => handleClick('Botão 1')} />

Exemplo 2: componente <Alert> com children e evento de fechamento

// src/components/Alert.tsx
import type { ReactNode } from 'react';
import './styled.css';

interface AlertProps {
  children: ReactNode;
  onClose: () => void;
}

export function Alert({ children, onClose }: AlertProps) {
  return (
    <div className="alert">
      <span>{children}</span>
      <button className="close-btn" onClick={onClose}>
        ×
      </button>
    </div>
  );
}

<Alert onClose={() => setShowAlert(false)}>
  Atenção: Não se esqueça de salvar suas alterações!
</Alert>

<Alert onClose={() => setShowAlert(false)}>
  ✅ Alterações salvas com sucesso!
</Alert>

Boas práticas para componentes reutilizáveis

• Pense genérico: evite lógica específica demais, favorecendo a reutilização.

• Mantenha simples: um componente, uma responsabilidade.

• Aposte nas props: configure seu componente para variações.

• Abuse do children: essencial para componentes de layout.

• Separe lógica de apresentação: componentes UI devem ser simples.

• Documente o essencial: utilize TypeScript e Storybook para documentação.

• Consistência é rei: padronize estilos e nomenclatura.

Quer dominar react de verdade? Seu próximo nível começa aqui!

Conclusão

FAQ

• O que é um componente reutilizável em React?
R: É um bloco de código que pode ser usado em diferentes partes da aplicação sem duplicação, promovendo reuso, consistência e manutenção mais fácil.

• Quais são as vantagens de usar componentes reutilizáveis?
R: Ganho de produtividade, consistência visual, menos retrabalho e um código mais organizado e fácil de manter.

• Como criar um componente reutilizável em React?
R: Definindo um componente genérico que recebe props para ser personalizado, evitando lógica rígida e favorecendo o reuso em diferentes contextos.