6 legjobb ReactJS alapú felhasználói felület

Eredetileg a ZeoLearn Blogban tették közzé

React (ReactJS) könyvtár, amely nem igényel bevezetést manapság, bárki számára, aki az első fejlesztési térben dolgozik. A reagáló js-kel kapcsolatos további részletek itt találhatók. Ebben a cikkben megismerjük a Reactjs alkalmazások vezető felhasználói felületkereteit. Ezek a React UI komponens könyvtárak a CSS keretrendszer gyakorlatait olyan reagált komponensekként hajtották végre, amelyek használatra készek, és ezáltal megkönnyíti a fejlesztést.

Kezdjük el…

1. Anyag UI

A MaterialUI a React alkatrészek halmaza, amely végrehajtja a Google Anyagtervezési Irányelveit. Az előre meghatározott összetevők, különösen a felhasználói felület esetében az egyik fontos dolog, amit meg kell találnunk, hogy hány felhasználói felület-widget érhető el, és ezeket konfigurációkkal testreszabható-e. Az Material-UI rendelkezik minden szükséges összetevővel, és nagyon jól konfigurálható előre meghatározott színpaletta és összetevő segítségével, amely lehetővé teszi az alkalmazás egyedi színtémájának meghatározását.

A több száz felhasználói felület kerete közül az Material UI az egyik legjobb Reactjs-alapú felhasználói felület, amely a Material Design legfinomabb megvalósításával rendelkezik. 678 közreműködővel és 35K GitHub csillaggal ez az egyik legnépszerűbb és legjobban karbantartott könyvtár.

Felállítottam az material-ui projekt példáiban szereplő mintaalkalmazást stackblitzhez egy gyors bemutató céljából. Lásd a kódot itt.

Személy szerint úgy gondolom, hogy nem nagyszerű példa arra, hogy megmutassuk, mi az anyag képessége, de határozottan egy egyszerű indító. A hivatalos weboldalon is megfelelő dokumentáció és demó található összetevőnként, amely jó információforrás.

2. Reakció a Bootstrap

A Bootstrap az egyik legnépszerűbb és legszélesebb körben használt CSS-keretrendszer. Nem meglepő, hogy a React és a Bootstrap duója van. A React Bootstrap egy olyan React összetevő, amely a Bootstrap keretrendszert valósítja meg. A React-Bootstrap jelenleg a Bootstrap v3-at célozza meg, és a csapat aktívan dolgozik a Bootstrap v4-en.

204 közreműködővel és 12K github csillaggal ez a népszerű és aktívan karbantartott könyvtár.

A Unfortunatley react-bootstrap nem nyújt példát működő projektekre, de vannak példák minden összetevőre, amelyek itt megtalálhatók.

Beállítottam egy mintaalkalmazást a stackblitz-re úgy, hogy a dokumentációból 2 független példát összeállítottam. Lásd a kódot itt.

3. Szemantikus felhasználói felület

A szemantikus felhasználói felület fejlesztési keret, amely elősegíti az emberbarát HTML használatával gyönyörű, reagáló elrendezések létrehozását. Ezt a keretet jobban befolyásolja a HTML szemantikai stílusa, amelynek minden css osztályban van értelme. A szemantikus felhasználói felület a szavakat és osztályokat cserélhető fogalmakként kezeli. Az osztályok a természetes nyelv szintaxisát használják, mint például a főnév / módosító kapcsolat, a többes szám, a szórend, hogy a fogalmak között intuitív kapcsolat legyen. A szemantika egyszerű kifejezéseket is használ, úgynevezett viselkedésre, amelyek kiváltják a funkcionalitást.

A Semantic UI React a Semantic UI hivatalos React integrációja

175 közreműködővel és 6K github csillaggal ez az egyik népszerű és aktívan karbantartott könyvtár.

A Unfortunatley reagáló szemantika nem nyújt példát a működő projektekre, de minden alkotóelemre vannak példák, amelyek itt megtalálhatók.

Itt meg lehet vizsgálni egy mintaalkalmazást, amely bemutatja a kártya összetevőjét

4. Reagáljon az Eszköztárra

Egy másik toll a Google Material Design alapú könyvtárban. A React Toolbox egy felhasználói felület könyvtár, amely követi a Google Anyagtervezési koncepcióit, és felépül néhány olyan divatos javaslatra, mint például a CSS-modulok (SASS-ban írtak), a Webpack és az ES6. A könyvtár harmonikusan integrálódik a Webpack munkafolyamatába, könnyen testreszabható és nagyon rugalmas.

219 közreműködővel és 7 000 GitHub csillaggal ez az egyik népszerű és aktívan karbantartott könyvtár.

A hivatalos webhely példákat tartalmaz az összes elemre, amely itt felfedezhető. Szép dolog, amit itt lát: a játszótér funkciója, amely segít felfedezni a funkciókat és képességeket ott és további beállítások nélkül.

5. Hangya tervezése

Vállalati szintű felhasználói felület tervezési nyelv és React-alapú megvalósítás. Az hangya kialakítása a dobozból kiváló minőségű React összetevőkből áll, amelyek TypeScript-ben vannak írva. Támogatja a böngésző, a szerveroldali megjelenítést és az Electron környezeteket, számos összetevővel rendelkezik, és még egy bemutatóval is rendelkezik a Create-react-app segítségével

443 közreműködővel és 24 ezer GitHub csillaggal ez a népszerű és aktívan karbantartott könyvtár.

Itt tekintheti meg a bemutatókat

6. React Alapítvány

A bootstraphoz hasonlóan a CSS Framework Foundation is egy népszerű CSS keretrendszer. A Zurb alapítója nagyon funkciógazdag és könnyen testreszabható könyvtár. A React Alapítvány egy könyvtár által megvalósított Alapítvány, mint React komponensek.

A React Alapítvány alapvetően az Alapítvány minden részének újrahasznosítható React komponensekbe történő csomagolása, a keret bevált gyakorlatait követve. A React Alapítvány fejlesztésének fő célja a könnyű használat és a kiterjeszthetőség.

A Reactjs alkalmazások fejlesztésére szolgáló más felhasználói felület-könyvtárakkal ellentétben a fentiekben felfedezett React Alapítványnak nagyon korlátozott közreműködői és nagyon alacsony az aktív fejlesztése.

Itt tekintheti meg a bemutatókat