A componentização é algo muito bom que veio com os frameworks modernos de javascript. Através dela você consegue dividir seu código em vários pedaços, tanto para melhor facilidade de manutenção, já que tudo está separado, quanto para reusabilidade, conseguindo chamá-los quantas vezes necessário, mesmo tendo que mudar os dados.

Para isso existem props, que são basicamente valores que esse componente pode receber. Outra coisa muito legal sobre componentes é você conseguir mostrar algo só quando realmente necessário, sem impactar no first view do usuário, podendo carregar tal componente só quando for aparecer para o usuário, sem ter que fazer toda essa carga antes.

Mas o que e como componentizar?

Para exemplificar melhor, trouxemos alguns layouts para podermos identificar e fazer a componentização com base neles. Na parte de código usamos Vue.js, porém o conceito de componentização é o mesmo para a maioria dos frameworks. 

Olhando esta imagem podemos ver alguns elementos que podem ser componentizados, como esses cards, por exemplo. Ele é um componente dinâmico, pois os cards têm a mesma aparência mudando apenas o seu conteúdo.

Temos 4 cards com conteúdos e cores diferente, mas que estruturalmente são iguais, então vamos ver na prática como isso ficaria.

Para isso criaremos um componente chamado “BenefitsCard”, usaremos o vuetify para facilitar o exemplo.

Como podemos ver, esse componente recebe 4 props, mas o que são props? Resumidamente, são valores que esse componente pode receber e quando ele for chamado, podemos passar esses dados pra ele que ele irá usá-los para alguma coisa. Neste exemplo, ele usa o texto para mostrar na tela.

Com isso temos nosso card e agora podemos chamá-lo onde quisermos usar:

Como na tela temos 4 cards desses, poderíamos colocá-los dentro de um for e passar os dados de texto que estivessem nesses objetos do array para criar vários deles.

O importante na hora de componentizar é conseguir identificar isso no layout, tentar fazer algo reutilizável ou apenas separar seu código para uma melhor manutenibilidade, pois existem componentes que não precisam ser reusáveis, esses componentes são chamados de single instance.

Esperamos que tenha gostado deste rápido exemplo! Vamos deixar alguns link abaixo para que você consiga entender mais afundo sobre o tema, caso queira seguir neste mundo dos frameworks js.

1. Components Basics
2. React.Component
3. React do zero: componentização, propriedades e estado
4. Vue.js: Componentes Dinâmicos
5. Criando componentes reutilizáveis

Confira os outros textos do Guia do Dev Iniciante, Introdução ao Git e Consumindo APIs. Qualquer dúvida entre em contato com a Jera.

Texto: Dayves Dias