6 Beste op ReactJS gebaseerde UI Frameworks

Oorspronkelijk gepubliceerd op Zeolearn

React (ReactJS) een bibliotheek die vandaag geen introductie behoeft voor iedereen die in de voorste ontwikkelingsruimte werkt. Meer details over react js zijn hier echter te vinden. In dit artikel zullen we de leidende UI-frameworks voor Reactjs-toepassingen verkennen. Deze React UI-componentbibliotheken hebben de respectieve CSS-raamwerkpraktijken geïmplementeerd als reactcomponenten die klaar zijn voor gebruik en die uw ontwikkeling eenvoudiger en productiever maken.

Laten we beginnen…

1. Materiële UI

MaterialUI is een set React Components die de richtlijnen voor materiaalontwerp van Google implementeren. Als het gaat om vooraf gedefinieerde componenten, met name UI, is een belangrijk ding dat we moeten vinden, hoeveel UI-widgets beschikbaar zijn en of deze kunnen worden aangepast met configuraties. Material-UI heeft alle componenten die u nodig hebt en het is zeer configureerbaar met een vooraf gedefinieerd kleurenpalet en een component waarmee u een aangepast kleurenthema voor uw app kunt definiëren.

Van de honderden UI-frameworks die er zijn, is Material UI een van de beste op Reactjs gebaseerde UI-frameworks die de meest verfijnde implementatie van Material Design hebben. Met 678 bijdragers en 35K GitHub-sterren is het een van de meest populaire en actief onderhouden bibliotheken.

Ik heb de voorbeeldtoepassing in de voorbeelden van het materiaal-ui-project op stackblitz opgezet voor een snelle demo. Verwijs hier naar de code.

Persoonlijk vind ik het geen goed voorbeeld om te laten zien wat de mogelijkheden van materiële ui zijn, maar zeker een eenvoudige starter. Officiële website heeft ook goede documentatie en demo's per component die een goede bron van informatie is.

2. Reageren Bootstrap

Bootstrap is een van de meest populaire en meest gebruikte CSS-framework. Het is geen verrassing om het duo React en Bootstrap te hebben. React Bootstrap is een set React-componenten die de implementatie van Bootstrap-framework. React-Bootstrap is momenteel gericht op Bootstrap v3 en het team werkt actief aan Bootstrap v4.

Met 204 bijdragers en 12.000 github-sterren is het een van de populaire en actief onderhouden bibliotheken.

Helaas geeft react-bootstrap geen enkel werkend projectvoorbeeld, maar er zijn voorbeelden voor elke component die hier te vinden zijn.

Ik heb een voorbeeldtoepassing op stackblitz opgezet door 2 van de onafhankelijke voorbeelden uit de documentatie te compileren. Verwijs hier naar de code.

3. Semantische gebruikersinterface

Semantic UI is een ontwikkelingsraamwerk dat helpt bij het creëren van mooie, responsieve lay-outs met behulp van mensvriendelijke HTML. Dit raamwerk wordt meer beïnvloed door de semantische stijl van HTML die betekenis heeft voor elke css-klasse. De sexy UI behandelt woorden en klassen als uitwisselbare concepten. Klassen gebruiken syntaxis van de natuurlijke taal, zoals zelfstandig naamwoord / modificatierelatie, pluraliteit, woordvolgorde om een ​​intuïtief verband tussen concepten te hebben. Semantic maakt ook gebruik van eenvoudige zinnen die gedragingen worden genoemd die functionaliteit activeren.

Semantic UI React is de officiële React-integratie voor Semantic UI

Met 175 bijdragers en 6K github-sterren is het een van de populaire en actief onderhouden bibliotheken.

Helaas geeft semantic geen enkel werkend projectvoorbeeld, maar er zijn voorbeelden voor elke component die hier te vinden zijn.

Een voorbeeldtoepassing die de kaartcomponent demonstreert, kan hier worden onderzocht

4. React Toolbox

Nog een veer in de op Google Material Design gebaseerde bibliotheek. React Toolbox is een UI-bibliotheek die de concepten van Google's Material Design volgt en is gebouwd bovenop enkele van de meest trendy voorstellen zoals CSS-modules (geschreven in SASS), Webpack en ES6. De bibliotheek integreert harmonieus met uw Webpack-workflow en is gemakkelijk aan te passen en zeer flexibel.

Met 219 bijdragers en 7k GitHub-sterren is het een van de populaire en actief onderhouden bibliotheken.

Officiële website biedt voorbeelden voor alle componenten die hier kunnen worden verkend. Het leuke dat je hier ziet, is het laden in de speelplaatsfunctie, waarmee je functies en mogelijkheden daar en zonder extra instellingen kunt verkennen.

5. Mierenontwerp

Een enterprise-class UI-ontwerptaal en op React gebaseerde implementatie. Ant-ontwerp is een set hoogwaardige React-componenten uit de doos die in TypeScript zijn geschreven. Het ondersteunt browser-, server-side rendering en Electron-omgevingen, heeft vele componenten en zelfs een tutorial met Create-react-app

Met 443 bijdragers en 24k GitHub-sterren is het een van de populaire en actief onderhouden bibliotheken.

Je kunt hier naar de demo's verwijzen

6. Reageren Foundation

Net als bootstrap is CSS Framework Foundation een ander populair CSS-framework. Foundation uit Zurb is een zeer veelzijdige en gemakkelijk aanpasbare bibliotheek. React Foundation is een in de bibliotheek geïmplementeerde Foundation als React-componenten.

React Foundation is in feite het inpakken van elk onderdeel van de Foundation in herbruikbare React-componenten volgens de best practices van het framework. Het hoofddoel van de ontwikkeling van React Foundation is gebruiksgemak en uitbreidbaarheid.

In tegenstelling tot andere UI-bibliotheken voor het ontwikkelen van Reactjs-apps die we hierboven hebben onderzocht, heeft React Foundation zeer beperkte bijdragen en een zeer lage actieve ontwikkeling.

Je kunt hier naar de demo's verwijzen