6 cele mai bune cadre UI bazate pe ReactJS

Publicat initial pe blogul ZeoLearn

React (ReactJS) o biblioteca care nu are nevoie de nicio prezentare astazi pentru oricine lucreaza in spatiul de dezvoltare din fata. Cu toate acestea, mai multe detalii despre react js pot fi gasite aici. In acest articol, vom explora principalele cadre de interfata pentru aplicatiile Reactjs.

Array

Aceste biblioteci de componente React UI au implementat practicile de cadru CSS respective ca componente react care sunt gata de utilizare, ceea ce va face dezvoltarea mai usoara si productiva.

Sa incepem…

MaterialUI este un set de componente React care implementeaza Ghidul Google de proiectare a materialelor. Cand vine vorba de componente predefinite, in special UI, un lucru important pe care trebuie sa il gasim este cate widgeturi UI sunt disponibile si daca acestea pot fi personalizate cu configuratii.

Array

Material-UI are toate componentele de care aveti nevoie si este foarte configurabil cu paleta de culori predefinita si componenta <MuiThemeProvider> care va permite sa definiti o tema de culoare personalizata pentru aplicatia dvs.

Dintre sutele de cadre UI disponibile, Material UI este unul dintre cele mai bune cadre UI bazate pe Reactjs, care au cea mai rafinata implementare a Material Design. Cu 678 de colaboratori si 35K stele GitHub, este una dintre cele mai populare si intretinute activ biblioteci.

Am configurat aplicatia mostra furnizata in exemplele de proiect material-ui pentru a stackblitz pentru o demonstratie rapida.

Array

Consultati codul aici.

Personal, consider ca nu este un exemplu excelent pentru a arata cazurile care este capacitatea materialului ui, ci cu siguranta un simplu starter. Site-ul oficial are, de asemenea, o documentatie buna si demonstratii pe componenta, care este o sursa buna de informatii.

• actrice porno italienne www.philanthropycenter.net
• porno story www.tacklehouse.com
• porno xl jvb.bulbright.com
• porno fait maison antos.com
• petite bite porno quarternews.com
• bukkake porno restatsea.com
• porno pere www.aviadome.ru
• filme porno romanesti quickfamilyfoundation.org
• porno plan a 3 sctheatre.biz
• nicki minaj porno personaltravelagent.net
• porno ivoirien manhattanglass.net
• video porno ado allspray.biz
• porno spy wildwesternwear.com
• porno camerounaise chunjiwon.com
• porno sos kaust.net
• porno infirmiere www.nudesirens.com
• liza monet porno usbcyouthopen.net
• flashing porno acktuallythredz.com
• porno insolite www.k2global.com
• jade laroche porno niceshoes.info
• bella thorne porno www.butterbudz.biz
• porno alternatif www.centerpointenergy-arkansas.biz

Bootstrap este unul dintre cele mai populare si utilizate pe scara larga CSS framework. Nu este o surpriza sa ai duetul React si Bootstrap. React Bootstrap este un set de componente React care implementeaza cadrul Bootstrap. React-Bootstrap vizeaza in prezent Bootstrap v3, iar echipa lucreaza activ la Bootstrap v4.

Cu 204 de colaboratori si 12K stele github, este una dintre cele mai populare si intretinute activ biblioteci.

Unfortunatley react-bootstrap nu ofera niciun exemplu de proiect de lucru, dar exista exemple pentru fiecare componenta care pot fi gasite aici.

Am configurat un exemplu de aplicatie pe stackblitz prin compilarea a 2 dintre exemplele independente din documentatie. Consultati codul aici.

UI semantica este un cadru de dezvoltare care ajuta la crearea unor machete frumoase, receptive, utilizand HTML compatibil cu oamenii. Acest cadru este mai influentat de stilul semantic de HTML care are semnificatie pentru fiecare clasa CSS. UI semantic trateaza cuvintele si clasele ca fiind concepte schimbabile. Clasele folosesc sintaxa din limbajul natural, cum ar fi relatia substantiv / modificator, pluralitate, ordinea cuvintelor pentru a avea o legatura intre concepte intuitiv. Semantic foloseste, de asemenea, fraze simple numite comportamente care declanseaza functionalitate.

Semantic UI React este integrarea oficiala React pentru UI Semantic

Cu 175 de colaboratori si 6K stele github, este una dintre bibliotecile populare si intretinute activ.

Nefericita reactie semantica nu ofera niciun exemplu de proiect de lucru, dar exista exemple pentru fiecare componenta care pot fi gasite aici.

Un exemplu de aplicatie care demonstreaza componenta cardului poate fi explorat aici

O alta pene din biblioteca bazata pe Google Material Design. React Toolbox este o biblioteca UI care urmareste conceptele de proiectare a materialelor Google si este construita deasupra unora dintre cele mai moderne propuneri, cum ar fi modulele CSS (scrise in SASS), Webpack si ES6. Biblioteca se integreaza armonios cu fluxul de lucru Webpack si este usor de personalizat si foarte flexibil.

Cu 219 de colaboratori si 7k stele GitHub, este una dintre bibliotecile populare si intretinute activ.

Site-ul oficial gazduieste exemple pentru toate componentele care pot fi explorate aici. Un lucru frumos pe care il vedeti aici este incarcarea caracteristicii locului de joaca , care va ajuta sa explorati caracteristicile si capabilitatile chiar acolo si fara nicio configurare suplimentara.

Un limbaj de proiectare UI de tip enterprise si implementare bazata pe React. Designul furnicilor este un set de componente React de inalta calitate care sunt scrise in TypeScript. Sprijina browser-ul , randarea de pe server si mediile Electron , are multe componente si chiar un tutorial cu Create-react-app

Cu 443 de colaboratori si 24 de stele GitHub, este una dintre bibliotecile populare si intretinute activ.

Puteti consulta aici demonstratiile

La fel ca bootstrap, CSS Framework Foundation este un alt cadru CSS popular. Foundation de la Zurb este o biblioteca foarte bogata in caracteristici si usor de personalizat. Fundatia React este o fundatie implementata ca biblioteca ca componente React.

React Foundation este in esenta infasurarea fiecarei parti a Foundation in componente React reutilizabile, urmand cele mai bune practici ale cadrului. Principalul obiectiv din spatele dezvoltarii React Foundation este usurinta utilizarii si extensibilitatea.

Spre deosebire de alte biblioteci UI pentru dezvoltarea aplicatiilor Reactjs, pe care le-am explorat mai sus, React Foundation are colaboratori foarte limitati si o dezvoltare activa foarte scazuta.

Puteti consulta aici demonstratiile