20+ Best React UI-komponentbiblioteker / rammer for 2020

Bedste React UI-komponentbiblioteker / -rammer


I denne ressource ser vi på de bedste React UI-komponentbiblioteker og rammer tilgængelige på Internettet. Men først:

Hvad er React?

React er et open source JavaScript-bibliotek, der hjælper dig med at opbygge en topgrænseflade for både internettet såvel som mobile apps. Det kombineres bekvemt med andre JavaScript-rammer og biblioteker og indeholder små, selvstændige stykker kode kaldet komponenter. Det er disse komponenter, der vil være i fokus i denne ressource.

Det gode ved komponenter er, at de er modulopbyggede uden meget app-specifikke afhængigheder. Dette betyder, at du kommer til at genbruge komponenterne til at bygge fantastiske apps og grænseflader superhurtigt. Og tak til Bit, Du kan også dele dem med andre React-entusiaster.

Inden du starter dit næste projekt med React, skal du tage et par minutter på at scanne denne liste over bedste React UI-komponentbiblioteker, der kan hjælpe dig med at oprette en fantastisk UI.

Bedste React UI-komponentbiblioteker og -rammer i 2020

Materiale Kit React

React UI-komponentbiblioteker: Material Kit React

Oprettet med inspiration fra Googles materialedesign bygger Material Kit React et sæt elementer, der sætter konsistens som hovedfunktionen. På den måde bevarer dit webprojekt en lighed i udseende og funktioner igennem.

Det generelle layout ligner flere papirark. Dette giver layouterne en dybde og orden. Tre eksempler er inkluderet. Disse sider illustrerer ikke kun, hvad der er muligt med dette sæt, de fungerer også som skabeloner, hvor du kan erstatte tekst og billeder med dine egne.

Sættet indeholder også en række grundlæggende elementer såsom knapper, badges, skyder, menu, pagination, navigationsbjælker, faner og piller. Du vil være i stand til at tilpasse stil, størrelse og farve for de fleste elementer. JavaScript-elementerne inkluderer Modals, værktøjstips, dato-tid picker, karrusler og popovers. Udover at bruge kittet til at starte et nyt projekt, kan du også genstarte ethvert gammelt Bootstrap-projekt. Materialsættets reaktion Pro version indeholder meget flere komponenter, sektioner og eksempler sider.

Ant Design til React

Ant Design til React

Dette React UI-bibliotek er et designsystem til produkter på virksomhedsniveau. Det er baseret på Ant Design projekt og indeholder et sæt komponenter og demonstrationer af høj kvalitet til bygning af rige, interaktive brugergrænseflader. Komponenterne inkluderer internationaliseringsstøtte til snesevis af sprog.

Du har også evnen til tilpasse komponenterne til dine egne designspecifikationer. Ant Design bruger Less.js til sit stilsprog. Myren Design komponenter inkluderer knapper, ikoner, gitter, brødskrum, rullemenuer, pagination og mere.

Projektet har næsten 60 k stjerner på GitHub, så det er enormt populært blandt udviklere.

Reager administrator

React UI-komponentbiblioteker: React Admin

Dette bibliotek er velegnet til at oprette business-to-business (B2B) administrationsapplikationer oven på REST / GraphQL API’er og kan tilpasses efter design. Det er bygget med et antal velkendte projekter ud over React: Material UI, React Router, Redux og React Final Form. Det sidstnævnte er en populær form for statsstyringsløsning.

Ud over den gratis version og dens komponenter, der er også en virksomhedsløsning. Virksomhedsløsningen inkluderer pro support fra Marmelab (skaberne) og adgang til private moduler.

React Admin kan prale af cirka 12 k stjerner på GitHub, og opretholdes aktivt.

Shards React

Reager UI-komponentbiblioteker: skær

Shards React er et open source, moderne React UI-kit, der er bygget fra bunden og er beregnet til hurtig ydelse. Det moderne designsystem giver dig mulighed for at ændre mange ting. Derudover kan du downloade kildefilerne for også at ændre ting på kodeniveau. SCSS, der bruges til styling, forbedrer kun udvikleroplevelsen.

Dette bibliotek er baseret på shards, og anvendelser React DatepickerReager Popper (en positioneringsmotor) og noUIShlider. Det understøtter materielle og fontawesome ikoner. Det Shards Pro pakken har 15 foruddefinerede sider, der hjælper dig med at komme i gang. Hjælpsomt bruger disse sider blokke, som du kan flytte rundt.

Med ~ 270 stjerner på GitHub, det inkluderer også snesevis af brugerdefinerede React-komponenter såsom rækkevidde skydere og skifteindgange. 350+ komponenterne sikrer, at du kan bygge næsten alle typer websteder med Shards React.

Materiale-UI

Reager UI-komponentbiblioteker og -rammer - Materiale UI

Med hele 55K stjerner på GitHub, Material-UI er blandt de mest populære React UI-komponentbiblioteker. Komponenterne er afhængige af React, men bruger Googles materialedesign. For dem af jer, der har brug for udfyldning, henter materialedesign inspiration fra den fysiske verden og strukturer, mens de faktiske UI-elementer holdes på et minimum.

En bred vifte af nyttige komponenter er tilgængelige, f.eks. Appbjælker, auto-komplet, badges, knapper, kort, dialogbokse, ikoner, menuer, skyder med mere. Hjælpsomt tilbyder Material-UI også React-temaer og skabeloner, så du kan have et tilpasset farvetema til din app.

React Bootstrap

reagerer-bootstrap

Næste på vores liste over React UI-komponentbiblioteker er React Bootstrap, et UI-kit, der bevarer dets Bootstrap-kerne. For at give dig mere kontrol over formen og funktionen for hver komponent, erstatter den Bootstraps JavaScript med React. Hver komponent er bygget til at være let tilgængelig, vigtig for front-end rammebygning.

Og da React Bootstrap ikke afviger meget fra dens Bootstrap-oprindelse, kan udviklere vælge mellem de tusinder af Bootstrap-temaer, der er let tilgængelige. Det har optjent 14500+ stjerner på GitHub.

Reager virtualiseret

reagere-virtualiseret

Bygger du en frontend, der er tunge data? React Virtualized kan være det bibliotek, du har brug for at dyppe i. Det inkluderer adskillige komponenter til effektiv gengivelse af store lister, borde og gitre. For eksempel finder du murværk, kolonner, autosizer, retningsortering, vinduesrulle og mere. Yderligere kan du tilpasse tabellerne ved at konfigurere rækkehøjderne og vise pladsholdere i cellerne.

React Virtualized har også meget få afhængigheder og understøtter standardbrowsere, inklusive nylige mobilbrowsere til iOS og Android. Det har 18.000+ stjerner på GitHub.

Argon Design System React

React UI-komponentbiblioteker: Argon Design System React

Dette bibliotek tilbyder et gratis designsystem til Bootstrap 4, React og Reactstrap. Det leveres med 100 moderne og smukke elementer, der er implementeret i en fuldt funktionel kode, så du nemt kan skifte fra en side til det faktiske websted.

Argon Design System tilbyder forudbyggede eksempel sider og en håndfuld variationer for alle komponenter, såsom farver, stilarter, svæver og fokus.

Tag et smugkig på hele sæt af komponenter, med grundlæggende elementer, typografi, navbars, alarmer, billeder, ikoner, Javascript-komponenter og mere.

Blueprint

blueprintjs

React-komponenterne i Blueprint er primært til brug på desktop-applikationer. Disse komponenter er især egnede til at opbygge komplekse og datatætte grænseflader. Fra komponentbiblioteket kan du hente kodestykker til generering og visning af ikoner, til interaktion med datoer og tidspunkter, til plukning af tidszoner og mere.

Hvad ellers er der i dette komponentbibliotek? Meget virkelig – brødkrummer, knapper, opkald, kort, skillelinje, navbars, faner, tags og meget mere. På GitHub, det klokker ind på 15.000+ stjerner.

Du kan også være interesseret i disse artikler:

  • Gratis reaktive skabeloner til appudvikling
  • Bedste kantede admin-instrumentbordskabeloner

Semantisk UI-reaktion

Reager UI-komponentbiblioteker: semantisk-ui

Semantisk UI bruger menneskevenlig HTML til dets udviklingsrammer og har integrationer med React, Angular, Meteor, Ember og mange andre rammer. Al jQuery-funktionalitet er blevet implementeret igen i React.

Det giver dig mulighed for at indlæse ethvert semantisk UI CSS-tema oven på din semantiske UI React-app. Derudover har du også fuld adgang til markeringen, hvilket betyder, at der er fleksibilitet i tilpasning af komponenter. Det er stjernetælling GitHub er over 11.000.

React Toolbox

reagerer-værktøjskasse

Et andet React UI-komponenterbibliotek, som du kan bruge til at implementere Googles principper for materialedesign i dit projekt, er React Toolbox. React Toolbox er afhængig af CSS-moduler til dette formål. Selvom du kan bruge en hvilken som helst modulbundt, integreres den pænt med webpack workflow. Tankevækkende giver teamet hos React Toolbox besøgende en in-browser-editor, hvor du kan eksperimentere med komponenterne i realtid.

Mens du arbejder med React Toolbox, kan du vælge at importere komponenter i bundter eller rå komponenter. Forskellen er, for førstnævnte kommer komponenterne med alle nødvendige afhængigheder og temaer, der er injiceret til dig. Dette betyder, at CSS for hver afhængighed automatisk vil være tilgængelig i din endelige CSS. Tværtimod, med rå komponenter, er ingen CSS inkluderet. Dette betyder, at du bliver nødt til at give et tema via egenskaber til den komponent, der skal designes korrekt. React Toolbox er på mere end 8.000 stjerner på GitHub.

React Desktop

React UI-komponentbiblioteker: react-desktop

Vores næste komponentbibliotek, React Desktop, bruger macOS, Sierra og Windows 10-komponenter med det formål at bringe en native desktop-oplevelse til internettet.

Denne samling er et JavaScript-bibliotek bygget oven på Facebook’s React bibliotek, og det er kompatibelt med ethvert JavaScript-baseret projekt. Dette værktøj krydser 8.000-stjerneklassificering på GitHub.

Onsen UI

onsen-ui

I tilfælde af at du opretter mobilapps på tværs af platforme, vil du være interesseret i dette tilbud på vores liste over React UI-komponentbiblioteker. Onsen UI er en mobilappudviklingsramme, der bruger HTML5 og JavaScript og giver integration med Angular, Vue.js og React. Alle komponenter er auto-stylet baseret på platformen, og så understøtter det både iOS og Android ved hjælp af den samme kildekode.

Onsen UI er kompatibel med mange populære React-rammer. En interaktiv tutorial hjælper dig med at få en god start med dette værktøj. Komponentbiblioteket anvender ren CSS uden JavaScript-opførsel. Til nogle ekstra detaljer hjælper brugerdefinerede elementer til. Stjernen regner med GitHub overstiger 7.800.

Evergreen

Reager UI-komponentbiblioteker: stedsegrøn

Evergreen indeholder et sæt React-komponenter, der er egnede til enterprise-applikationer. Da det bruger Reager primitiv, det er meget fleksibelt. Samtidig fungerer det lige så let lige ud af kassen.

Det inkluderer en bred vifte af komponenter og værktøjer, der starter fra grundlæggende layout, typografi, farver og ikoner til funktionsbaserede komponenter såsom dropdowns, skift, fil uploads og feedback indikatorer. Efter installation af Evergreen-pakken kan du vælge og vælge de komponenter, du vil importere. Det har i øjeblikket 9.000+ stjerner på GitHub.

Reactstrap

reactstrap

For enkle React Bootstrap 4-komponenter skal du tjekke Reactstrap. Det leveres med to primære distributionsversioner. Den ene, en grundlæggende version, der udelukker valgfri afhængighed. Dette giver dig mere fleksibilitet i konfigurering af nødvendige afhængigheder.

Den anden version er den fulde version, der inkluderer alle valgfri afhængigheder. Denne anbefales til mindre applikationer. Reactstrap er endnu en samling i React UI-komponenter biblioteket, der krydser 8.700 stjernemærket på GitHub.

Rebass

Reager UI-komponentbiblioteker: rebass

Rebass indeholder kun otte grundlæggende komponenter, alle i en super-lille fil. Komponenterne er strækkelige og tematiske og bygget til responsiv webdesign.

Komponenterne bruger stylet system og tjener som et godt udgangspunkt for at udvide til brugerdefinerede brugergrænseflade-komponenter til din app. ThemeProvider kan også hjælpe dig med dette. Stjernen regner med GitHub er over 6.000.

grommet

tylle

Grommet har et bredt bibliotek af komponenter i sit sæt og tæller store navne som Netflix og Boeing blandt sine brugere. Uanset om din app er til telefoner eller til bredere skærmdisplay, kan du designe layout. Tilgængelighed sker via tastatur eller skærmlæser.

Temeværktøjer hjælper med tilpasning til farve, type og layout. Dette bibliotek med React UI-komponenter har et stjernetælling på mere end 6.000 GitHub.

Elementær UI

Reaktér UI-komponentbiblioteker: elemental-ui

Elemental UI leverer et antal grundlæggende funktionelle komponenter til selvstændig brug eller i en hvilken som helst kombination, hvad enten det er i standardstil eller efter tema. Nogle af komponenterne inkluderer formularer, knapper, kort og modaler.

Projektet er under udvikling, men administrerer 4.000+ stjernetællinger GitHub.

React Suite

rsuite

React Suite indeholder en række komponentbiblioteker til enterprise systemprodukter. Det understøtter alle større browsere og platforme samt gengivelse på serversiden.

Hvis du er hjemme med Mindre udvikling, bør tilpasning af komponenterne ikke udgøre noget problem. Komponenterne i dette bibliotek inkluderer ikoner, læssere, skillelinjer, værktøjstip med mere, og React Suite har tæt på 4.000 stjerner på GitHub.

Belle

belle

Blandt de mest interessante React UI-komponentbiblioteker tilbyder Belle en virkelig bred vifte af komponenter. Du kan tilpasse disse komponenter på to niveauer – basisniveauet for alle komponenter samlet, såvel som hver komponent individuelt.

Komponenterne leveres med support til mobiler og ARIA-support. Vejen til at bruge Belle er først at oprette en simpel app med React og derefter importere en hvilken som helst Belle-komponent og begynde at bruge den med det samme. Dette komponentbibliotek har mere end 2.400 stjerner på GitHub.

reagerer-md

reagerer-md

Et andet React UI-komponenterbibliotek, som du skal overveje, hvis du vil implementere materialedesign i dit projekt, er react-md. Det giver dig et valg af React-komponenter, der fungerer med Sass. Til dette formål er der en adskillelse af stilarter i Sass i stedet for inline-styling. Dette gør det lettere for dig at tilpasse komponenter i overensstemmelse med eksisterende stilarter.

Farver og typografi kan tilpasses, og den detaljerede dokumentation hjælper dig med at komme forbi det grundlæggende. På GitHub, react-md tæller mere end 2.000 stjerner.

PrimeReact

primereact

Denne liste over React UI-komponentbiblioteker ville ikke være komplet uden PrimeReact. Det giver komponenter, der dækker næsten alle grundlæggende grænsefladekrav såsom inputindstillinger, menuer, datapræsentation, meddelelser og mere.

Det er også opmærksom på mobiloplevelse med berøringsoptimerede responsive designelementer. Der er en række skabeloner og temaer, der giver dig mulighed for at tilpasse og vælge mellem fladt og materielt design. Dette komponentbibliotek har mere end 1.200 stjerner på GitHub.

KendoReact

kendoreact

I modsætning til de foregående React UI-komponentbiblioteker er KendoReact et premium sæt komponenter, med licenser, der starter på $ 799. Det kan prale af en imponerende klientliste, der inkluderer Microsoft, NASA og Sony. Og du kan også bruge det til at oprette hurtige og funktionsrige apps med imponerende brugergrænseflade.

Komponentsættet er bygget specifikt til React-udvikling. Dette sikrer nul afhængigheder, og alle komponenter er optimeret til React. Plus, hvis du har et eksisterende komponentbibliotek, kan du blot tilføje det fra KendoReact uden at skulle omskrive hele biblioteket.

Det er vores liste over de bedste React UI-komponenter biblioteker. Er dit yndlingsbibliotek her?

Glem ikke at deltage i vores nedbrudskursus om at fremskynde dit WordPress-sted. Med nogle enkle rettelser kan du reducere din indlæsningstid med endda 50-80%:

* Dette indlæg indeholder tilknyttede links, hvilket betyder, at hvis du klikker på et af produktlinkene og derefter køber produktet, modtager vi et mindre gebyr. Ingen bekymringer, selvom du stadig betaler standardbeløbet, så der er ingen omkostninger fra din side.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map