React e SOLID ❤️
Decidi escrever este post após observar várias implementações incorretas e excessivamente complexas em React. Para fins didáticos, os exemplos que apresentarei serão o mais simples possível, a fim de facilitar a compreensão de cada princípio.
É possível aplicar os princípios SOLID em código React?
R: Não apenas é possível, mas é também necessário seguir esses princípios.
O primeiro princípio que vamos abordar é o seguinte:
S = Single Responsibility Principle (Princípio da Responsabilidade Única)
Este princípio afirma que uma classe deve ter apenas uma única responsabilidade — ou seja, uma única razão para mudar. Em termos de React, podemos interpretar isso como um componente React devendo ter uma única razão para mudar, com uma responsabilidade bem definida.
Considere uma tela de cadastro, que contém vários componentes como inputs, textos, seletores e botões. Um input, por exemplo, geralmente vem com uma label para descrever o propósito do campo de entrada. Nesse contexto, tanto o input quanto a label são componentes distintos, cada um com sua própria responsabilidade e razão para mudança.
Vamos supor que a label possa aparecer em diferentes estilos em diversos locais do sistema — uma vez com um ícone como prefixo e outra sem. Devemos parametrizar a label via props para permitir essa flexibilidade, ou seria melhor criar uma label específica para cada caso de uso? Considerando a complexidade de cenários, a abordagem mais adequada seria parametrizar a label e permitir que o componente que a utiliza defina seus parâmetros específicos. Assim, o componente responsavel por montar os componentes do formulário pode definir a label com um ícone para um determinado campo, enquanto outro componente a define sem. O ponto central é que a label deve ser um componente separado do input, pois possui sua própria razão para mudanças e pode ter diferentes parâmetros, como uma descrição via tooltip em alguns lugares e não em outros.
Baseado nas definições acima, aqui está uma implementação simplificada:
https://lnkd.in/dfrv3had
Desenvolvedor Full-Stack | Desenvolvedor Front-End
3 mComo sempre, conteúdos únicos, inovadores e que agregam muito valor profissional para nós! Obrigado, mestre!!!