As bibliotecas de componentes React estão se tornando cada vez mais populares, e por boas razões. Eles são ótimas ferramentas que garantem consistência e reutilização de elementos de IU dentro e entre produtos digitais, ao mesmo tempo que têm o potencial de reduzir significativamente o tempo e o esforço de desenvolvimento.
Neste tutorial, descreveremos diferentes abordagens para a construção uma biblioteca de componentes personalizados. Mas, primeiro, tenho uma pergunta para você: você realmente precisa de sua própria biblioteca de componentes? Vamos falar sobre as vantagens e desvantagens de personalizar um.
Benefícios de construir uma biblioteca de componentes
Consistência dentro do código
Um dos maiores benefícios de usar uma biblioteca de componentes garante que nossos componentes tenham uma aparência e um comportamento consistente em todo o aplicativo. As inconsistências da IU podem prejudicar seriamente a experiência do usuário e se tornar uma fonte de frustração.
Reutilização
Os componentes que residem em uma biblioteca de componentes são, por definição, reutilizáveis. Isso é verdade tanto dentro quanto entre aplicativos da web. Se uma alteração for necessária, nós a alteramos uma vez na biblioteca de componentes e ela é refletida em todos os lugares.
Acessibilidade
É importante garantir que nossos aplicativos da web sejam o mais acessíveis possível. Com o uso de uma biblioteca de componentes, um nível básico de acessibilidade pode (e deve) ser construído diretamente em nossos componentes.
Tempo de desenvolvimento
Uma biblioteca de componentes pode se tornar um grande tempo-saver. Ter um repositório de componentes prontos para uso significa menos tempo para construir novos recursos. Além do mais, há menos sobrecarga de comunicação entre designers e desenvolvedores porque o comportamento da IU é predefinido.
Documentação
As bibliotecas de componentes são uma ótima maneira de criar documentação útil e abrangente sobre os componentes da IU. Para obter mais detalhes sobre isso, consulte meu artigo em componentes do React autodocumentados .
Comunidade
Uma biblioteca de componentes bem construída pode ser útil para outras pessoas. Ele pode ser de código aberto e compartilhado com a comunidade de desenvolvedores da web.
Construir uma biblioteca de componentes personalizados parece ótimo, não é? Mas sempre há um outro lado.
Trade-offs para construir uma biblioteca de componentes React customizada
Recursos
Construir uma biblioteca de componentes requer um cross-funcional significativo , esforço inicial envolvendo equipes de design, produto e desenvolvimento. É um empreendimento enorme que requer o nível apropriado de recursos e experiência para obter todos os benefícios.
Manutenção
Manter uma biblioteca de componentes personalizados é um esforço contínuo. Requer atenção constante para mantê-lo atualizado. Envolver uma comunidade de código aberto cria ainda mais sobrecarga.
Configuração
O uso de uma biblioteca de componentes adiciona complexidade à configuração de um projeto. Normalmente, para ser reutilizável em projetos, a biblioteca de componentes reside separadamente de nossos aplicativos e é instalada como uma dependência. Isso significa que toda vez que há uma mudança, a biblioteca de componentes precisa ser publicada novamente e todos os aplicativos dependentes atualizados.
Personalização
Uma biblioteca de componentes por design coloca muitas restrições sobre o que é possível fazer com nossos componentes. Isso geralmente é uma coisa boa. No entanto, existem certos casos em que a necessidade de personalização é inevitável. Encontrar o equilíbrio certo entre a flexibilidade e a simplicidade das APIs de componentes pode ser extremamente desafiador.
Construir ou não uma biblioteca de componentes React customizada?
Dado o acima, parece que para a maioria dos projetos, construir sua própria biblioteca de componentes do zero simplesmente não vale o tempo e o esforço. A boa notícia é que talvez você não precise fazer isso!
Existem várias maneiras de equilibrar os benefícios e as compensações da criação de bibliotecas de componentes, e o ecossistema React está aqui para ajudar.
Abordagens para construir uma biblioteca de componentes React
1. Do zero
Conforme implícito no nome, com essa abordagem, criamos tudo nós mesmos-desde as regras e padrões da IU até os próprios componentes. Usamos React, talvez junto com nossa biblioteca CSS-in-JS favorita (se você gosta desse tipo de coisa 
Liberdade quase infinita para criar, construir e personalizar conforme necessário Dependência mínima de terceiros Controle total sobre o código-fonte Grande esforço inicial multifuncional Custo de manutenção contínua Construindo um React a biblioteca de componentes do zero é adequada principalmente para produtos digitais complexos e um tanto idiossincráticos, abrangendo vários aplicativos da web e com uma equipe de desenvolvimento grande o suficiente para ser capaz de suportar o custo. Construindo nossa própria estrutura e restrições quando se trata dos blocos básicos de construção de nossa biblioteca de componentes-cores, tipografia, espaçamento, sombras, etc.-é difícil e, na maioria dos casos, desnecessário. Já existem ótimas soluções! O que imediatamente vem à mente neste contexto é Tailwind CSS . Ele nos permite construir interfaces de usuário complexas com um conjunto limitado e restrito de utilitários de estilo. O Tailwind é fácil para os desenvolvedores adotar e se familiarizarem e também é extremamente personalizável e flexível. Se optarmos por uma solução CSS-in-JS e componentes estilizados em particular, outra abordagem para introduzir algumas restrições úteis é usar Sistema estilizado . Com ele, podemos estruturar nosso tema de maneiras extremamente úteis e tirar proveito de uma série de utilitários enquanto mantemos um controle significativo quando se trata de construir nossos componentes. Liberdade para criar, construir e personalizar conforme necessário Os blocos de construção baseados em restrições fornecem estrutura Apresentamos um dependência no próprio núcleo de nossa biblioteca de componentes-migrar para longe dela pode ser impossível. Custos de manutenção (embora um pouco reduzidos) continuam sendo nossa responsabilidade Esta abordagem é adequada para projetos com componentes de IU que requerem muita flexibilidade e liberdade para customizar. Antes de se decidir por uma solução, certifique-se de que as restrições introduzidas sejam adequadas para os casos de uso específicos do projeto e estejam em linha com os requisitos de design e desenvolvimento. Existem certos componentes React que são notoriamente difíceis de criar do zero. Pense em um componente selecionado que precisa oferecer suporte a recursos como pesquisa, seleção múltipla, não existe a criação de sua própria opção, controle de teclado e capacidade de resposta. Que tal um seletor de data com calendário, controles de teclado , entrada mascarada e validações que também são acessíveis? E que tal uma dica de ferramenta que é animada, personalizável e sempre se posiciona corretamente? Mesmo componentes amplamente usados, como modal e guias, podem ser desafiadores para criar adequadamente do zero. Uma ótima maneira de economizar tempo e esforço ao criar uma biblioteca de componentes é aproveitar o ecossistema do React para esses componentes mais complexos. Voltando à lista acima, aqui estão alguns exemplos. Quando se trata de um componente selecionado, react-select vem com todos os recursos já mencionados e muito mais pronto para uso. Para selecionadores de data, também existem algumas ótimas opções, dependendo do caso de uso, incluindo react-date-selecionador , react-datepicker e datas de reação . Quando se trata de dicas de ferramentas, react-tippy nos ajuda. Por fim, Reach UI é um exemplo de biblioteca que fornece componentes realmente acessíveis e personalizáveis, como modais, guias, menus e muito mais mais. Eles podem ser instalados separadamente, então escolha todos ou apenas alguns deles para adicionar ao seu projeto. Por outro lado, adicionar componentes de terceiros à sua biblioteca traz algumas desvantagens. Economiza tempo e recursos tirando proveito de interfaces de usuário testadas em batalha enquanto reduz a complexidade em nossa própria base de código. O uso de componentes externos minimiza seletivamente o impacto das dependências. O custo de manutenção para a biblioteca de componentes é um tanto reduzido/images/core/emoji/13.0.1/72×72/274c.png”/> Cons:
Coloca restrições significativas no comportamento e recursos de nossos componentes dependentes Apresenta uma série de terceiros as dependências de terceiros sobre as quais temos pouco controle sobre os componentes externos às vezes são difíceis de personalizar totalmente Usar essa abordagem tira uma grande carga da equipe de desenvolvimento da biblioteca de componentes. Ainda assim, ao decidir integrar componentes de terceiros, você deve considerar o impacto de longo prazo e certificar-se, na medida do possível, de que esses componentes correspondam às necessidades do projeto. Muitas vezes acontece que o tempo e os recursos que estamos dispostos a investir em uma biblioteca de componentes para nosso projeto simplesmente não equivalem ao que é necessário para implementar as abordagens acima. Este pode ser o caso se o escopo do nosso projeto for um pouco limitado ou, mesmo com projetos maiores, se os componentes da interface do usuário de que precisamos forem relativamente padrão. Ainda queremos ser capazes de estilizar e personalizar um pouco o nosso componentes, mas estamos felizes em contar com as APIs de componentes sensíveis determinadas por uma biblioteca de componentes de base externa. Felizmente, existem várias opções de escolha no ecossistema React. Embora listas abrangentes de bibliotecas de componentes React possam ser encontradas em outros lugares, considero Chakra UI uma escolha adequada para esta abordagem na grande maioria dos casos. Reduz significativamente o tempo e esforço necessários para implementar componentes O estilo do componente é fácil de personalizar Descarrega a maior parte do custo de manutenção Somos totalmente dependentes da nossa biblioteca de escolha, portanto, migrar para longe dela pode ser impossível. Há um risco de requisitos do projeto divergindo do que está disponível na biblioteca externa ao longo do tempo Usar uma biblioteca de componentes existente para o nosso projeto é o caminho a percorrer se valorizarmos a velocidade de desenvolvimento e, ao mesmo tempo, estarmos confiantes de que os requisitos futuros não entrarão em conflito com nossa escolha. Finalmente, podemos construir nosso projeto com uma biblioteca de componentes que está pronta para usar. Essas soluções, embora sejam um tanto personalizáveis, nos fornecem tudo de que precisamos imediatamente, de esquemas de cores e um tema a uma coleção abrangente de componentes. Um exemplo excelente disso é o IU de material . Esta biblioteca é realmente extensa, o que a torna perfeita se você deseja começar a construir seu aplicativo React com configuração mínima. Por causa disso, Material UI é, sem dúvida, minha ferramenta de escolha ao construir protótipos e provas de conceito. Também é útil durante tarefas de entrevista, quando o tempo é essencial. Existem, no entanto, desvantagens significativas em unir fortemente um projeto da vida real a uma biblioteca de componentes fortemente opinativa. Vamos decompô-lo. Fácil e simples de começar, o que significa mínimo esforço inicial necessário Custo mínimo de manutenção A personalização é difícil desde o início A maioria das funcionalidades e estilos são predefinidos. Isso pode fazer com que nossa IU pareça genérica e semelhante a outras que usam a mesma biblioteca. Os designers e desenvolvedores devem lidar com restrições e princípios de design sobre os quais eles não têm controle A abordagem que escolhemos ao construir (ou não construir) nossa biblioteca de componentes customizados é uma decisão estratégica que impactará nosso projeto React do início ao fim. Compreender as implicações dessa escolha e ser capaz de avaliar adequadamente os benefícios e compensações é de suma importância. Espero que a visão geral acima nos ajude a estar melhor equipados para o desafio. Se você achou este artigo útil, siga me no Twitter para mais conteúdo de tecnologia! 
Pros:
Cons:
2. Introduzir restrições com Tailwind CSS, componentes estilizados e sistema estilizado
Pros:
Cons:
3. Use componentes selecionados, como React date-picker, react-tippy e Reach UI
Pros:
4. Bibliotecas de componentes React altamente personalizáveis como Chakra UI
Prós: Cons:
5. Bibliotecas de componentes prontas para usar
Prós: Cons:
Conclusão
