6 labākie ReactJS balstītie UI ietvari

Sākotnēji tas tika publicēts ZeoLearn emuārā

React (ReactJS) bibliotēka, kurai šodien nav nepieciešams ievads ikvienam, kurš strādā attīstības telpā. Tomēr sīkāku informāciju par reaģējošajiem js varat atrast šeit. Šajā rakstā mēs izpētīsim vadošos Reactjs lietojumprogrammu UI ietvarus. Šīs React UI komponentu bibliotēkas ir ieviesušas attiecīgo CSS ietvara praksi kā reaģējošus komponentus, kas ir gatavi lietošanai, kas padara jūsu attīstību vieglāku un produktīvāku.

Sāksim…

1. Materiālā lietotāja saskarne

MaterialUI ir reaģējošu komponentu kopums, kas ievieš Google materiālu dizaina vadlīnijas. Runājot par iepriekš noteiktiem komponentiem, īpaši UI, viena svarīga lieta, kas mums jāatrod, ir tas, cik daudz UI logrīku ir pieejami un vai tos var pielāgot, izmantojot konfigurācijas. Materiāla lietotāja saskarnei ir visas nepieciešamās sastāvdaļas, un tā ir ļoti konfigurējama ar iepriekš noteiktu krāsu paleti un komponentu , kas ļauj definēt jūsu lietotnes pielāgotu krāsu motīvu.

No simtiem UI ietvaru, kas atrodas UI, ir viens no labākajiem Reactjs balstītajiem UI ietvariem, kam ir visizsmalcinātākā Material Design ieviešana. Ar 678 atbalstītājiem un 35K GitHub zvaigznēm tā ir viena no populārākajām un aktīvi uzturētajām bibliotēkām.

Es esmu iestatījis pieteikuma paraugu, kas sniegts material-ui projekta piemēros, lai stackblitz ātri demonstrētu. Skatiet kodu šeit.

Es personīgi uzskatu, ka tas nav lielisks piemērs, lai parādītu lietu, kāda ir materiāla spēja, bet noteikti ir vienkāršs iesācējs. Arī oficiālajā vietnē ir laba dokumentācija un demonstrācijas par katru komponentu, kas ir labs informācijas avots.

2. Reaģējiet Bootstrap

Bootstrap ir viens no populārākajiem un plaši izmantotajiem CSS ietvariem. Nav pārsteigums, ka ir React un Bootstrap duets. React Bootstrap ir React komponentu komplekts, kas īsteno Bootstrap ietvaru. React-Bootstrap šobrīd ir paredzēts Bootstrap v3, un komanda aktīvi strādā pie Bootstrap v4.

Ar 204 līdzstrādniekiem un 12K github zvaigznēm tā ir viena no populārajām un aktīvi uzturētajām bibliotēkām.

Unfortunatley react-bootstrap nesniedz nevienu strādājoša projekta piemēru, taču šeit ir atrodami piemēri katram komponentam.

Man ir iestatīta stackblitz lietojumprogrammas paraugs, apkopojot 2 neatkarīgus piemērus no dokumentācijas. Skatiet kodu šeit.

3. Semantiskā lietotāja saskarne

Semantiskā lietotāja saskarne ir izstrādes ietvars, kas palīdz radīt skaistus, atsaucīgus izkārtojumus, izmantojot cilvēkiem draudzīgu HTML. Šo ietvaru vairāk ietekmē HTML semantiskais stils, kam ir nozīme katrai CSS klasei. Semantiskais lietotāja interfeiss traktē vārdus un klases kā maināmus jēdzienus. Lai intuitīvi saistītu jēdzienus, klases izmanto dabiskās valodas sintakse, piemēram, lietvārda / mainītāja attiecības, daudzskaitlī, vārdu secībā. Semantikā tiek izmantotas arī vienkāršas frāzes, ko sauc par uzvedību, kas aktivizē funkcionalitāti.

Semantiskā lietotāja saskarne React ir oficiālā semantiskās lietotāja saskarnes integrācija

Ar 175 atbalstītājiem un 6K github zvaigznēm tā ir viena no populārajām un aktīvi uzturētajām bibliotēkām.

Unfortunatley react semantika nesniedz nevienu strādājoša projekta piemēru, taču šeit ir atrodami piemēri katram komponentam.

Šeit var izpētīt lietojumprogrammas paraugu, kas demonstrē kartes komponentu

4. Reaģējiet uz rīklodziņu

Vēl viena spalva bibliotēkā, kuras pamatā ir Google Material Design. React rīklodziņš ir lietotāja saskarnes bibliotēka, kurā ievēroti Google materiāla dizaina jēdzieni, un tā ir veidota, pamatojoties uz dažiem modernākajiem priekšlikumiem, piemēram, CSS moduļiem (rakstīts SASS), Webpack un ES6. Bibliotēka harmoniski integrējas ar jūsu Webpack darbplūsmu, un tā ir viegli pielāgojama un ļoti elastīga.

Ar 219 atbalstītājiem un 7 000 GitHub zvaigznēm tā ir viena no populārajām un aktīvi uzturētajām bibliotēkām.

Oficiālā vietne satur visu komponentu piemērus, kurus var izpētīt šeit. Jauka lieta, ko jūs redzat, ir ielādēta rotaļu laukuma funkcija, kas palīdz jums izpētīt funkcijas un iespējas turpat un bez papildu iestatīšanas.

5. Skudru dizains

Uzņēmējdarbības klases lietotāja interfeisa dizaina valoda un uz reaģēšanu balstīta ieviešana. Skudru dizains ir izveidots no augstas kvalitātes augstas kvalitātes reaģēšanas komponentiem, kas ir uzrakstīti ar TypeScript. Tas atbalsta pārlūka, servera puses renderēšanu un elektronu vidi, tajā ir daudz komponentu un pat apmācība ar lietotni Create-react

Ar 443 atbalstītājiem un 24 000 GitHub zvaigznēm tā ir viena no populārajām un aktīvi uzturētajām bibliotēkām.

Šeit var atsaukties uz demonstrācijām

6. Reaģēšanas fonds

Tāpat kā sāknēšanas programma, CSS Framework Foundation ir vēl viena populāra CSS sistēma. Fonds no Zurgas ir ļoti iespējām bagāta un viegli pielāgojama bibliotēka. React fonds ir bibliotēkā ieviests fonds kā React komponenti.

React Foundation būtībā ir katras Fonda daļas iesaiņošana atkārtoti izmantojamiem React komponentiem, ievērojot sistēmas labāko praksi. React fonda attīstīšanas galvenais mērķis ir lietošanas ērtums un paplašināmība.

Atšķirībā no citām lietotāja interfeisa bibliotēkām, kas paredzētas Reactjs lietotņu izstrādei, mēs iepriekš izpētījām, ka React Foundation ir ļoti ierobežoti ieguldītāji un ļoti zema aktīvā attīstība.

Šeit var atsaukties uz demonstrācijām