20+ Best React UI-Komponentenbibliotheken / Frameworks für 2020

Best React UI-Komponentenbibliotheken / Frameworks


In dieser Ressource werden die besten im Web verfügbaren React UI-Komponentenbibliotheken und -Frameworks vorgestellt. Aber zuerst:

Was ist reagieren??

React ist eine Open-Source-JavaScript-Bibliothek, mit der Sie eine Top-Oberfläche sowohl für das Web als auch für mobile Apps erstellen können. Es lässt sich bequem mit anderen JavaScript-Frameworks und -Bibliotheken kombinieren und enthält winzige, eigenständige Codebits, die als Komponenten bezeichnet werden. Es sind diese Komponenten, die in dieser Ressource im Rampenlicht stehen werden.

Das Schöne an Komponenten ist, dass sie modular sind und keine großen app-spezifischen Abhängigkeiten aufweisen. Dies bedeutet, dass Sie die Komponenten wiederverwenden können, um superschnell fantastische Apps und Schnittstellen zu erstellen. Und danke an Bisschen, Sie können sie auch mit anderen React-Enthusiasten teilen.

Bevor Sie Ihr nächstes Projekt mit React starten, nehmen Sie sich ein paar Minuten Zeit, um diese Liste der besten React UI-Komponentenbibliotheken zu scannen, mit denen Sie eine fantastisch aussehende Benutzeroberfläche erstellen können.

Best React UI-Komponentenbibliotheken und Frameworks im Jahr 2020

Material Kit Reagieren

React UI-Komponentenbibliotheken: Material Kit React

Material Kit React wurde von Googles Material Design inspiriert und erstellt eine Reihe von Elementen, bei denen Konsistenz das Hauptmerkmal ist. Auf diese Weise behält Ihr Webprojekt eine Ähnlichkeit in Aussehen und Funktionen.

Das allgemeine Layout ähnelt mehreren Blatt Papier. Dies verleiht den Layouts Tiefe und Ordnung. Drei Beispielseiten sind enthalten. Diese Seiten veranschaulichen nicht nur, was mit diesem Kit möglich ist, sondern dienen auch als Vorlagen, in denen Sie Text und Bilder durch Ihre eigenen ersetzen können.

Das Kit enthält auch eine Reihe grundlegender Elemente wie Schaltflächen, Abzeichen, Schieberegler, Menü, Paginierung, Navigationsleisten, Registerkarten und Pillen. Sie können Stil, Größe und Farbe für die meisten Elemente anpassen. Zu den JavaScript-Elementen gehören Modals, QuickInfos, Datums- und Uhrzeitauswahl, Karussells und Popovers. Neben der Verwendung des Kits zum Starten eines neuen Projekts können Sie auch jedes alte Bootstrap-Projekt neu formatieren. Das Material Kit Reagieren Pro-Version enthält viel mehr Komponenten, Abschnitte und Beispielseiten.

Ant Design for React

Ant Design for React

Diese React UI-Bibliothek ist ein Designsystem für Produkte auf Unternehmensebene. Es basiert auf dem Ameisendesign Projekt und enthält eine Reihe hochwertiger Komponenten und Demos zum Erstellen umfangreicher, interaktiver Benutzeroberflächen. Zu den Komponenten gehört die Unterstützung der Internationalisierung für Dutzende von Sprachen.

Sie haben auch die Möglichkeit dazu Passen Sie die Komponenten an nach Ihren eigenen Designspezifikationen. Ant Design verwendet Less.js für seine Stilsprache. Das Ameisendesign Komponenten Dazu gehören Schaltflächen, Symbole, Raster, Breadcrumb, Dropdown-Menüs, Paginierung und mehr.

Das Projekt hat fast 60.000 Sterne auf GitHub, Daher ist es bei Entwicklern sehr beliebt.

Reagiere Admin

React UI-Komponentenbibliotheken: React Admin

Diese Bibliothek eignet sich zum Erstellen von B2B-Verwaltungsanwendungen (Business-to-Business) auf REST / GraphQL-APIs und kann vom Design her angepasst werden. Es wurde mit einer Reihe bekannter Projekte zusätzlich zu React: Material UI, React Router, Redux und React Final Form erstellt. Letzteres ist eine beliebte Lösung zur Verwaltung von Formularzuständen.

Neben der kostenlosen Version und seine Komponenten, Es gibt auch eine Unternehmenslösung. Die Unternehmenslösung umfasst professionellen Support von Marmelab (den Entwicklern) und Zugriff auf private Module.

React Admin verfügt über ca. 12.000 Sterne auf GitHub, und wird aktiv gepflegt.

Scherben reagieren

Reagieren Sie auf UI-Komponentenbibliotheken: Shards

Shards React ist ein modernes Open Source-React-UI-Kit, das von Grund auf neu entwickelt wurde und auf schnelle Leistung ausgerichtet ist. Mit dem modernen Designsystem können Sie viele Dinge ändern. Darüber hinaus können Sie die Quelldateien herunterladen, um Änderungen auch auf Codeebene vorzunehmen. Das für das Styling verwendete SCSS verbessert nur die Entwicklererfahrung.

Diese Bibliothek basiert auf Scherben, und verwendet Reagiere auf DatepickerReagiere auf Popper (ein Positionierungsmotor) und noUIShlider. Es unterstützt Material- und Fontawesome-Symbole. Das Shards Pro Das Paket enthält 15 vorgefertigte Seiten, die Ihnen den Einstieg erleichtern. Hilfreicherweise verwenden diese Seiten Blöcke, die Sie verschieben können.

Mit ~ 270 Sternen GitHub, Es enthält auch Dutzende von benutzerdefinierten React-Komponenten wie Bereichsregler und Umschalteingaben. Die über 350 Komponenten stellen sicher, dass Sie mit Shards React nahezu jede Art von Website erstellen können.

Material-UI

React UI Component Libraries und Frameworks - Material UI

Mit satten 55K Sternen GitHub, Material-UI gehört zu den beliebtesten React UI-Komponentenbibliotheken. Die Komponenten basieren auf React, verwenden jedoch das Material Design von Google. Für diejenigen unter Ihnen, die etwas ausfüllen müssen, lässt sich das Materialdesign von der physischen Welt und den Texturen inspirieren, während die tatsächlichen Elemente der Benutzeroberfläche auf ein Minimum beschränkt bleiben.

Es stehen zahlreiche hilfreiche Komponenten zur Verfügung, z. B. App-Leisten, automatische Vervollständigung, Abzeichen, Schaltflächen, Karten, Dialogfelder, Symbole, Menüs, Schieberegler und mehr. Hilfreicherweise bietet Material-UI auch React-Themen und -Vorlagen, sodass Sie ein benutzerdefiniertes Farbthema für Ihre App erstellen können.

Reagiere auf Bootstrap

React-Bootstrap

Als nächstes steht auf unserer Liste der React UI-Komponentenbibliotheken React Bootstrap, ein UI-Kit, das den Bootstrap-Kern beibehält. Um Ihnen mehr Kontrolle über Form und Funktion jeder Komponente zu geben, wird das JavaScript von Bootstrap durch React ersetzt. Jede Komponente ist so aufgebaut, dass sie leicht zugänglich ist, was für die Erstellung von Front-End-Frameworks wichtig ist.

Und da React Bootstrap nicht wesentlich von seinen Bootstrap-Ursprüngen abweicht, können Entwickler aus den Tausenden von verfügbaren Bootstrap-Themen auswählen. Es hat mehr als 14500 Sterne verdient GitHub.

Virtualisiert reagieren

reaktionsvirtualisiert

Erstellen Sie ein datenintensives Frontend? React Virtualized ist möglicherweise die Bibliothek, in die Sie eintauchen müssen. Es enthält zahlreiche Komponenten zum effizienten Rendern großer Listen, Tabellen und Raster. Sie finden beispielsweise Mauerwerk, Säulen, Autosizer, Richtungssortierer, Fenster-Scroller und mehr. Außerdem können Sie die Tabellen anpassen, indem Sie die Zeilenhöhen konfigurieren und Platzhalter in den Zellen anzeigen.

Außerdem weist React Virtualized nur sehr wenige Abhängigkeiten auf und unterstützt Standardbrowser, einschließlich aktueller mobiler Browser für iOS und Android. Es hat mehr als 18.000 Sterne GitHub.

Argon Design System reagieren

React UI-Komponentenbibliotheken: Argon Design System React

Diese Bibliothek bietet ein kostenloses Design-System für Bootstrap 4, React und Reactstrap. Es enthält 100 moderne und wunderschöne Elemente, die in einem voll funktionsfähigen Code implementiert sind, sodass Sie mühelos von einer Seite zur eigentlichen Website wechseln können.

Das Argon Design System bietet vorgefertigte Beispielseiten und eine Handvoll Variationen für alle Komponenten wie Farben, Stile, Schwebeflug und Fokus.

Werfen Sie einen kurzen Blick auf die ganzer Satz von Komponenten, mit grundlegenden Elementen, Typografie, Navigationsleisten, Warnungen, Bildern, Symbolen, Javascript-Komponenten und mehr.

Entwurf

Blaupause

Die React-Komponenten in Blueprint sind hauptsächlich für die Verwendung in Desktop-Anwendungen vorgesehen. Diese Komponenten eignen sich besonders zum Aufbau komplexer und datenreicher Schnittstellen. In der Komponentenbibliothek können Sie Codebits zum Generieren und Anzeigen von Symbolen, zur Interaktion mit Datum und Uhrzeit, zum Auswählen von Zeitzonen und mehr abrufen.

Was befindet sich noch in dieser Komponentenbibliothek? Wirklich viel – Brotkrumen, Knöpfe, Beschriftungen, Karten, Teiler, Navigationsleisten, Registerkarten, Tags und vieles mehr. Auf GitHub, es erreicht mehr als 15.000 Sterne.

Diese Artikel könnten Sie auch interessieren:

  • Reagieren Sie native Vorlagen für die App-Entwicklung
  • Beste Angular Admin Dashboard-Vorlagen

Semantische UI-Reaktion

Reagieren Sie auf UI-Komponentenbibliotheken: semantic-ui

Die semantische Benutzeroberfläche verwendet für das Entwicklungsframework benutzerfreundliches HTML und ist in React, Angular, Meteor, Ember und viele andere Frameworks integriert. Alle jQuery-Funktionen wurden in React neu implementiert.

Sie können jedes CSS-Thema für die semantische Benutzeroberfläche über Ihre Semantic UI React-App laden. Darüber hinaus haben Sie vollständigen Zugriff auf das Markup, was bedeutet, dass Sie die Komponenten flexibel anpassen können. Es ist die Anzahl der Sterne GitHub ist über 11.000.

Reagieren Sie auf die Toolbox

React-Toolbox

Eine weitere React UI-Komponentenbibliothek, mit der Sie die Materialdesignprinzipien von Google in Ihrem Projekt implementieren können, ist React Toolbox. React Toolbox verlässt sich auf CSS-Module für diesen Zweck. Obwohl Sie jeden Modulbündler verwenden können, lässt er sich problemlos in diesen integrieren Webpack Arbeitsablauf. Das Team von React Toolbox bietet Besuchern einen In-Browser-Editor, mit dem Sie in Echtzeit mit den Komponenten experimentieren können.

Während der Arbeit mit React Toolbox können Sie Komponenten in Bundles oder Rohkomponenten importieren. Der Unterschied besteht darin, dass für die ersteren die Komponenten mit allen erforderlichen Abhängigkeiten und Themen geliefert werden, die für Sie eingefügt wurden. Dies bedeutet, dass das CSS für jede Abhängigkeit automatisch in Ihrem endgültigen CSS verfügbar ist. Im Gegenteil, bei Rohkomponenten ist kein CSS enthalten. Dies bedeutet, dass Sie der Komponente ein Thema über Eigenschaften bereitstellen müssen, um sie richtig zu gestalten. Die React Toolbox hat mehr als 8.000 Sterne GitHub.

Desktop reagieren

React UI-Komponentenbibliotheken: React-Desktop

Unsere nächste Komponentenbibliothek, React Desktop, verwendet MacOS-, Sierra- und Windows 10-Komponenten mit dem Ziel, eine native Desktop-Erfahrung ins Web zu bringen.

Diese Sammlung ist eine JavaScript-Bibliothek, die darauf aufbaut Facebooks Reaktion Bibliothek und ist mit jedem JavaScript-basierten Projekt kompatibel. Dieses Tool überschreitet die 8.000-Sterne-Bewertung auf GitHub.

Onsen UI

onsen-ui

Wenn Sie plattformübergreifende mobile Apps erstellen möchten, interessiert Sie dieses Angebot in unserer Liste der React UI-Komponentenbibliotheken. Onsen UI ist ein Framework für die Entwicklung mobiler Apps, das HTML5 und JavaScript verwendet und die Integration mit Angular, Vue.js und React ermöglicht. Alle Komponenten werden basierend auf der Plattform automatisch gestaltet und unterstützen daher sowohl iOS als auch Android mit demselben Quellcode.

Die Onsen-Benutzeroberfläche ist mit vielen gängigen React-Frameworks kompatibel. Ein interaktives Tutorial hilft Ihnen dabei, einen guten Einstieg in dieses Tool zu finden. Die Komponentenbibliothek verwendet reines CSS ohne JavaScript-Verhalten. Für einige zusätzliche Details helfen benutzerdefinierte Elemente. Der Stern zählt weiter GitHub übersteigt 7.800.

Immergrün

Reagieren Sie auf UI-Komponentenbibliotheken: immergrün

Evergreen enthält eine Reihe von React-Komponenten, die für Webanwendungen für Unternehmen geeignet sind. Da nutzt es Reaktiv primitiv, Es ist sehr flexibel. Gleichzeitig funktioniert es sofort.

Es umfasst eine breite Palette von Komponenten und Werkzeugen, angefangen von grundlegenden Layouts, Typografien, Farben und Symbolen bis hin zu funktionsbasierten Komponenten wie Dropdowns, Umschaltern, Datei-Uploads und Feedback-Indikatoren. Nach der Installation des Evergreen-Pakets können Sie die Komponenten auswählen, die Sie importieren möchten. Es hat derzeit mehr als 9.000 Sterne GitHub.

Reactstrap

Reactstrap

Informationen zu einfachen React Bootstrap 4-Komponenten finden Sie unter Reactstrap. Es kommt mit zwei primären Distributionsversionen. Erstens eine Basisversion, die optionale Abhängigkeiten ausschließt. Dies gibt Ihnen mehr Flexibilität bei der Konfiguration der erforderlichen Abhängigkeiten.

Die zweite Version ist die Vollversion, die alle optionalen Abhängigkeiten enthält. Dieser wird für kleinere Anwendungen empfohlen. Reactstrap ist eine weitere Sammlung in der Komponentenbibliothek von React UI, die die 8.700-Sterne-Marke überschreitet GitHub.

Rebass

Reagieren Sie auf UI-Komponentenbibliotheken: Rebass

Rebass enthält nur acht grundlegende Komponenten, alle in einer superkleinen Datei. Die Komponenten sind erweiterbar und themenfähig und für reaktionsschnelles Webdesign konzipiert.

Die Komponenten verwenden das Styled-System und dienen als Ausgangspunkt für die Erweiterung auf benutzerdefinierte UI-Komponenten für Ihre App. Der ThemeProvider kann Ihnen auch dabei helfen. Der Stern zählt weiter GitHub ist über 6.000.

Tülle

Tülle

Grommet hat eine große Bibliothek an Komponenten in seinem Kit und zählt große Namen wie Netflix und Boeing zu seinen Benutzern. Unabhängig davon, ob Ihre App für Telefone oder für breitere Bildschirmanzeigen geeignet ist, können Sie Layouts entwerfen. Die Erreichbarkeit erfolgt über Tastatur oder Bildschirmleser.

Theming-Tools helfen bei der Anpassung von Farbe, Typ und Layout. Diese Komponentenbibliothek von React UI hat eine Sternzahl von mehr als 6.000 GitHub.

Elementare Benutzeroberfläche

Reagieren Sie auf UI-Komponentenbibliotheken: elemental-ui

Die elementare Benutzeroberfläche bietet eine Reihe grundlegender Funktionskomponenten für die eigenständige Verwendung oder in einer beliebigen Kombination, ob im Standardstil oder nach dem Theming. Einige der Komponenten umfassen Formulare, Schaltflächen, Karten und Modalitäten.

Das Projekt befindet sich in der Entwicklung, verwaltet jedoch mehr als 4.000 Sterne GitHub.

React Suite

rsuite

React Suite enthält eine Reihe von Komponentenbibliotheken für Unternehmenssystemprodukte. Es unterstützt alle gängigen Browser und Plattformen sowie das serverseitige Rendern.

Wenn Sie mit weniger Entwicklung zu Hause sind, sollte das Anpassen der Komponenten kein Problem darstellen. Zu den Komponenten in dieser Bibliothek gehören Symbole, Lader, Teiler, QuickInfos und mehr. Die React Suite verfügt über fast 4.000 Sterne GitHub.

Belle

Belle

Unter den interessantesten React UI-Komponentenbibliotheken bietet Belle eine wirklich breite Palette an Komponenten. Sie können diese Komponenten auf zwei Ebenen anpassen – der Basisebene für alle Komponenten zusammen sowie für jede Komponente einzeln.

Die Komponenten werden mit Unterstützung für Mobiltelefone und ARIA-Unterstützung geliefert. Um Belle zu verwenden, müssen Sie zunächst eine einfache App mit React einrichten, dann eine Belle-Komponente importieren und sofort mit der Verwendung beginnen. Diese Komponentenbibliothek hat mehr als 2.400 Sterne GitHub.

reagieren-md

reagieren-md

Eine weitere React UI-Komponentenbibliothek, die Sie berücksichtigen sollten, wenn Sie das Materialdesign in Ihrem Projekt implementieren möchten, ist react-md. Sie haben die Wahl zwischen React-Komponenten, die mit Sass zusammenarbeiten. Zu diesem Zweck gibt es in Sass eine Trennung der Stile anstelle des Inline-Stils. Dies erleichtert Ihnen das Anpassen von Komponenten an vorhandene Stile.

Farben und Typografie können angepasst werden und die detaillierte Dokumentation hilft Ihnen dabei, die Grundlagen zu überwinden. Auf GitHub, React-MD zählt mehr als 2.000 Sterne.

PrimeReact

primereact

Diese Liste der React UI-Komponentenbibliotheken wäre ohne PrimeReact nicht vollständig. Es bietet Komponenten für nahezu alle grundlegenden Schnittstellenanforderungen wie Eingabeoptionen, Menüs, Datenpräsentation, Nachrichten und mehr.

Mit berührungsoptimierten reaktionsschnellen Designelementen wird auch das mobile Erlebnis berücksichtigt. Es gibt eine Reihe von Vorlagen und Themen, mit denen Sie zwischen Flach- und Materialdesign anpassen und wählen können. Diese Komponentenbibliothek hat mehr als 1.200 Sterne GitHub.

KendoReact

kendoreact

Im Gegensatz zu den oben genannten Komponentenbibliotheken von React UI handelt es sich bei KendoReact um einen Premium-Komponentensatz mit Lizenzen ab 799 US-Dollar. Es verfügt über eine beeindruckende Kundenliste, zu der Microsoft, die NASA und Sony gehören. Und auch Sie können damit schnelle und funktionsreiche Apps mit einer beeindruckenden Benutzeroberfläche erstellen.

Der Komponentensatz wurde speziell für die React-Entwicklung entwickelt. Dies stellt sicher, dass keine Abhängigkeiten vorhanden sind und alle Komponenten vollständig für React optimiert sind. Wenn Sie über eine vorhandene Komponentenbibliothek verfügen, können Sie diese einfach über KendoReact hinzufügen, ohne die gesamte Bibliothek neu schreiben zu müssen.

Nun, das ist unsere Liste der besten React UI-Komponentenbibliotheken. Ist deine Lieblingsbibliothek hier?

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

* Dieser Beitrag enthält Affiliate-Links. Wenn Sie also auf einen der Produktlinks klicken und dann das Produkt kaufen, erhalten wir eine geringe Gebühr. Keine Sorge, Sie zahlen trotzdem den Standardbetrag, sodass Sie keine Kosten haben.

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