20+ meilleures bibliothèques / cadres de composants d’interface utilisateur React pour 2020

Meilleures bibliothèques / cadres de composants React UI


Dans cette ressource, nous examinons les meilleures bibliothèques de composants et cadres React UI disponibles sur le Web. Mais d’abord:

Qu’est-ce que React?

React est une bibliothèque JavaScript open source qui vous aide à créer une interface haut de gamme pour le Web et les applications mobiles. Il se combine facilement avec d’autres cadres et bibliothèques JavaScript et contient de minuscules bits de code autonomes appelés composants. Ce sont ces composants qui vont être à l’honneur dans cette ressource.

Ce qui est bien avec les composants, c’est qu’ils sont modulaires sans beaucoup de dépendances spécifiques à l’application. Cela signifie que vous pouvez réutiliser les composants pour créer des applications et des interfaces impressionnantes très rapidement. Et merci à Bit, vous pouvez également les partager avec d’autres passionnés de React.

Avant de commencer votre prochain projet avec React, prenez quelques minutes pour parcourir cette liste des meilleures bibliothèques de composants React UI qui peuvent vous aider à créer une interface utilisateur impressionnante.

Meilleures bibliothèques de composants et cadres React UI en 2020

Kit de matériaux React

Bibliothèques de composants React UI: Material Kit React

Créé à partir de l’inspiration de Material Design de Google, Material Kit React construit un ensemble d’éléments qui mettent la cohérence comme caractéristique principale. De cette façon, votre projet Web conserve une similitude d’apparence et fonctionne tout au long de.

La disposition générale ressemble à plusieurs feuilles de papier. Cela donne une profondeur et un ordre aux dispositions. Trois pages d’exemple sont incluses. Non seulement ces pages illustrent ce qui est possible avec ce kit, mais elles servent également de modèles où vous pouvez remplacer le texte et les images par les vôtres.

Le kit contient également un certain nombre d’éléments de base tels que des boutons, des badges, des curseurs, un menu, une pagination, des barres de navigation, des onglets et des pilules. Vous pourrez personnaliser le style, la taille et la couleur de la plupart des éléments. Les éléments JavaScript incluent les modaux, les info-bulles, le sélecteur de date-heure, les carrousels et les popovers. En plus d’utiliser le kit pour démarrer un nouveau projet, vous pouvez également reformuler n’importe quel ancien projet Bootstrap. Le kit matériel réagit Version Pro contient beaucoup plus de composants, de sections et d’exemples de pages.

Conception de fourmi pour React

Conception de fourmi pour React

Cette bibliothèque React UI est un système de conception pour les produits de niveau entreprise. C’est basé sur Conception de fourmi projet et contient un ensemble de composants et de démos de haute qualité pour créer des interfaces utilisateur riches et interactives. Les composants incluent la prise en charge de l’internationalisation pour des dizaines de langues.

Vous avez également la possibilité de personnaliser les composants selon vos propres spécifications de conception. Ant Design utilise Less.js pour son langage de style. The Ant Design Composants inclure des boutons, des icônes, des grilles, le fil d’Ariane, des menus déroulants, la pagination, etc..

Le projet compte près de 60 000 étoiles sur GitHub, il est donc extrêmement populaire auprès des développeurs.

React Admin

Bibliothèques de composants React UI: React Admin

Cette bibliothèque convient à la création d’applications d’administration interentreprises (B2B) au-dessus des API REST / GraphQL et est personnalisable par conception. Il est construit avec un certain nombre de projets bien connus en plus de React: Material UI, React Router, Redux et React Final Form. Ce dernier est une solution de gestion d’état de formulaire populaire.

En plus de la version gratuite et ses composants, il existe également une solution d’entreprise. La solution d’entreprise comprend le support professionnel de Marmelab (les créateurs) et l’accès à des modules privés.

React Admin possède environ 12 000 étoiles sur GitHub, et est activement maintenu.

Les éclats réagissent

Bibliothèques de composants React UI: fragments

Shards React est un kit d’interface utilisateur React moderne et open source qui est construit à partir de zéro et orienté vers des performances rapides. Le système de conception moderne vous permet de changer beaucoup de choses. De plus, vous pouvez également télécharger les fichiers source pour changer les choses au niveau du code. Le SCSS utilisé pour le style améliore uniquement l’expérience du développeur.

Cette bibliothèque est basée sur Fragments, et utilise React DatepickerReact Popper (un moteur de positionnement) et noUIShlider. Il prend en charge les icônes Material et Fontawesome. le Shards Pro le paquet contient 15 pages prédéfinies qui vous aident à démarrer. Utile, ces pages utilisent des blocs que vous pouvez déplacer.

Avec ~ 270 étoiles sur GitHub, il comprend également des dizaines de composants React personnalisés tels que des curseurs de plage et des entrées à bascule. Les 350+ composants vous permettent de créer presque tous les types de sites Web avec Shards React.

Material-UI

Bibliothèques de composants et cadres React UI - Material UI

Avec un énorme 55K étoiles sur GitHub, Material-UI se classe parmi les bibliothèques de composants React UI les plus populaires. Les composants reposent sur React, mais utilisent Material Design de Google. Pour ceux d’entre vous qui ont besoin d’être remplis, la conception matérielle s’inspire du monde physique et des textures tout en réduisant au minimum les éléments de l’interface utilisateur..

Un large éventail de composants utiles sont disponibles, comme les barres d’application, la saisie automatique, les badges, les boutons, les cartes, les boîtes de dialogue, les icônes, les menus, les curseurs et plus encore. Utile, Material-UI propose également des thèmes et des modèles React, afin que vous puissiez avoir un thème de couleur personnalisé pour votre application.

React Bootstrap

react-bootstrap

Le prochain sur notre liste de bibliothèques de composants React UI est React Bootstrap, un kit d’interface utilisateur qui conserve son noyau Bootstrap. Afin de vous donner plus de contrôle sur la forme et la fonction de chaque composant, il remplace JavaScript de Bootstrap par React. Chaque composant est conçu pour être facilement accessible, ce qui est important pour la construction du cadre frontal.

Et comme React Bootstrap ne s’écarte pas beaucoup de ses origines Bootstrap, les développeurs peuvent choisir parmi les milliers de thèmes Bootstrap facilement disponibles. Il a gagné plus de 14500 étoiles sur GitHub.

React Virtualized

réagir-virtualisé

Construire un frontend lourd de données? React Virtualized peut être la bibliothèque dans laquelle vous devez plonger. Il comprend de nombreux composants pour le rendu efficace de grandes listes, tableaux et grilles. Par exemple, vous trouverez de la maçonnerie, des colonnes, des calibreurs automatiques, des trieurs de direction, des défileurs de fenêtre, etc. De plus, vous pouvez personnaliser les tableaux en configurant les hauteurs de ligne et afficher des espaces réservés dans les cellules.

De plus, React Virtualized a très peu de dépendances et prend en charge les navigateurs standard, y compris les navigateurs mobiles récents pour iOS et Android. Il compte plus de 18 000 étoiles sur GitHub.

Argon Design System React

Bibliothèques de composants React UI: Argon Design System React

Cette bibliothèque propose un système de conception gratuit pour Bootstrap 4, React et Reactstrap. Il est livré avec 100 éléments modernes et magnifiques qui sont implémentés dans un code entièrement fonctionnel, vous pouvez donc passer d’une page au site Web sans effort.

Le système de conception Argon offre pages d’exemples prédéfinies et une poignée de variations pour tous les composants tels que les couleurs, les styles, le survol et la mise au point.

Jetez un œil au ensemble complet de composants, avec éléments de base, typographie, barres de navigation, alertes, images, icônes, composants Javascript, etc..

Plan

blueprintjs

Les composants React de Blueprint sont principalement destinés à être utilisés sur des applications de bureau. Ces composants sont particulièrement adaptés à la construction d’interfaces complexes et riches en données. À partir de la bibliothèque de composants, vous pouvez récupérer des bits de code pour générer et afficher des icônes, pour interagir avec les dates et les heures, pour choisir les fuseaux horaires et plus encore.

Qu’y a-t-il d’autre dans cette bibliothèque de composants? Beaucoup de choses: fil d’Ariane, boutons, légendes, cartes, séparateur, barres de navigation, onglets, balises et bien plus encore. Sur GitHub, il se situe à plus de 15 000 étoiles.

Vous pouvez également être intéressé par ces articles:

  • Modèles natifs React gratuits pour le développement d’applications
  • Meilleurs modèles de tableau de bord d’administration angulaire

Réaction de l’interface utilisateur sémantique

Bibliothèques de composants React UI: semantic-ui

L’interface utilisateur sémantique utilise un code HTML convivial pour son cadre de développement et possède des intégrations avec React, Angular, Meteor, Ember et de nombreux autres cadres. Toutes les fonctionnalités de jQuery ont été réimplémentées dans React.

Il vous permet de charger n’importe quel thème CSS Semantic UI au-dessus de votre application Semantic UI React. De plus, vous aurez également un accès complet au balisage, ce qui signifie une flexibilité dans la personnalisation des composants. C’est une étoile qui compte sur GitHub est supérieur à 11 000.

Boîte à outils React

boîte à outils react

React Toolbox est une autre bibliothèque de composants React UI que vous pouvez utiliser pour implémenter les principes de conception des matériaux de Google dans votre projet. React Toolbox s’appuie sur Modules CSS dans ce but. Bien que vous puissiez utiliser n’importe quel bundle de modules, il s’intègre parfaitement avec webpack workflow. Réfléchi, l’équipe de React Toolbox fournit aux visiteurs un éditeur dans le navigateur où vous pouvez expérimenter avec les composants en temps réel.

Lorsque vous travaillez avec React Toolbox, vous pouvez choisir d’importer des composants dans des bundles ou des composants bruts. La différence est que pour les premiers, les composants sont livrés avec toutes les dépendances et thèmes nécessaires injectés pour vous. Cela signifie que le CSS de chaque dépendance sera disponible automatiquement dans votre CSS final. Au contraire, avec les composants bruts, aucun CSS n’est inclus. Cela signifie que vous devrez fournir un thème via les propriétés au composant pour être correctement stylisé. React Toolbox est à plus de 8 000 étoiles sur GitHub.

React Desktop

Bibliothèques de composants React UI: react-desktop

Notre prochaine bibliothèque de composants, React Desktop utilise des composants macOS, Sierra et Windows 10 dans le but d’apporter une expérience de bureau native sur le Web.

Cette collection est une bibliothèque JavaScript construite sur Facebook React bibliothèque et il est compatible avec tout projet basé sur JavaScript. Cet outil franchit la cote de 8 000 étoiles sur GitHub.

Onsen UI

onsen-ui

Si vous souhaitez créer des applications mobiles multiplates-formes, cette offre vous intéressera dans notre liste de bibliothèques de composants React UI. Onsen UI est un cadre de développement d’applications mobiles qui utilise HTML5 et JavaScript et offre une intégration avec Angular, Vue.js et React. Tous les composants sont de style automatique basés sur la plate-forme, et donc il prend en charge iOS et Android en utilisant le même code source.

L’interface Onsen est compatible avec de nombreux frameworks React populaires. Un didacticiel interactif vous aide à bien démarrer avec cet outil. La bibliothèque de composants utilise du CSS pur sans comportement JavaScript. Pour certains détails supplémentaires, des éléments personnalisés aident. Les étoiles comptent sur GitHub dépasse 7 800.

À feuilles persistantes

Bibliothèques de composants React UI: evergreen

Evergreen contient un ensemble de composants React adaptés aux applications Web d’entreprise. Puisqu’il utilise React Primitive, c’est très flexible. En même temps, il fonctionne tout aussi facilement dès la sortie de la boîte.

Il comprend une large gamme de composants et d’outils, depuis les mises en page de base, la typographie, les couleurs et les icônes jusqu’aux composants basés sur les fonctions tels que les listes déroulantes, les bascules, les téléchargements de fichiers et les indicateurs de rétroaction. Après avoir installé le package Evergreen, vous pouvez choisir les composants que vous souhaitez importer. Il compte actuellement plus de 9 000 étoiles sur GitHub.

Reactstrap

réagir

Pour les composants React Bootstrap 4 simples, consultez Reactstrap. Il est livré avec deux versions de distribution principales. Premièrement, une version de base qui exclut les dépendances facultatives. Cela vous donne plus de flexibilité dans la configuration des dépendances requises.

La deuxième version est la version complète qui inclut toutes les dépendances facultatives. Celui-ci est recommandé pour les petites applications. Reactstrap est une autre collection de la bibliothèque de composants React UI qui franchit la barre des 8700 étoiles sur GitHub.

Rebass

Bibliothèques de composants React UI: rebass

Rebass ne contient que huit composants fondamentaux, tous dans un très petit fichier. Les composants sont extensibles et thématiques, et conçus pour une conception Web réactive.

Les composants utilisent un système de style et constituent un excellent point de départ pour s’étendre à des composants d’interface utilisateur personnalisés pour votre application. Le ThemeProvider peut également vous aider. Les étoiles comptent sur GitHub plus de 6 000.

Oeillet

oeillet

Grommet a une large bibliothèque de composants dans son kit et compte parmi ses utilisateurs de grands noms comme Netflix et Boeing. Que votre application soit destinée aux téléphones ou aux écrans plus larges, vous pourrez concevoir des mises en page. L’accessibilité se fait via un clavier ou un lecteur d’écran.

Les outils de thématique aident à la personnalisation de la couleur, du type et de la mise en page. Cette bibliothèque de composants React UI a un nombre d’étoiles supérieur à 6 000 sur GitHub.

UI élémentaire

Bibliothèques de composants React UI: elemental-ui

L’interface utilisateur élémentaire fournit un certain nombre de composants fonctionnels de base pour une utilisation autonome ou dans n’importe quelle combinaison, que ce soit dans le style par défaut ou après le thème. Certains des composants comprennent des formulaires, des boutons, des cartes et des modaux.

Le projet est en cours de développement, mais gère un compte de plus de 4000 étoiles sur GitHub.

React Suite

rsuite

React Suite contient une gamme de bibliothèques de composants pour les produits de système d’entreprise. Il prend en charge tous les principaux navigateurs et plates-formes ainsi que le rendu côté serveur.

Si vous êtes chez vous avec moins de développement, la personnalisation des composants ne devrait pas poser de problème. Les composants de cette bibliothèque comprennent des icônes, des chargeurs, des diviseurs, des info-bulles et plus encore, et React Suite a près de 4000 étoiles sur GitHub.

Belle

belle

Parmi les bibliothèques de composants React UI les plus intéressantes, Belle propose une gamme vraiment large de composants. Vous pouvez personnaliser ces composants à deux niveaux – le niveau de base pour tous les composants collectivement, ainsi que chaque composant individuellement.

Les composants sont livrés avec un support pour les mobiles et un support ARIA. Pour utiliser Belle, vous devez d’abord configurer une application simple avec React, puis importer n’importe quel composant Belle et commencer à l’utiliser immédiatement. Cette bibliothèque de composants compte plus de 2 400 étoiles sur GitHub.

react-md

react-md

React-md est une autre bibliothèque de composants React UI à prendre en compte si vous souhaitez implémenter la conception de matériaux dans votre projet. Il vous offre un choix de composants React compatibles avec Sass. À cette fin, il existe une séparation des styles dans Sass au lieu du style en ligne. Cela vous permet de personnaliser plus facilement les composants en fonction des styles existants.

Les couleurs et la typographie peuvent être personnalisées et la documentation détaillée vous aidera à dépasser les bases. Sur GitHub, react-md compte plus de 2000 étoiles.

PrimeReact

amorce

Cette liste de bibliothèques de composants React UI ne serait pas complète sans PrimeReact. Il fournit des composants pour couvrir presque toutes les exigences d’interface de base telles que les options d’entrée, les menus, la présentation des données, les messages et plus.

Il prête également attention à l’expérience mobile, avec des éléments de conception réactifs optimisés pour le toucher. Il existe un certain nombre de modèles et de thèmes qui vous permettent de personnaliser et de choisir entre la conception plate et matérielle. Cette bibliothèque de composants compte plus de 1 200 étoiles sur GitHub.

KendoReact

kendoreact

Contrairement aux bibliothèques de composants React UI précédentes, KendoReact est un ensemble de composants premium, avec des licences à partir de 799 $. Il possède une liste de clients impressionnante qui comprend Microsoft, la NASA et Sony. Et vous pouvez également l’utiliser pour créer des applications rapides et riches en fonctionnalités avec une interface utilisateur impressionnante.

L’ensemble de composants est conçu spécifiquement pour le développement de React. Cela garantit zéro dépendances et tous les composants sont entièrement optimisés pour React. De plus, si vous avez une bibliothèque de composants existante, vous pouvez simplement l’ajouter à partir de KendoReact sans avoir à réécrire toute la bibliothèque.

Eh bien, c’est notre liste des meilleures bibliothèques de composants React UI. Est votre bibliothèque préférée ici?

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

* Cet article contient des liens d’affiliation, ce qui signifie que si vous cliquez sur l’un des liens vers les produits, puis achetez le produit, nous recevrons une somme modique. Pas de soucis cependant, vous paierez toujours le montant standard donc il n’y a pas de frais de votre part.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map