Maison > Article > interface Web > Quels sont les composants de React ?
Les composants de React incluent : 1. Ant Design ; 2. Bootstrap ; 3. Bulma ; 4. Interface utilisateur de Chakra ; 6. Interface utilisateur sémantique ; 7. Interface utilisateur Reach ;
L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.
Quels sont les composants de React ?
Recommandation de la bibliothèque de composants Top React
Lien du projet :
Avantages :
Inconvénients :
En fait, je considère principalement Bootstrap comme une bibliothèque d'interface utilisateur. Il ne vous rapportera aucun prix de design, mais il peut être utilisé pour réaliser certains projets avancés et des produits minimum viables.
Mais cela dépend de l'utilisation que vous souhaitez en faire. Si vous êtes nouveau sur React, c'est une excellente bibliothèque pour commencer. Pour les développeurs plus expérimentés, ils peuvent se tourner vers les composants stylisés / Emotion.
Il existe deux bibliothèques populaires avec des liaisons React pour Bootstrap, personnellement, j'utilise uniquement Reactstrap.
Lien du projet :
Bulma n'est pas la même chose que les autres bibliothèques présentées dans cet article, car Bulma est un framework CSS pur et ne nécessite pas de JS. Vous pouvez choisir d'utiliser les classes de Bulma directement ou d'utiliser une bibliothèque wrapper telle que React-bulma-components.
Lien du projet :
Avantages :
Inconvénients :
Lien du projet :
Avantages :
Inconvénients :
REMARQUE :
Elle est très proche de la version v1, alors soyez conscient des changements importants après la v0.8.0.
MaterialUI est une de ces bibliothèques que j'aime détester. Cela m'a aidé à surmonter certains délais de projets très stressants dans le passé, mais au final, je les ai toujours réglés le plus rapidement possible.
Dans le passé, vous ne pouviez personnaliser les styles de MaterialUI qu'en écrivant du JSS, mais heureusement, vous pouvez désormais remplacer les styles à l'aide de composants stylisés et d'Emotion.
https://material-ui.com/guides/interoperability/#styled-components
Lien du projet :
Avantages :
Inconvénients :
ReachUI est une bibliothèque de composants de bas niveau qui permet aux développeurs de créer des composants React accessibles dans leurs systèmes de conception.
Aucune taille de package n'est disponible car chaque composant est exporté individuellement en tant que son propre package npm.
ReakitReakit est une autre bibliothèque de composants de bas niveau. Techniquement, c'est une bibliothèque d'interface utilisateur, mais elle n'est pas livrée avec CSS. Il vous reste donc encore à trouver une solution de style.
Taille du bundle (de BundlePhobia) : 119,9 Ko après minification, 32,1 Ko après minification + compression gzip, réduisez la taille en secouant l'arbre.Je suis Rebass depuis un moment. Il s'agit d'une bibliothèque de composants puissante qui n'est pas livrée avec un thème, mais vous pouvez facilement modifier le thème. Pour un exemple pratique de celui-ci, voir sa démo: project lien: Lors de la rédaction de cette liste, j'ai essayé d'éviter d'inclure des systèmes de conception commerciale, mais certains systèmes (Material UI) sont devenus largement adoptés, la liste ne serait donc pas complète sans eux. J'ai également intentionnellement omis les CSS-in-JS (comme les composants stylisés et Emotion) et les systèmes CSS utilitaires (comme Tailwind, https://tailwindcss.com/) car ils ne sont pas définitivement un "Bibliothèque de composants React", mais un outil pour créer des composants. Apprentissage recommandé : "Tutoriel vidéo React"
Astuce
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!