← Voltar ao Glossário
InicianteFrontend

O que é Componente?

Unidade reutilizável e independente de interface de usuário que encapsula lógica, estilo e estrutura.

Definição completa

Componentes são blocos de construção fundamentais em frameworks modernos como React, Vue e Angular. Cada componente encapsula sua própria lógica, estado e interface, podendo ser reutilizado em diferentes partes da aplicação. Podem receber dados externos via props e gerenciar seu próprio estado interno. A composição de componentes permite construir interfaces complexas a partir de peças simples.

Exemplo de código

// Componente funcional em React
interface ButtonProps {
  label: string;
  variant?: 'primary' | 'secondary';
  onClick: () => void;
}

export function Button({ label, variant = 'primary', onClick }: ButtonProps) {
  return (
    <button
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {label}
    </button>
  );
}

// Uso
<Button label="Salvar" onClick={handleSave} />