Olá pessoal, muitos tem essa duvida de componentização citada no titulo desse artigo, mas vamos lá.
Venho trabalhando com React tem um bom tempo e vejo que em diversas empresas que passei ou projetos que já peguei o desenvolvedor tem uma visão individual do que componentizar.
Mas sem delongas, vamos iniciar com 2 informações muito importantes que são os tipos de componentes:
Temos os componente sem estado e os componente com estado. Mas o que significa isso, Diego? -Bom, temos um tipo de componente que não faz absolutamente nada (tem quem chame de componente burro ou stateless), ou seja, só renderiza o conteúdo e tem também o tipo de componente que trafega dados e se comporta de maneiras diferentes conforme seu estado é alterado.
Vamos para alguns exemplos:
- Component Stateless
Component Stateless
Component Stateful
Component Stateful
Como vocês podem ver o componente Stateful, podemos manipular os dados nele afim de trafegar informações entre os componentes filhos.
Mas voltando ao assunto, como componentizar!?
Vamos levantar alguns cenários:
1- Temos uma lista de usuários onde temos que criar um card para cada um deles contendo suas informações que são as mesmas, bom esse cara é um grande candidato a sem um componente pelo simples motivo de ter as mesma informações sendo renderizadas.
Vamos desenhar algo aqui:
Características do Card
2- Claramente temos um componente aqui, porque se formos usar ele para N pessoas só precisamos usar o .map() iterar nosso array. E para isso so precisamos passar para o componente que aqui chamaremos de Card as seguintes informações:
Component Card
Esse é um exemplo de componente sem estado, onde ele só é populado por meio das props quando colocamos variáveis a serem manipuladas usamos sempre as chaves {...} passando o this.props.NomeDoConteudo e em sefuida pegamos ele la no nosso componente pai que já é um componente com estado e podemos manipular seus valores e decidir como preencher cada props dessa maneira:
Agora sabemos as diferenças entre componentes e podemos observar o que vai ser componente ou não.
Mais exemplos:
Botões Se seu site vai ter +30 botões que serão do mesmo tamanho e do mesmo formato, as vezes só mudando a cor e o texto, não temos a necessidade de escrever +30x o mesmo código HTMLe CSS para criar esses botões, nós precisamos somente customizar eles e no máximo mudar um nome de classe que vai conter a estilização de cor dele usando as props para isso.
Informações repetitivas Todas as informações que vão obedecer o mesmo designer contendo as mesmos padrões de informações é passível de ser componentizado, seja com estado ou não, lembrando que se voce pode iterar sobre essas informações ela vai ser componente. Até mesmo as td/td de uma tabela.
Inputs Essa já é uma parte bem delicada, mas vale pensar, sua app vai tem muitos campos de inputs? Se sim, você provavelmente segue um designer system, correto? Se não segue, você tem no mínimo um pattern desses inputs pra não ficar cada um de um jeito. Bom se já analisou tudo isso, pode componentizar ele e só alterar a prop de type dele que vai ser sucesso. Vale lembrar que os events funcionam normal com inputs componentizados.
Sidebar/navbar Bora componentizar esses caras ai.
Modal Modais são bem chatinhos de construir no começo, mas podem sim ser componentes. Lembrando que no modal você coloca props para receber um retorno de função e props para booleana na interação de visível ou não.
Dica, para você customizar estilização de componentes voce pode usar a lib Styled Components ou emotion para manipular os componentes filho, basicamente você define o estilo default do componente e depois se precisar mudar ele, você só altera o que precisa nele usando herança de valores. Vou escrever algo sobre essas libs em breve, mas vale o estudo.