React verfügt über eine Komponentenbibliothek. Die Komponentenbibliothek ist ein Entwurfsplan, der Komponenten zum Aufbau durch mehrdimensionale Kombinationen organisiert; Der Zweck besteht darin, standardisierte Komponentenbibliotheken für React zu bilden, darunter Bulma, AntDesign, Bootstrap usw.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.
Das Komponentendesign besteht darin, Elemente in Funktionen und visuelle Ausdrücke zu zerlegen, zusammenzufassen und neu zu organisieren und standardisierte Komponenten basierend auf dem Zweck der Wiederverwendung zu bilden. Der gesamte Entwurfsplan wird durch mehrdimensionale Kombination erstellt und diese Komponenten werden in einer Komponentenbibliothek organisiert entsteht.
Häufig verwendete Reaktionskomponentenbibliotheken:
Ameisen-Design
Projektlink: Ant Design
Bundle-Größe (von BundlePhobia): 1,2 MB nach der Minimierung, 349,2 KB nach der Minimierung + GZIP-Komprimierung, Größe durch Tree Shaking reduzieren.
Vorteil:
AntDesign verfügt über eine umfangreiche Support-Dokumentation und eine Community, einschließlich eines separaten Projekts (AntDesignPro) mit vorgefertigten Vorlagen.
UI-Bibliothek, die zum schnellen Entwerfen von Backend-/internen Anwendungen verwendet werden kann.
Mangel:
mangelnde Zugänglichkeit;
Es ist groß und wird voraussichtlich einen großen Einfluss auf die Leistung haben;
Verschmutzen Sie Ihr CSS (erwarten Sie, dass Sie !important hinzufügen, um zu verhindern, dass Ihre Nicht-Ant-Komponenten formatiert werden).
Bootstrap
Tatsächlich stelle ich mir Bootstrap hauptsächlich als eine UI-Bibliothek vor. Sie werden damit keine Designpreise gewinnen, aber Sie können damit einige Edge-Projekte und Minimum Viable-Produkte fertigstellen.
Aber es kommt darauf an, wofür Sie es verwenden möchten. Wenn Sie neu bei React sind, ist es eine großartige Bibliothek für den Einstieg. Erfahrenere Entwickler könnten sich mit styled-components/Emotion befassen.
Es gibt zwei beliebte Bibliotheken mit React-Bindungen für Bootstrap, ich persönlich verwende nur Reactstrap.
Projektlink: React Bootstrap
Bundle-Größe (von BundlePhobia): 111 kB nach der Minimierung, 34,4 kB nach der Minimierung + gzip, Größe durch Tree-Shaking reduzieren
Projektlink: Reactstrap
Bundle-Größe (von BundlePhobia): 152,1 kB nach der Minimierung, 39,4 kB nach der Minimierung + gzip-Komprimierung, Größe durch Tree-Shaking reduzieren
Vorteil:
Die Bootstrap-Bibliothek mit React-Bindungen, die jeder liebt;
Leicht anpassbar über CSS-in-JS;
Es gibt es schon lange genug, sodass Sie sich keine Sorgen über Fehler/Probleme machen müssen.
Legen Sie schnell los;
Es gibt keine jQuery-Abhängigkeit, da es in React vollständig neu implementiert wurde.
Mangel:
Das ist Bootstrap: Wenn Sie es nicht anpassen, sieht Ihre Website wie jede andere aus.
Bulma
Bulma unterscheidet sich von den anderen in diesem Artikel vorgestellten Bibliotheken, da Bulma ein reines CSS-Framework ist und kein JS erfordert. Sie können Klassen von Bulma direkt verwenden oder eine Wrapper-Bibliothek wie React-Bulma-Components verwenden.
Projektlink: Bulma
Projektlink: React-Bulma-Komponenten
Bundle-Größe (von BundlePhobia): 179 KB minimiert, 20,1 KB minimiert + gzip-komprimiert
Vorteil:
Dadurch sieht Ihre Website nicht wie Bootstrap aus.
Perfekt, um schnell loszulegen;
Moderne Funktionen (zugrunde liegende Flexbox/Grid).
Mangel:
Barrierefreiheit: Es gibt einige, aber nicht so strenge wie andere Bibliotheken, die sich an die WCAG-Richtlinien halten.
Chakra-Benutzeroberfläche
Projektlink: ChakraUI
Paketgröße (von BundlePhobia): 326,2 kB nach der Minimierung, 101,2 kB nach der Minimierung + GZIP-Komprimierung, Reduzieren Sie die Größe durch Tree Shaking
Vorteil:
Barrierefreiheit: Gemäß den WAI-ARIA-Richtlinien verwenden Komponenten Aria-Tags;
Unterstützt vom Discord-Server;
Einfach anzupassen (mit Theme-Unterstützung);
Hochgradig modular, sodass durch Tree-Shaking tatsächlich Code entfernt wird, den Sie nicht verwenden.
Mangel:
Ganz neu.
Beachten:
Es ist sehr nah an Version 1, daher beachten Sie bitte wichtige Änderungen nach Version 0.8.0.
Material-Benutzeroberfläche
MaterialUI ist eine meiner Hassliebe-Bibliotheken. Es hat mir in der Vergangenheit geholfen, einige sehr stressige Projektfristen zu überstehen, aber am Ende habe ich es immer so schnell wie möglich hinter mich gebracht.
In der Vergangenheit konnten Sie die Stile von MaterialUI nur durch das Schreiben von JSS anpassen, aber glücklicherweise können Sie Stile jetzt mit styled-components und Emotion überschreiben.
Projektlink: Material-Benutzeroberfläche
Bundle-Größe (von BundlePhobia): 325,7 KB minimiert, 92 KB minimiert + GIZP-komprimiert, reduziert durch Tree Shaking
Vorteil:
Vollständige Dokumentation
Die Symbolbibliothek ist riesig
Einfach und leicht zu bedienen (Situation am Anfang)
Mangel:
Schwierig und mühsam anzupassen, aber notwendig (zur Verbesserung der Optik);
Leistung: Es werden zu viele DOM-Knoten gerendert;
Ihre App wird wie ein Google-Produkt aussehen (für einige mag dies ein professionelles Aussehen darstellen).
Semantische Benutzeroberfläche
Projektlink: Semantische Benutzeroberfläche
Semantische-UI-Reaktion
Paketgröße (von BundlePhobia): 300,8 kB nach der Minimierung, 80,9 kB nach der Minimierung + gzip-Komprimierung, Größe durch Tree-Shaking reduzieren.
Vorteil:
Zusammensetzbar (Komponenten als Requisite übergeben)
Einfach anzupassen
Nützliche Dokumentation
Der Benutzer ist bekannt (wird intern von Netflix verwendet und von Produkten verwendet, die von Amazon veröffentlicht wurden).
TypeScript-Unterstützung
Mangel:
Mögliche Unsicherheit von Open-Source-Projekten.
Problem anzeigen:
https://github.com/Semantic-Org/Semantic-UI/issues/6109
https://github.com/Semantic-Org/Semantic-UI/issues/6413
Von der Community betriebener Fork:
https://github.com/fomantic/Fomantic-UI
Lobende Erwähnung
Benutzeroberfläche erreichen
ReachUI ist eine Low-Level-Komponentenbibliothek, die es Entwicklern ermöglicht, barrierefreie React-Komponenten in ihre Designsysteme zu integrieren.
Es ist keine Paketgröße verfügbar, da jede Komponente einzeln als eigenes npm-Paket exportiert wird.
Reakit
Reakit ist eine weitere Low-Level-Komponentenbibliothek. Technisch gesehen handelt es sich um eine UI-Bibliothek, die jedoch kein CSS enthält. Sie müssen also noch eine Styling-Lösung finden.
Paketgröße (von BundlePhobia): 119,9 kB nach der Minimierung, 32,1 kB nach der Minimierung + gzip-Komprimierung, Größe durch Tree-Shaking reduzieren.
Rebass
Ich verfolge Rebass schon seit einiger Zeit. Es handelt sich um eine leistungsstarke Komponentenbibliothek, die kein Thema enthält, das Sie jedoch problemlos ändern können. Ein Beispiel davon in Aktion finden Sie in der Demo.
Projektlink: Rebass
Bundle-Größe (von BundlePhobia): 43 kB nach der Minimierung, 14,4 kB nach der Minimierung + Gizp-Komprimierung, Reduzieren Sie die Größe durch Tree Shaking.