Componentes

No meio de tags HTML, atributos, estilização com Flexbox e Grid, pré-processadores como Sass ou Less e até o descolado TailwindCSS, o universo do Front-End é vasto e cheio de aventuras. É fácil se perder em meio a tantas ferramentas. Parece que a cada semestre surge um “novo ReactJS”, o queridinho do momento que todos querem experimentar.

Mas não, não é sobre isso que vamos falar hoje. Na verdade, o assunto de hoje vai além de tudo isso. Não em termos de complexidade, mas de conceito. Você não precisa conhecer nenhuma dessas ferramentas para acompanhar. Vamos falar sobre componentes. O que são? Quando usá-los? E quando não usá-los (será que existe isso?) Vem comigo!

Compo...o que?

Vamos entender o conceito de Componentização. Trata-se de dividir o código em pequenas partes, os chamados Componentes. Cada componente representa uma área específica da tela, página ou funcionalidade.

Pensa assim: quando uma fábrica constrói um carro, ela não o faz de uma vez só. Primeiro vem a carroceria, depois as rodas, o motor, e por aí vai. Um carro é a soma de suas partes. Cada peça tem sua função, e juntas fazem o carro funcionar.

Observe abaixo:

Temos o motor, a suspensão, o sistema elétrico, os freios, a direção, entre outros. Cada parte funciona de forma independente, mas, quando reunidas, fazem o carro rodar. Pegou a ideia?

E como isso se traduz no Front-End? Dá uma olhada neste exemplo de landing page de um site de viagens:

Poderíamos construir essa página inteira num único arquivo HTML com CSS. Mas também poderíamos dividi-la em partes menores, cada uma representando um componente específico:

A imagem acima mostra a organização desta página em componentes, onde cada quadrado colorido seria um componente:

• Em azul, as ofertas do site.
• Em vermelho, a barra de pesquisa, juntamente com os filtros da página.
• Em amarelo, os diferentes locais disponíveis.
• Em verde, o menu da página.

Este é apenas um exemplo de componentização, poderíamos criar vários outros componentes e organizar de várias outras formas diferentes. Mas veja que temos o mesmo cenário do carro: diferentes partes que compõem o todo. Legal, não é?

E por que eu faria isso?

Então, deixa eu te devolver com outra pergunta: por que você NÃO faria isso? Componentizar melhora sua aplicação em vários aspectos. Vamos ver alguns deles:

1. 🔀 Separação de fluxos

Sabe aquele ditado: “Casa organizada, vida tranquila”? No front-end, isso vale ouro.

Quando você quebra sua página em componentes, você está basicamente organizando a bagunça. Em vez de ter uma tonelada de código num único arquivo, você divide tudo em pequenos blocos, cada um com uma responsabilidade. Isso se chama separação de fluxos.

Imagine que você está desenvolvendo um site de reservas de viagem. Lá tem o formulário de busca, as listas de destinos, as promoções, o menu superior, rodapé, etc. Agora imagina tentar dar manutenção nisso tudo num único arquivo. Um caos, né?

Agora, se você criou um componente para o formulário de busca, outro para a listagem de destinos, outro para o banner principal, fica fácil. Quer mudar um botão no formulário? Vai direto no componente dele. Quer adicionar um ícone novo nos destinos? Vai no componente de destino. É como trabalhar com gavetas bem organizadas em vez de uma caixa onde você jogou tudo misturado.

Essa separação também ajuda na focagem mental (se isso existe? bom, existe agora. risos). Você não precisa manter 10 coisas na cabeça ao mesmo tempo. Você olha para um componente e resolve o problema ali, sem se preocupar com o resto do mundo.

Páginas com layouts ou funcionalidades complexas são um bom indicativo de que você deveria componentizar. Imagina desenvolver a página abaixo sem componentização:

Consegue enxergar? Caso nós apliquemos o conceito da componentização, essa página se torna bem mais simples de entender e desenvolver.

2. ♻️ Reutilização de código

Sabe quando você escreve um trecho de código que ficou tão redondinho, tão certinho, que você pensa: “Dava para usar isso em outro lugar também”?

É aí que entra a mágica da reutilização.

Componentes permitem que você crie algo que possa ser usado em várias partes da aplicação. Por exemplo, uma caixa de alerta: você pode fazer um componente <Alerta tipo="erro" />, e reaproveitá-lo em todo lugar que precisar alertar o usuário. Muda só a cor e a mensagem. O resto está pronto.

Ou um componente de paginação, como já vimos. Em vez de copiar e colar aquele bloco de HTML com 10 botões de navegação em todas as páginas de listagem, você cria um único componente de paginação e usa onde quiser com um simples <Paginacao />.

Isso reduz código repetido, diminui a chance de bugs (porque se você precisar corrigir um comportamento, corrige em um lugar só) e deixa sua aplicação muito mais consistente visualmente e funcionalmente.

Sem contar que seu eu do futuro vai agradecer. Um dia você vai olhar para seu próprio projeto e pensar: “Ainda bem que fiz isso direito”.

Componente de paginação da biblioteca de componentes Angular Material. Poderíamos utilizá-lo para exibir todos os detalhes de paginação de todas as listagens da nossa aplicação. Clique aqui para ver mais sobre.

3. 🛠️ Manutenabilidade

Beleza, seu código está no ar, funcionando bonitinho. Mas acredite: cedo ou tarde, alguma coisa vai dar problema. Ou então, alguém vai pedir uma nova funcionalidade. E aí vem a pergunta: quão fácil vai ser fazer essa manutenção?

Componentização é uma das melhores formas de garantir que você vai conseguir dar manutenção no seu código sem arrancar os cabelos.

Pensa só: se tiver um bug numa listagem de usuários, e essa listagem for um componente isolado, você vai direto ao ponto. Agora, se ela estiver enfiada num bloco de 800 linhas de código junto com outras 10 funcionalidades... boa sorte.

E lembra do exemplo do carro? Se o veículo para de funcionar, o mecânico já sabe onde investigar: motor, bateria, combustível... porque o carro tem uma estrutura organizada. O mesmo vale aqui. Um código organizado em componentes te ajuda a entender onde está o problema e como resolvê-lo sem quebrar o resto.

E não é só bug. Às vezes, a manutenção é uma melhoria. Imagina que o time de produto decidiu que agora todos os botões de “Comprar” devem ter um ícone de carrinho. Se você tiver um componente de botão de compra, ótimo. Vai lá, altera o componente, e todos os botões do site já recebem a mudança. Um toque de mágica. Agora... se você copiou e colou esse botão por aí... 🤡

4. ✍️ Legibilidade de código

Agora vamos falar de algo que pouca gente dá a devida atenção, mas que faz uma baita diferença: a legibilidade do código.

Já teve que ler aquele código que parece que foi escrito por um oráculo antigo de outra dimensão? Aqueles arquivos gigantes, sem indentação, com nomes genéricos tipo x1, data2, funçãoNova123... pois é.

Componentes ajudam a deixar seu código mais limpo, semântico e legível. Você olha pro JSX (ou HTML, ou qualquer coisa que estiver usando) e já entende o que cada coisa faz. Em vez de <div class="container"> com 30 filhos dentro, você vê algo como:

return (
  <div>
    <Header />
    <FormularioDeBusca />
    <ListaDeDestinos />
    <Rodape />
  </div>
);

Diz aí: muito mais fácil de entender, né?

E isso não é só bom para você. É bom para quem vai trabalhar com seu código depois. Seja um colega de equipe, um revisor de código, ou até mesmo você daqui a 6 meses (porque sim, a gente esquece).

Aliás, se você estiver estudando ou começando na área, essa clareza ajuda até no processo de aprendizagem. Componentes bem nomeados te ajudam a entender a estrutura do sistema sem ter que abrir mil arquivos.

Conclusão

Ao longo do artigo, vimos como os componentes ajudam a dar mais clareza, organização e flexibilidade ao desenvolvimento front-end. Separar partes da interface em blocos bem definidos não só facilita a leitura e manutenção do código, como também deixa tudo mais escalável, seja em projetos pequenos ou nas maiores aplicações da sua carreira.

E claro, cada projeto tem seu momento e sua forma de crescer. Às vezes a gente começa com tudo num lugar só, vai ganhando confiança, aprendendo os padrões, e aos poucos vai percebendo onde componentizar faz sentido. É um processo natural, e cada passo nessa direção ajuda bastante.

Agora, se você já viu valor nessa abordagem e quer ir além, tem um próximo passo que vale muito a pena conhecer: os componentes genéricos. Aqueles que podem ser reaproveitados em vários lugares, que recebem dados diferentes e se adaptam ao contexto, sem precisar reescrever tudo de novo.

No próximo artigo, vamos falar justamente sobre isso: como criar componentes mais flexíveis, reutilizáveis e inteligentes. Se esse assunto já despertou sua curiosidade, fica por aqui que vem coisa boa!