6 Beste ReactJS-baserte brukergrensesnitt

Opprinnelig publisert på Zeolearn

React (ReactJS) et bibliotek som ikke trenger introduksjon i dag for alle som jobber i utviklingsområdet foran. Imidlertid finner du flere detaljer om react js her. I denne artikkelen skal vi utforske de ledende brukergrensesnittene for Reactjs-applikasjoner. Disse React UI-komponentbibliotekene har implementert de respektive CSS-rammepraksisene som reaksjonskomponenter som er klare til bruk som gjør din utvikling enklere og produktiv.

La oss komme i gang…

1. Materiell UI

MaterialUI er et sett med React Components som implementerer Googles retningslinjer for materialdesign. Når det gjelder forhåndsdefinerte komponenter, spesielt UI, er en viktig ting vi trenger å finne hvor mange brukergrensesnitt-widgets som er tilgjengelige, og om disse kan tilpasses med konfigurasjoner. Material-UI har alle komponenter du trenger, og det er veldig konfigurerbart med forhåndsdefinert fargepalett og -komponent som lar deg definere et tilpasset fargetema for appen din.

Av de hundrevis av UI-rammer der ute, er Material UI et av de beste Reactjs-baserte UI-rammene som har den mest raffinerte implementeringen av Material Design. Med 678 bidragsytere og 35K GitHub-stjerner er det et av de mest populære og aktivt vedlikeholdte bibliotekene.

Jeg har satt opp prøvesøknaden som ble gitt i eksemplene på material-ui-prosjekt til stackblitz for en rask demo. Se koden her.

Jeg personlig føler at det ikke er et godt eksempel å vise sak hva som er muligheten til material ui, men definitivt en enkel startpakke. Offisiell webside har også god dokumentasjon og demonstrasjoner per komponent som er en god kilde til informasjon.

2. Reager bootstrap

Bootstrap er et av de mest populære og mest brukte CSS-rammene. Det er ingen overraskelse å ha duoen React og Bootstrap. React Bootstrap er et sett med React-komponenter som implementerer Bootstrap-rammeverket. React-Bootstrap er for tiden målrettet mot Bootstrap v3 og teamet jobber aktivt med Bootstrap v4.

Med 204 bidragsytere og 12K github-stjerner er det et av de populære og aktivt vedlikeholdte bibliotekene.

Unfortunatley react-bootstrap gir ikke noe arbeidsprosjekteksempel, men det er eksempler for hver komponent som du finner her.

Jeg har satt opp en prøvesøknad på stackblitz ved å samle 2 av de uavhengige eksemplene fra dokumentasjonen. Se koden her.

3. Semantisk brukergrensesnitt

Semantisk brukergrensesnitt er et utviklingsrammeverk som hjelper deg med å lage vakre, responsive oppsett ved hjelp av menneskevennlig HTML. Dette rammeverket er mer påvirket med semantisk HTML-stil som har betydning for hver css-klasse. Det fantastiske UI-en behandler ord og klasser som utskiftbare begreper. Klassene bruker syntaks fra naturlig språk som substantiv / modifiseringsforhold, flertall, ordensrekkefølge for å ha en kobling mellom begreper intuitivt. Semantic bruker også enkle setninger kalt atferd som utløser funksjonalitet.

Semantic UI React er den offisielle React-integrasjonen for Semantic UI

Med 175 bidragsytere og 6K github-stjerner er det et av de populære og aktivt vedlikeholdte bibliotekene.

Unfortunatley react semantic gir ikke noe eksempel på et arbeidsprosjekt, men det er eksempler for hver komponent som du finner her.

En eksempelapplikasjon som demonstrerer kortkomponent kan utforskes her

4. React Toolbox

En annen fjær i Google Material Design-baserte bibliotek. React Toolbox er et UI-bibliotek som følger konseptene i Googles materialdesign og er bygget oppå noen av de mest trendy forslagene som CSS-moduler (skrevet i SASS), Webpack og ES6. Biblioteket integreres harmonisk med Webpack-arbeidsflyten, og det er lett å tilpasse og veldig fleksibelt.

Med 219 bidragsytere og 7k GitHub-stjerner er det et av de populære og aktivt vedlikeholdte bibliotekene.

Offisiell webside inneholder eksempler på alle komponenter som kan utforskes her. Hyggelig ting du ser her er lasting i lekeplassfunksjonen som hjelper deg å utforske funksjoner og muligheter der og uten noe ekstra oppsett.

5. Myrdesign

Et bedriftsklasse UI-designspråk og reaksjonsbasert implementering. Myrdesign er satt av React-komponenter av høy kvalitet ut av esken som er skrevet i TypeScript. Den støtter nettleser, gjengivelse på serversiden og elektronmiljøer, har mange komponenter og til og med en tutorial med Create-react-app

Med 443 bidragsytere og 24k GitHub-stjerner er det et av de populære og aktivt vedlikeholdte bibliotekene.

Du kan henvise til demoene her

6. React Foundation

Som bootstrap er CSS framework Foundation et annet populært CSS framework. Foundation fra Zurb er et veldig funksjonsrikt og lett tilpassbar bibliotek. React Foundation er et bibliotek implementert Foundation som React-komponenter.

React Foundation er i utgangspunktet å pakke sammen Foundations alle deler til gjenbrukbare React-komponenter etter rammens beste praksis. Hovedmålet bak utviklingen av React Foundation er brukervennlighet og utvidbarhet.

I motsetning til andre UI-biblioteker for utvikling av Reactjs-apper som vi har undersøkt ovenfor, har React Foundation svært begrensede bidragsytere og svært lav aktiv utvikling.

Du kan henvise til demoene her