6 най-добри UI рамки, базирани на ReactJS

Първоначално публикуван в блога ZeoLearn

React (ReactJS) библиотека, която днес не се нуждае от въведение за всеки, който работи в предното пространство за развитие. Повече подробности за реакцията js обаче можете да намерите тук. В тази статия ще проучим водещите UI рамки за Reactjs приложения. Тези библиотеки на компонентите на React UI са внедрили съответните CSS рамкови практики като реагиращи компоненти, които са готови за използване, които правят вашето развитие по-лесно и продуктивно.

Да започваме…

1. Материален потребителски интерфейс

MaterialUI е набор от реагиращи компоненти, които изпълняват Насоките за дизайн на материали на Google. Когато става въпрос за предварително дефинирани компоненти, по-специално потребителски интерфейс, едно важно нещо, което трябва да намерим, е колко Uid джаджи са налични и дали те могат да бъдат персонализирани с конфигурации. Material-UI има всички необходими компоненти и е много конфигурируем с предварително определена цветова палитра и компонент , който ви позволява да определите персонализирана цветова тема за вашето приложение.

От стотиците рамки на потребителския интерфейс, Material UI е една от най-добрите UI рамки, базирани на Reactjs, които имат най-изисканата реализация на Material Design. Със 678 сътрудници и 35K GitHub звезди, това е една от най-популярните и активно поддържана библиотека.

Настроих примерното приложение, предоставено в примерите на материал-ui проект, за да стекирате близки за бърза демонстрация. Вижте кода тук.

Аз лично смятам, че не е чудесен пример за показване на случая каква е способността на материалния интерфейс, но определено е обикновен стартер. Официалният уебсайт също има добра документация и демонстрации за всеки компонент, което е добър източник на информация.

2. Реагирайте Bootstrap

Bootstrap е една от най-популярните и широко използвани CSS рамки. Не е изненада да имаме дуета на React и Bootstrap. React Bootstrap е набор от React компоненти, които изпълняват Bootstrap рамката. В момента React-Bootstrap е насочен към Bootstrap v3 и екипът активно работи върху Bootstrap v4.

С 204 сътрудници и 12K звезди на Github това е една от популярните и активно поддържана библиотека.

Unfortunatley react-bootstrap не предоставя никакъв работен пример за проект, но има примери за всеки компонент, които можете да намерите тук.

Настроих примерно приложение на stackblitz, като компилирам 2 от независимите примери от документацията. Вижте кода тук.

3. Семантичен потребителски интерфейс

Semantic UI е рамка за разработка, която помага да се създадат красиви и отзивчиви оформления, като се използва човешкият HTML. Тази рамка е по-повлияна от семантичния стил на HTML, имащ значение за всеки клас css. Семантичният потребителски интерфейс разглежда думите и класовете като заменяеми понятия. Класовете използват синтаксис от естествен език като връзка на съществително / модификатор, множествено число, ред на думите, за да имат връзка между понятията интуитивно. Semantic също използва прости фрази, наречени поведения, които задействат функционалност.

Semantic UI React е официалната интеграция React за Semantic UI

Със 175 сътрудници и 6K звезди на Github това е една от популярните и активно поддържана библиотека.

Семантичното реагиране на нещастие не дава никакъв работен пример за проект, но има примери за всеки компонент, които можете да намерите тук.

Примерно приложение, което демонстрира компонент на карта, може да бъде разгледано тук

4. Реагирайте кутия с инструменти

Друго перо в библиотеката, базирана на Google Material Design. React Toolbox е библиотека с потребителски интерфейс, която следва концепциите на материалния дизайн на Google и е изградена върху някои от най-модерните предложения като CSS модули (написани в SASS), Webpack и ES6. Библиотеката хармонично се интегрира с вашия работен процес в Webpack и е лесно приспособима и много гъвкава.

С 219 сътрудници и звезди от 7k GitHub това е една от популярните и активно поддържана библиотека.

Официалният уебсайт е домакин на примери за всички компоненти, които могат да бъдат проучени тук. Хубаво нещо, което виждате тук, е функция за зареждане на детска площадка, която ви помага да изследвате функции и възможности точно там и без допълнителна настройка.

5. Дизайн на мравки

Език за дизайн на потребителски клас на потребителския интерфейс и реализирано на базата на React. Ant дизайн е набор от висококачествени компоненти React извън кутията, които са написани на TypeScript. Той поддържа браузър, сървър на визуализация и електронни среди, има много компоненти и дори урок с Create-react-app

С 443 сътрудници и 24k GitHub звезди това е една от популярните и активно поддържана библиотека.

Можете да се обърнете към демонстрациите тук

6. React Foundation

Подобно на bootstrap, CSS Framework Foundation е друга популярна CSS рамка. Фондация от Zurb е много богата на функции и лесно персонализируема библиотека. React Foundation е библиотечно внедрена Фондация като React компоненти.

React Foundation е основното обвиване на всяка част от фондацията в компоненти, които могат да се използват отново React, следвайки най-добрите практики на рамката. Основната цел за разработването на React Foundation е лекотата на използване и разширяемостта.

За разлика от други UI библиотеки за разработване на приложения на Reactjs, ние разгледахме, че React Foundation има много ограничени участници и много слабо активно развитие.

Можете да се обърнете към демонстрациите тук