Quelle bibliothèque de composants d’interface utilisateur React utilise-t-elle ?

Les bibliothèques de composants d'interface utilisateur disponibles pour React sont : 1. Material-UI, qui contient des composants pour la mise en page, les formulaires, la navigation, l'affichage des données et de nombreux autres widgets ; 2. Ant Design, qui contient plus de 60 composants avec un type statique prévisible ; 3. Blueprint, avec plus de 40 composants ; 4. React Bootstrap, offrant une compatibilité totale avec un grand nombre de thèmes Bootstrap existants ; 5. Onsen UI, fournissant des onglets, des menus latéraux, une navigation dans la pile, des listes, des formulaires, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version React18, ordinateur Dell G3.

bibliothèque de composants React

1, Material-UI

Material-UI est la bibliothèque de composants React la plus populaire et la plus couramment utilisée sur GitHub. Il est simple, léger et construit selon les spécifications Material-UI de Google. Il existe des composants pour la mise en page, les formulaires, la navigation, l'affichage des données et bien d'autres widgets.

Vous pouvez styliser vos composants à l'aide de @material-ui/styles, une solution CSS-in-JS rapide et évolutive avec les mêmes avantages que les composants stylisés. Material-UI interagit également avec d'autres solutions de style majeures, vous n'avez donc pas besoin d'utiliser ses styles.

2. Ant Design

Ant Design est une société chinoise dotée d'une bibliothèque React, conçue pour les applications Web des grandes entreprises. Les exemples incluent Tencent, Alibaba et Baidu. Cette bibliothèque contient plus de 60 composants écrits en TypeScript avec un typage statique prévisible. Ses documents en chinois et en anglais sont concis, élégamment rédigés et complets dans leur contenu.

Mais Ant Design est plus qu'une simple bibliothèque d'interface utilisateur React. C’est tout un système de conception construit autour des valeurs de croissance, de sens, de certitude et de nature. Consultez leurs ressources pour un kit d'interface utilisateur Figma, des modèles de page de destination, un plugin Sketch, et plus encore, et c'est notre bibliothèque de composants React incontournable.

3. Blueprint

En tant que bibliothèque de composants React couramment utilisée, Blueprint fournit des composants riches et populaires. Blueprint est une bibliothèque React UI développée par Palantir, une société américaine de technologie d'analyse du Big Data. Leur bibliothèque React contient plus de 40 composants, spécifiquement optimisés pour les interfaces complexes gourmandes en données pour les applications de bureau.

Blueprint est écrit en TypeScript, comme le sont tous les exemples de code dans leur documentation. La bibliothèque prend en charge Chrome, Firefox, Safari, IE 11 et Microsoft Edge. IE10 et versions antérieures ne sont pas pris en charge en raison du manque de prise en charge de la mise en page flexible CSS.

4. React Bootstrap

React Bootstrap en remplacement de Bootstrap JavaScript. Chaque composant est construit comme un véritable composant React, il n'est donc pas nécessaire de s'appuyer sur jQuery. React Bootstrap est l'une des bibliothèques React les plus anciennes et a connu une croissance constante avec React lui-même. Étant donné qu'un grand nombre d'anciens utilisateurs utilisent Bootstrap, React Bootstrap est également une bibliothèque de composants React plus couramment utilisée.

Le système de grille de Bootstrap signifie que votre mise en page aura une série de conteneurs, de lignes et de colonnes entièrement réactives. Vous pouvez choisir entre des dizaines de composants, notamment des badges, des carrousels, des toasts et des jumbotrons.

Il offre une compatibilité totale avec un grand nombre de thèmes Bootstrap déjà existants, ainsi qu'une longue liste de composants avec une puissance totale pour chaque thème. React Bootstrap met à jour l'état dans un DOM virtuel, qui constitue une solution de développement plus stable en intégrant les fonctionnalités de Bootstrap dans le DOM virtuel de React.

5, Onsen UI

Onsen UI est une bibliothèque de composants Reac couramment utilisée conçue pour créer des applications HTML5 et Web mobiles. Ses composants incluent des onglets, des menus latéraux, une navigation dans la pile, des listes, des formulaires, etc. Tous les composants prennent en charge la conception matérielle iOS et Android et modifient automatiquement l'apparence de votre application en fonction de la plate-forme.

Sous le capot, Onsen se compose de trois couches : des composants CSS écrits en cssnext, des composants Web écrits en JavaScript natif, des liaisons de framework pour une intégration facile avec React, ainsi que Vue et Angular.

6. Grommet

Grommet est une bibliothèque de composants conçue pour les projets Web réactifs, accessibles et mobiles. Il intègre des méthodes de conception atomique et permet la navigation au clavier, les onglets du lecteur d'écran, etc. Il contient même une liste d’icônes SVG.

De nombreuses grandes entreprises, dont Netflix, Uber, Boeing, HP, Samsung et Twilio, utilisent Grommet pour concevoir leurs applications Web. Si vous souhaitez que votre conception soit moins « Google », jetez un œil aux composants de Grommet. , il s'agit d'une excellente bibliothèque de composants React couramment utilisée avec de très beaux composants.

7、Gestalt

Gestalt est un ensemble de composants de l'interface utilisateur React qui améliorent le langage de conception de Pinterest. Son objectif est de créer une bibliothèque partagée de bonnes pratiques de conception. La bibliothèque prend en charge la droite à gauche, l'internationalisation et le mode sombre.

En raison de sa conception automatique et de ses mises à jour de code qui s'exécutent sur plusieurs plates-formes, Gestalt nécessite relativement peu de maintenance. Lorsqu'une version entraîne des modifications importantes - en termes d'utilisation ou de saisie - elle fournit un codemod pour simplifier le processus de mise à niveau.

8. Semantic UI React

React est le plug-in officiel de l'interface utilisateur sémantique. Il est indépendant de jQuery et propose une API déclarative, des accessoires simplifiés, des sous-composants, des extensions, un contrôle automatique de l'état, etc. La bibliothèque possède une collection de plus de 50 composants, notamment des fragments, des barres de progression, des transitions, une pagination, etc.

Semantic UI React fournit des composants, tandis que Semantic UI fournit des thèmes sous forme de feuilles de style CSS. Vous pouvez également utiliser au lieu de . Je préfère l'interface utilisateur sémantique et j'ai une certaine expérience de son utilisation. en tant que bibliothèque de composants React relativement couramment utilisée.

9, Rebass

Rebass est une bibliothèque de composants originale et une bibliothèque de composants React couramment utilisée, construite avec un système de style par Brent Jackson. Il est conçu pour créer une interface utilisateur cohérente avec des contraintes de conception et une échelle définie par l'utilisateur. L'empreinte de Rebass n'est que de 4 Ko, ce qui signifie une conception et un développement rapides.

Rebass espère être minimal, utile, sans contrainte, extensible et thématique avec une prise en charge des thèmes de première classe et une compatibilité avec l'interface utilisateur du thème.

10, React Virtualized

React Virtualized se concentre sur des aspects spécifiques de toute interface utilisateur, rendant le rendu des tableaux assez facile dans la plupart des cas, dans une bibliothèque de composants React unique. Avec React Virtualized, les développeurs Web peuvent facilement restituer de grandes quantités de données en utilisant des composants tels que des listes, des tableaux, des grilles, des collections, etc. Il peut être utilisé pour créer des tableaux plus conviviaux. React Virtualized dispose déjà d'une séquence complète d'instructions pour le configurer.

11. Blueprint UI React

Le cadre de composants Blueprint UI React est le même chemin de développement d'interface utilisateur pour toutes les nouvelles applications de bureau et Web gourmandes en données. Il s'agit d'une boîte à outils d'interface utilisateur basée sur React conçue pour créer des interfaces complexes gourmandes en données pour les applications de bureau. Il s'agit d'un excellent package d'interface utilisateur qui vise à fournir des normes d'utilisation prêtes à l'emploi pour tous les composants et vous donne accès aux modes de thème clair et sombre.

12. React Toolbox

React Toolbox est une série de composants React qui implémentent les exigences de Google Material Design. Il est basé sur certaines des propositions les plus courantes telles que les modules CSS (écrits en SASS), Webpack et ES6. La bibliothèque est étroitement intégrée au flux de travail de votre package Web, entièrement configurable et polyvalente.

Il fournit de nombreux composants tels que des boutons, des cartes, des sélecteurs de date, des dialogues et d'autres éléments communs. Permettant aux développeurs Web de créer des applications Web époustouflantes, la bibliothèque comprend également une documentation complète.

【Recommandation associée : Tutoriel vidéo Redis】

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!