6 кращих фреймворків інтерфейсу на базі ReactJS

Спочатку опубліковано на Zeolearn

React (ReactJS) - бібліотека, яка сьогодні не потребує жодного вступу для тих, хто працює в просторі розвитку. Однак більш детально про реакцію js можна знайти тут. У цій статті ми вивчимо провідні рамки інтерфейсу для додатків Reactjs. Ці бібліотеки компонентів React UI реалізували відповідну практику фреймворку CSS як реагуючі компоненти, готові до використання, які роблять вашу розробку легшою та продуктивнішою.

Давайте розпочнемо…

1. Матеріал інтерфейсу користувача

MaterialUI - це набір Реактивних компонентів, які реалізують Правила дизайну матеріалів Google. Що стосується заздалегідь визначених компонентів, особливо інтерфейсу користувача, одна важлива річ, яку нам потрібно знайти, - скільки доступних віджетів користувальницького інтерфейсу та чи можна їх налаштувати за допомогою конфігурацій. У інтерфейсі Material-UI є всі необхідні вам компоненти, і він дуже легко налаштовується за допомогою попередньо визначеної палітри кольорів та компонента , який дозволяє визначити власну кольорову тему для вашої програми.

Із сотень фреймворків інтерфейсу інтерфейсу, Material UI - одна з найкращих рамок інтерфейсу, що базується на Reactjs, яка має найвишуканішу реалізацію Material Design. З 678 учасниками та 35-зірковими зірками GitHub це одна з найпопулярніших і активно підтримуваних бібліотек.

Я створив зразок програми, поданий у прикладах проекту material-ui для складання стекбліцу для швидкої демонстрації. Зверніться до коду тут.

Особисто я вважаю, що це не чудовий приклад, щоб показати, у чому полягає здатність матеріального інтерфейсу, але, безумовно, простий запуск. Офіційний веб-сайт також має хорошу документацію та демонстраційні демонстрації на кожен компонент, що є хорошим джерелом інформації.

2. Реагуйте завантажувальний апарат

Bootstrap - одна з найпопулярніших і широко використовуваних рамок CSS. Не дивно, що дует React і Bootstrap. React Bootstrap - це набір компонентів React, які реалізують Bootstrap. На даний момент React-Bootstrap націлений на Bootstrap v3, і команда активно працює над Bootstrap v4.

З 204 учасниками та 12-зірковими зірочками github це одна з популярних і активно підтримуваних бібліотек.

Unfortunatley react-bootstrap не дає жодного робочого прикладу проекту, але є приклади для кожного компонента, які можна знайти тут.

Я встановив зразок програми на stackblitz, зібравши 2 незалежних прикладу з документації. Зверніться до коду тут.

3. Семантичний інтерфейс користувача

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

Semantic UI React - це офіційна інтеграція React для Semantic UI

З 175 учасниками та 6-зірковими зірочками github це одна з популярних та активно підтримуваних бібліотек.

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

Зразок програми, яка демонструє компонент картки, можна ознайомитися тут

4. Реагуйте Панель інструментів

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

З 219 учасниками та 7-зірковими зірками GitHub це одна з популярних та активно підтримуваних бібліотек.

Офіційний веб-сайт містить приклади всіх компонентів, які можна вивчити тут. Приємне, що ви бачите тут - це функція завантаження на ігровій площадці, яка допомагає вивчити можливості та можливості прямо там і без додаткових налаштувань.

5. Дизайн мурашок

Мова проектування інтерфейсу корпоративного класу та реалізація на основі React. Дизайн мурашок - це набір високоякісних компонентів React, які написані в TypeScript. Він підтримує браузер, серверну візуалізацію та середовище Electron, має багато компонентів і навіть підручник із Create-react-app

З 443 учасниками та 24-зірковими зірками GitHub це одна з популярних і активно підтримуваних бібліотек.

Тут можна посилатися на демонстрації

6. Реагувати фонд

Як і завантажувальний інструмент, CSS Framework Foundation - ще одна популярна рамка CSS. Фонд із Зурба - це дуже багата на багато функцій функціональна бібліотека. React Foundation - це бібліотека, реалізована Фондом як компоненти React.

React Foundation - це, в основному, упаковка кожної частини Фонду в повторно використовувані компоненти React, керуючись кращими методами рамки. Основна мета розвитку React Foundation - це простота у використанні та розширюваність.

На відміну від інших бібліотек інтерфейсу для розробки додатків Reactjs, ми дослідили вище, ніж React Foundation має дуже обмежених учасників та дуже низький активний розвиток.

Тут можна посилатися на демонстрації