6 Bedste ReactJS-baserede UI-rammer

Oprindeligt offentliggjort på ZeoLearn Blog

React (ReactJS) et bibliotek, som ikke har brug for nogen introduktion i dag for alle, der arbejder i udviklingsrummet foran. Flere detaljer om react js kan dog findes her. I denne artikel skal vi udforske de førende UI-rammer for Reactjs-applikationer. Disse React UI-komponentbiblioteker har implementeret de respektive CSS-rammer for praksis som reaktionskomponenter, der er klar til brug, hvilket gør din udvikling lettere og produktiv.

Lad os komme igang…

1. Materiale UI

MaterialUI er et sæt reaktive komponenter, der implementerer Googles retningslinjer for materialedesign. Når det kommer til foruddefinerede komponenter, især UI, er en vigtig ting, vi har brug for at finde, hvor mange UI-widgets, der er tilgængelige, og om disse kan tilpasses med konfigurationer. Material-UI har alle komponenter, du har brug for, og det er meget konfigurerbart med foruddefineret farvepalet og -komponent, som giver dig mulighed for at definere et tilpasset farvetema til din app.

Ud af de hundreder af UI-rammer derude, er Material UI et af de bedste Reactjs-baserede UI-rammer, der har den mest raffinerede implementering af Material Design. Med 678 bidragydere og 35K GitHub-stjerner er det et af de mest populære og aktivt vedligeholdte biblioteker.

Jeg har konfigureret eksempler på applikation, der er leveret i eksemplerne på materiale-ui-projekt til stackblitz til en hurtig demo. Se koden her.

Jeg personligt føler, at det ikke er et godt eksempel at vise sag, hvad der er muligheden for materiale ui, men bestemt en simpel starter. Officielt websted har også god dokumentation og demoer pr. Komponent, som er en god kilde til information.

2. React Bootstrap

Bootstrap er en af ​​de mest populære og mest anvendte CSS-rammer. Det er ingen overraskelse at have duoen React og Bootstrap. React Bootstrap er et sæt React-komponenter, der implementerer Bootstrap-rammer. React-Bootstrap er i øjeblikket målrettet mod Bootstrap v3, og teamet arbejder aktivt med Bootstrap v4.

Med 204 bidragydere og 12K github-stjerner er det et af det populære og aktivt vedligeholdte bibliotek.

Unfortunatley react-bootstrap giver ikke noget arbejdsprojekteksempel, men der er eksempler på hver komponent, der kan findes her.

Jeg har opsat en prøveapplikation på stackblitz ved at samle 2 af de uafhængige eksempler fra dokumentationen. Se koden her.

3. Semantisk brugergrænseflade

Semantisk brugergrænseflade er en udviklingsramme, der hjælper med at skabe smukke, responsive layouts ved hjælp af menneskevenlig HTML. Denne ramme er mere påvirket af semantisk HTML-stil, der har betydning for hver css-klasse. Semantisk UI behandler ord og klasser som udskiftelige koncepter. Klasser bruger syntaks fra naturligt sprog som navneord / modifikationsforhold, pluralitet, ordrækkefølge for at have en forbindelse mellem begreber intuitivt. Semantic bruger også enkle sætninger kaldet adfærd, der udløser funktionalitet.

Semantic UI React er den officielle React-integration for Semantic UI

Med 175 bidragydere og 6K github-stjerner er det et af det populære og aktivt vedligeholdte bibliotek.

Desværre reagerer semantisk ikke med et eksempel på et arbejdsprojekt, men der er eksempler på hver komponent, der kan findes her.

En eksempelapplikation, der demonstrerer kortkomponent, kan udforskes her

4. React Toolbox

En anden fjer i Google Material Design-baseret bibliotek. React Toolbox er et UI-bibliotek, der følger koncepterne i Googles materialedesign og er bygget oven på nogle af de mest trendy forslag som CSS-moduler (skrevet i SASS), Webpack og ES6. Biblioteket integreres harmonisk med din Webpack-workflow, og det er let at tilpasse og meget fleksibelt.

Med 219 bidragydere og 7k GitHub-stjerner er det et af det populære og aktivt vedligeholdte bibliotek.

Officielt websted indeholder eksempler på alle komponenter, der kan udforskes her. Dejlig ting, du ser her, er belastning i legepladsfunktionen, der hjælper dig med at udforske funktioner og muligheder lige der og uden yderligere opsætning.

5. Ant Design

Et enterprise-class UI-designsprog og React-baseret implementering. Myresign er et sæt React-komponenter af høj kvalitet ud af boksen, der er skrevet i TypeScript. Det understøtter browser-, serversides gengivelse og elektronmiljøer, har mange komponenter og endda en tutorial med Create-react-app

Med 443 bidragydere og 24 k GitHub-stjerner er det et af det populære og aktivt vedligeholdte bibliotek.

Du kan henvise til demoer her

6. React Foundation

Ligesom bootstrap er CSS framework Foundation et andet populært CSS framework. Foundation fra Zurb er et meget funktionsrigt og let tilpasses bibliotek. React Foundation er et bibliotek implementeret Foundation som React-komponenter.

React Foundation er dybest set indpakningen af ​​Fondens enhver del til genanvendelige React-komponenter efter rammens bedste praksis. Hovedmålet bag udviklingen af ​​React Foundation er brugervenlighed og udvidbarhed.

I modsætning til andre UI-biblioteker til udvikling af Reactjs-apps, vi har undersøgt ovenfor, har React Foundation meget begrænsede bidragydere og meget lav aktiv udvikling.

Du kan henvise til demoer her