6 eng yaxshi ReactJS asosidagi UI ramkalari

Dastlab ZeoLearn Blogida nashr etilgan

React (ReactJS) kutubxonasi, bugungi kunda kirish maydonida ishlaydigan har bir kishi uchun kirishga muhtoj emas. Biroq, reaktsiya js haqida ko'proq ma'lumotni bu erda topish mumkin. Ushbu maqolada biz Reactjs ilovalari uchun etakchi interfeyslarni ko'rib chiqamiz. Ushbu reaktiv interfeys komponentlari kutubxonalari tegishli CSS doiraviy amaliyotini amalga oshirdi, chunki reaktsiya komponentlari sifatida sizning rivojlanishingizni osonlashtiradigan va unumli qiladi.

Qani boshladik…

1. UI materiali

MaterialUI - bu Google-ning materiallar dizayni bo'yicha ko'rsatmalariga amal qiladigan reaktsion komponentlar to'plami. Oldindan aniqlangan komponentlar haqida gap ketganda, ayniqsa, UI, biz topishimiz kerak bo'lgan muhim narsalardan biri qancha UI vidjetlari mavjudligi va ularni sozlash orqali sozlash mumkinmi. Material-UI sizga kerakli barcha tarkibiy qismlarga ega va u oldindan aniqlangan ranglar palitrasi va komponentasi bilan sozlanadi, bu sizning ilovangiz uchun ranglarning mavzusini aniqlashga imkon beradi.

UIdagi yuzlab UI ramkalar ichida Material UI Moddiy dizaynning eng aniq amalga oshirilishiga ega bo'lgan eng yaxshi Reaktjlarga asoslangan UI ramkalaridan biridir. 678 ta hissa qo'shuvchilar va 35K GitHub yulduzlari bilan eng mashhur va faol ravishda xizmat ko'rsatadigan kutubxonalardan biri.

Men tezkor namoyish uchun stackblitz-ga material-ui loyihasi misollarida keltirilgan namunaviy dasturni o'rnatdim. Kodni mana bu erga qarang.

Men shaxsan u ui materialining imkoniyatlari nimada ekanligini namoyish etish uchun juda yaxshi namuna emasligini his qilaman, lekin albatta oddiy boshlang'ich. Rasmiy veb-sayt shuningdek, yaxshi ma'lumot manbai bo'lgan har bir komponent uchun yaxshi hujjatlar va demolarga ega.

2. Bootstrapni reaktsiya qiling

Bootstrap - bu eng mashhur va keng tarqalgan CSS ramkasidir. React va Bootstrap duetiga ega bo'lish ajablanarli emas. React Bootstrap - bu Bootstrap doirasini amalga oshiradigan React komponentlari to'plami. React-Bootstrap hozirda Bootstrap v3-ni nishonga oladi va guruh Bootstrap v4 ustida faol ishlamoqda.

204 ishtirokchilari va 12K github yulduzlari bilan u eng mashhur va faol ravishda xizmat ko'rsatadigan kutubxonalardan biridir.

Afsuski, reaktsiyani ishga tushirish chizig'i hech qanday loyihaning namunasini taqdim etmaydi, ammo har bir komponent uchun misollar bu erda mavjud.

Men stackblitz-ga namunaviy dasturni o'rnatdim va hujjatlardan 2 ta mustaqil misollarni to'pladim. Kodni mana bu erga qarang.

3. Semantik UI

Semantik UI insonga do'stona HTML-dan foydalanib, chiroyli va sezgir sxemalarni yaratishga yordam beradigan rivojlanish doirasidir. Ushbu tizimga har bir css sinf uchun ma'no beradigan HTML-ning semantik uslubi ko'proq ta'sir qiladi. Semantik UI so'zlar va sinflarni almashinadigan tushunchalar sifatida qabul qiladi. Sinflar tabiiy tildan sintaksisdan ot va modifikator aloqalari, ko'plik, so'z tartibi kabi tushunchalar o'rtasida intuitiv ravishda bog'lanish uchun foydalanadi. Semantik, shuningdek, funktsionallikni qo'zg'atadigan xatti-harakatlar deb nomlangan oddiy iboralarni ham ishlatadi.

Semantik UI reaktsiyasi - bu Semantik interfeys uchun rasmiy reaktsiya birlashmasi

175 ishtirokchilar va 6K github yulduzlari bilan u eng mashhur va faol ravishda xizmat ko'rsatadigan kutubxonalardan biridir.

Afsuski, semantik reaktsiyalar biron bir loyihaning namunasini taqdim etmaydi, ammo har bir komponent uchun misollar bu erda mavjud.

Karta komponentlarini namoyish etadigan namunaviy dasturni bu erda o'rganish mumkin

4. Asboblar qutisi

Google Material Design asosidagi kutubxonadagi yana bir yangilik. React Toolbox - bu Google-ning Material Design kontseptsiyalariga amal qiladigan UI kutubxonasi va CSS Modullari (SASS-da yozilgan), Webpack va ES6 kabi ba'zi eng zamonaviy takliflar ustiga qurilgan. Kutubxona Webpack ish jarayoni bilan uyg'unlashadi va uni oson sozlash mumkin va juda moslashuvchan.

219 ta hissa qo'shgan va 7k GitHub yulduzlari bilan u eng mashhur va faol ravishda xizmat ko'rsatadigan kutubxonalardan biridir.

Rasmiy veb-saytda bu erda o'rganilishi mumkin bo'lgan barcha komponentlar uchun namunalar mavjud. Siz ko'rgan yaxshi narsa bu o'yin maydonchasi xususiyati bo'lib, u erda siz biron bir qo'shimcha sozlashsiz xususiyatlar va imkoniyatlarni o'rganishga yordam beradi.

5. Chumoli dizayni

Korxona sinfidagi UI dizayn tili va reaktsiyaga asoslangan amalga oshirish. Chumoli dizayni TypeScript-da yozilgan qutidan tashqari yuqori sifatli React tarkibiy qismlaridan iborat. U brauzerni, server tomonlarni ko'rsatishni va elektron muhitlarni qo'llab-quvvatlaydi, ko'plab tarkibiy qismlarga ega va hatto Create-reaktiv-ilovasi bilan darslikni ham o'z ichiga oladi.

443 ta hissa qo'shuvchilar va 24kg GitHub yulduzlari bilan u eng mashhur va faol xizmat ko'rsatadigan kutubxonalardan biridir.

Siz bu erda demolarga murojaat qilishingiz mumkin

6. Reaktsiya asosi

Yuklash chizig'i singari, CSS frame Foundation boshqa mashhur CSS doirasidir. Zurb nomli fond juda boy va oson sozlanadigan kutubxonadir. React Foundation - bu reaktsiya komponentlari sifatida fond tomonidan amalga oshiriladigan kutubxona.

React Foundation asosan asoslarning eng yaxshi tajribasidan kelib chiqqan holda Jamg'armaning har bir qismini qayta ishlatiladigan reaktsiya tarkibiy qismlariga ajratishdir. React Foundation-ni rivojlantirishning asosiy maqsadi foydalanish uchun qulaylik va kengayishdir.

Reactjs dasturlarini ishlab chiqish uchun boshqa UI kutubxonalaridan farqli o'laroq, biz yuqorida kayd qilgan React Foundation dasturining hissasi cheklangan va faol rivojlanishi juda past.

Siz bu erda demolarga murojaat qilishingiz mumkin