Welche UI-Komponentenbibliothek verwendet React?

Die verfügbaren UI-Komponentenbibliotheken für React sind: 1. Material-UI, das Komponenten für Layout, Formulare, Navigation, Datenanzeige und viele andere Widgets enthält; 2. Ant Design, das mehr als 60 Komponenten mit vorhersehbarem statischen Typ enthält; 3. Blueprint mit mehr als 40 Komponenten; 4. React Bootstrap, das vollständige Kompatibilität mit einer großen Anzahl vorhandener Bootstrap-Themen bietet. 5. Onsen-Benutzeroberfläche mit Registerkarten, Seitenmenüs, Stapelnavigation, Listen, Formularen usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, React18-Version, Dell G3-Computer.

React-Komponentenbibliothek

1, Material-UI

Material-UI ist die beliebteste und am häufigsten verwendete React-Komponentenbibliothek auf GitHub. Es ist einfach, leichtgewichtig und gemäß den Material-UI-Spezifikationen von Google erstellt. Es gibt Komponenten für Layout, Formulare, Navigation, Datenanzeige und viele andere Widgets.

Sie können Ihre Komponenten mit @material-ui/styles gestalten, einer schnellen, skalierbaren CSS-in-JS-Lösung mit den gleichen Vorteilen wie gestaltete Komponenten. Material-UI interagiert auch mit anderen wichtigen Styling-Lösungen, sodass Sie dessen Stile nicht verwenden müssen.

2. Ant Design

Ant Design ist ein chinesisches Unternehmen mit einer React-Bibliothek, die für Webanwendungen großer Unternehmen konzipiert ist. Beispiele hierfür sind Tencent, Alibaba und Baidu. Diese Bibliothek enthält über 60 in TypeScript geschriebene Komponenten mit vorhersehbarer statischer Typisierung. Die chinesischen und englischen Dokumente sind prägnant, elegant geschrieben und inhaltlich umfassend.

Aber Ant Design ist mehr als nur eine React UI-Bibliothek. Es handelt sich um ein komplettes Designsystem, das auf den Werten Wachstum, Bedeutung, Gewissheit und Natur basiert. Schauen Sie sich ihre Ressourcen für ein Figma-UI-Kit, Landingpage-Vorlagen, ein Sketch-Plugin und mehr an, und es ist unsere Go-to-React-Komponentenbibliothek.

3. Blueprint

Als häufig verwendete React-Komponentenbibliothek bietet Blueprint umfangreiche und beliebte Komponenten. Blueprint ist eine React-UI-Bibliothek, die von Palantir, einem amerikanischen Unternehmen für Big-Data-Analysetechnologie, entwickelt wurde. Ihre React-Bibliothek umfasst über 40 Komponenten, die speziell für komplexe datenintensive Schnittstellen für Desktop-Anwendungen optimiert sind.

Blueprint ist in TypeScript geschrieben, ebenso wie alle Codebeispiele in ihrer Dokumentation. Die Bibliothek unterstützt Chrome, Firefox, Safari, IE 11 und Microsoft Edge. IE10 und niedriger werden aufgrund fehlender Unterstützung für CSS-Flex-Layout nicht unterstützt.

4. React Bootstrap

React Bootstrap als Ersatz für Bootstrap JavaScript. Jede Komponente ist als echte React-Komponente erstellt, sodass Sie sich nicht auf jQuery verlassen müssen. React Bootstrap ist eine der ältesten React-Bibliotheken und ist mit React selbst stetig gewachsen. Da es eine große Anzahl alter Benutzer gibt, die Bootstrap verwenden, ist React Bootstrap auch eine häufiger verwendete React-Komponentenbibliothek.

Das Rastersystem von Bootstrap bedeutet, dass Ihr Layout über eine vollständig responsive Reihe von Containern, Zeilen und Spalten verfügt. Sie können zwischen Dutzenden Komponenten wählen, darunter Abzeichen, Karussells, Toasts und Jumbotrons.

Es bietet volle Kompatibilität mit einer großen Anzahl bereits vorhandener Bootstrap-Themen sowie eine lange Liste von Komponenten mit umfassender Leistung für jedes Thema. React Bootstrap aktualisiert den Status in einem virtuellen DOM. Dies stellt eine stabilere Entwicklungslösung dar, indem die Funktionalität von Bootstrap in das virtuelle DOM von React integriert wird.

5, Onsen UI

Onsen UI ist eine häufig verwendete Reac-Komponentenbibliothek, die zum Erstellen von HTML5- und mobilen Webanwendungen entwickelt wurde. Zu seinen Komponenten gehören Registerkarten, Seitenmenüs, Stapelnavigation, Listen, Formulare und mehr. Alle Komponenten unterstützen iOS- und Android-Materialdesign und ändern automatisch das Erscheinungsbild Ihrer App basierend auf der Plattform.

Unter der Haube besteht Onsen aus drei Schichten: in cssnext geschriebene CSS-Komponenten, in nativem JavaScript geschriebene Webkomponenten, Framework-Bindungen für die einfache Integration mit React sowie Vue und Angular.

6. Grommet

Grommet ist eine Komponentenbibliothek, die für responsive, barrierefreie und mobil ausgerichtete Webprojekte entwickelt wurde. Es umfasst atomare Designmethoden und ermöglicht Tastaturnavigation, Screenreader-Registerkarten und mehr. Es gibt sogar eine Liste mit SVG-Symbolen.

Viele große Unternehmen, darunter Netflix, Uber, Boeing, HP, Samsung und Twilio, verwenden Grommet zum Entwerfen ihrer Webanwendungen. Wenn Sie möchten, dass sich Ihr Design weniger „googly“ anfühlt, werfen Sie einen Blick auf die Komponenten von Grommet. Es handelt sich um eine hervorragende und häufig verwendete React-Komponentenbibliothek mit sehr gut aussehenden Komponenten.

7、Gestalt

Gestalt ist eine Reihe von React-UI-Komponenten, die die Designsprache von Pinterest verbessern. Sein Zweck besteht darin, eine gemeinsame Bibliothek mit Best Practices für das Design zu erstellen. Die Bibliothek unterstützt Rechts-nach-Links-, Internationalisierungs- und Dunkelmodus.

Gestalt ist aufgrund seines automatischen Designs und der Code-Updates, die plattformübergreifend ausgeführt werden, relativ wartungsarm. Wenn eine Version zu wichtigen Änderungen führt – bei der Nutzung oder Eingabe – stellt sie einen Codemod bereit, um den Upgrade-Prozess zu vereinfachen.

8. Semantic UI React

React ist das offizielle Semantic UI-Plug-in. Es ist jQuery-unabhängig und verfügt über eine deklarative API, vereinfachte Requisiten, Unterkomponenten, Erweiterungen, automatische Statuskontrolle und mehr. Die Bibliothek verfügt über eine Sammlung von über 50 Komponenten, darunter Fragmente, Fortschrittsbalken, Übergänge, Paginierung und mehr.

Semantic UI React stellt Komponenten bereit, während Semantic UI Themen in Form von CSS-Stylesheets bereitstellt. Sie können auch verwenden. Ich bevorzuge Semantic UI und habe auch einige Erfahrung damit als Eine relativ häufig verwendete React-Komponentenbibliothek.

9, Rebass

Rebass ist eine Originalkomponentenbibliothek und eine häufig verwendete React-Komponentenbibliothek, die mit einem Stilsystem von Brent Jackson erstellt wurde. Es wurde entwickelt, um eine konsistente Benutzeroberfläche mit Designbeschränkungen und benutzerdefinierter Skalierung zu erstellen. Der Footprint von Rebass beträgt nur 4 KB, was schnelles Design und Entwicklung bedeutet.

Rebass hofft, ein minimales, nützliches, uneingeschränktes, erweiterbares und thematisch anpassbares Design mit erstklassiger Theming-Unterstützung und Kompatibilität mit der Theme-Benutzeroberfläche zu erreichen.

10, React Virtualized

React Virtualized konzentriert sich auf bestimmte Aspekte jeder Benutzeroberfläche in einer einzigartigen React-Komponentenbibliothek, was das Rendern von Tabellen in den meisten Fällen ziemlich einfach macht. Mit React Virtualized können Webentwickler problemlos große Datenmengen rendern, indem sie Komponenten wie Listen, Tabellen, Raster, Sammlungen usw. verwenden. Damit können benutzerfreundlichere Tabellen erstellt werden. React Virtualized verfügt bereits über eine vollständige Anleitungsfolge zum Einrichten.

11, Blueprint UI React

Das Blueprint UI React-Komponenten-Framework ist der gleiche UI-Entwicklungspfad für alle neuen datenintensiven Desktop- und Webanwendungen. Es handelt sich um ein React-basiertes UI-Toolkit, das für die Erstellung komplexer datenintensiver Schnittstellen für Desktop-Anwendungen entwickelt wurde. Dies ist ein großartiges UI-Paket, das darauf abzielt, sofort einsatzbereite Benutzerfreundlichkeitsstandards für alle Komponenten bereitzustellen und Ihnen Zugriff auf helle und dunkle Designmodi zu ermöglichen.

12. React Toolbox

React Toolbox ist eine Reihe von React-Komponenten, die die Anforderungen von Google Material Design umsetzen. Es basiert auf einigen der gängigsten Vorschläge wie CSS-Modulen (geschrieben in SASS), Webpack und ES6. Die Bibliothek ist eng in Ihren Webpaket-Workflow integriert, vollständig konfigurierbar und vielseitig.

Es bietet viele Komponenten wie Schaltflächen, Karten, Datumsauswahl, Dialoge und andere gemeinsame Elemente. Die Bibliothek ermöglicht es Webentwicklern, beeindruckende Webanwendungen zu erstellen und enthält außerdem eine umfassende Dokumentation.

【Verwandte Empfehlung: Redis-Video-Tutorial】

Das obige ist der detaillierte Inhalt vonWelche UI-Komponentenbibliothek verwendet React?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!