React possui uma biblioteca de componentes; a biblioteca de componentes é um plano de design que organiza os componentes juntos para construir por meio de combinações multidimensionais. O design de componentes é feito por meio da desmontagem, indução e reorganização de elementos em funções e expressões visuais, e é baseado em elementos reutilizáveis; o objetivo é formar componentes padronizados. Bibliotecas de componentes comumente usadas para reagir incluem Bulma, AntDesign, Bootstrap, etc.
O ambiente operacional deste tutorial: sistema Windows 10, react versão 17.0.1, computador Dell G3.
O design de componentes consiste em desmontar, resumir e reorganizar elementos em funções e expressões visuais e formar componentes padronizados com base no propósito de reutilização. Todo o plano de design é construído por meio de combinação multidimensional e esses componentes são organizados juntos. é formado.
Bibliotecas de componentes de reação comumente usadas:
Design de formiga
Link do projeto: Ant Design
Tamanho do pacote (de BundlePhobia): 1,2mB após minificação, 349,2kB após minificação + compactação gzip, reduza o tamanho agitando a árvore.
vantagem:
AntDesign vem com extensa documentação de suporte, possui uma comunidade, incluindo um projeto separado (AntDesignPro) com modelos pré-fabricados;
Biblioteca de UI que pode ser usada para projetar rapidamente aplicativos back-end/internos.
deficiência:
falta de acessibilidade;
É grande e espera-se que tenha um grande impacto no desempenho;
Polua seu CSS (espere adicionar !important para evitar que ele estilize seus componentes não Ant).
Inicialização
Na verdade, penso no Bootstrap principalmente como uma biblioteca de UI. Você não ganhará nenhum prêmio de design, mas pode ser usado para concluir alguns projetos avançados e produtos mínimos viáveis.
Mas depende para que você deseja usá-lo. Se você é novo no React, é uma ótima biblioteca para começar. Para desenvolvedores mais experientes, eles podem olhar para styled-components/Emotion.
Existem duas bibliotecas populares com ligações React para Bootstrap, eu pessoalmente só uso Reactstrap.
Link do projeto: React Bootstrap
Tamanho do pacote (de BundlePhobia): 111kB após minificação, 34,4kB após minificação + gzip, reduza o tamanho agitando a árvore
Link do projeto: Reactstrap
Tamanho do pacote (de BundlePhobia): 152,1kB após minificação, 39,4kB após minificação + compactação gzip, reduza o tamanho agitando a árvore
vantagem:
A biblioteca Bootstrap com ligações React que todo mundo adora;
Facilmente personalizável via CSS-in-JS;
Já existe há tempo suficiente para que você não precise se preocupar com bugs/problemas;
Comece rapidamente;
Não há dependência do jQuery, pois ele foi completamente reimplementado no React.
deficiência:
Este é o Bootstrap: se você não personalizá-lo, seu site ficará como qualquer outro.
Bulma
Bulma é diferente das outras bibliotecas apresentadas neste artigo porque Bulma é uma estrutura CSS pura e não requer JS. Você pode optar por usar classes diretamente do Bulma ou usar uma biblioteca wrapper, como react-bulma-components.
Link do projeto: Bulma
Link do projeto: componentes react-bulma
Tamanho do pacote (do BundlePhobia): 179kB minificado, 20,1kB minificado + compactado gzip
vantagem:
Isso não fará com que seu site se pareça com o Bootstrap;
Perfeito para começar a trabalhar rapidamente;
Recursos modernos (flexbox/Grid subjacentes).
deficiência:
Acessibilidade: Existem algumas, mas não tão rigorosas quanto outras bibliotecas, que aderem às diretrizes WCAG.
IU do Chacra
Link do projeto: ChakraUI
Tamanho do pacote (do BundlePhobia): 326,2kB após minificação, 101,2kB após minificação + compactação gzip, reduza o tamanho agitando a árvore
vantagem:
Acessibilidade: Seguindo as diretrizes WAI-ARIA, os componentes usam tags aria;
Desenvolvido pelo servidor Discord;
Fácil de personalizar (com suporte a temas);
Altamente modular, portanto, a agitação da árvore removerá o código que você não usa.
deficiência:
Muito novo.
Perceber:
Está muito próximo da v1, portanto, esteja ciente das alterações significativas após a v0.8.0.
IU de materiais
MaterialUI é uma das minhas bibliotecas de amor e ódio. Isso me ajudou a superar alguns prazos de projetos muito estressantes no passado, mas no final sempre consegui resolver isso o mais rápido possível.
No passado, você só podia personalizar os estilos do MaterialUI escrevendo JSS, mas felizmente agora você pode substituir estilos usando styled-components e Emotion.
Link do projeto: UI de materiais
Tamanho do pacote (do BundlePhobia): 325,7kB minificado, 92kB minificado + gizp compactado, reduzido pelo tremor da árvore
vantagem:
Documentação completa
A biblioteca de ícones é enorme
Simples e fácil de usar (situação no início)
deficiência:
Difícil e penoso de customizar, mas necessário (para melhorar o visual);
Desempenho: muitos nós DOM serão renderizados;
Seu aplicativo parecerá um produto do Google (para alguns, isso pode representar uma aparência profissional).
IU semântica
Link do projeto: UI Semântica
Semantic-UI-React
Tamanho do pacote (de BundlePhobia): 300,8kB após minificação, 80,9kB após minificação + compactação gzip, reduza o tamanho agitando a árvore.
vantagem:
Composable (passar componentes usando como prop)
Fácil de personalizar
Documentação útil
O usuário é bem conhecido (usado internamente pela Netflix e usado por produtos lançados pela Amazon)
Suporte TypeScript
deficiência:
Incerteza potencial de projetos de código aberto.
Ver problema:
https://github.com/Semantic-Org/Semantic-UI/issues/6109
https://github.com/Semantic-Org/Semantic-UI/issues/6413
Fork administrado pela comunidade:
https://github.com/fomantic/Fomantic-UI
Menção Honrosa
Alcance a IU
ReachUI é uma biblioteca de componentes de baixo nível que permite aos desenvolvedores construir componentes React acessíveis em seus sistemas de design.
Não há tamanho de pacote disponível porque cada componente é exportado individualmente como seu próprio pacote npm.
Reakit
Reakit é outra biblioteca de componentes de baixo nível. Tecnicamente, é uma biblioteca de UI, mas não vem com CSS. Então você ainda precisa encontrar uma solução de estilo.
Tamanho do pacote (de BundlePhobia): 119,9kB após minificação, 32,1kB após minificação + compactação gzip, reduza o tamanho agitando a árvore.
Rebaixo
Acompanho o Rebass há algum tempo. É uma biblioteca de componentes poderosa que não vem com tema, mas você pode alterar facilmente o tema. Para ver um exemplo em ação, veja sua demonstração.
Link do projeto: Rebass
Tamanho do pacote (de BundlePhobia): 43kB após minificação, 14,4kB após minificação + compactação gizp, reduza o tamanho agitando a árvore.