Сделайте свой пользовательский интерфейс намного лучше

Действительно отличный пользовательский интерфейс - одно из ключевых качеств фронтенд-разработки. Следовательно, инфраструктура React UI может ускорить вашу разработку и облегчить вам жизнь.

Если вы хотите сэкономить время, вот 5 полезных фреймворков для компонентов React UI.

1. Материал-UI

Material-UI - это набор компонентов React, реализующих рекомендации Google по дизайну материалов. Это самая популярная библиотека пользовательского интерфейса React, набравшая около 55 тысяч звезд на GitHub. Компоненты Material-UI работают без дополнительной настройки и не загрязняют глобальную область видимости.

Вы можете установить Material-UI с помощью следующей команды:

npm install @material-ui/core

Если вы хотите взглянуть на примеры с Material-UI, вот ссылка на шаблоны и темы, созданные создателями Material-UI.

2. Семантический интерфейс

Semantic UI - это среда разработки, которая помогает создавать красивые адаптивные макеты с использованием понятного человеку HTML. Это полностью бесплатный jQuery. Кроме того, декларативные API-интерфейсы обеспечивают надежные функции и проверку свойств.

Semantic UI имеет 11k звезд на Github.

Семантический интерфейс можно установить через npm:

npm install --save semantic-ui-react

Пакет Semantic UI CSS автоматически синхронизируется с основным репозиторием Semantic UI, чтобы предоставить облегченную версию Semantic UI только для CSS. Вы можете установить его с помощью следующей команды:

npm install --save semantic-ui-css

После установки импортируйте уменьшенный файл CSS во входной файл приложения:

import 'semantic-ui-css/semantic.min.css'

3. Дизайн муравьев

Дизайн-система с ценностями природы и детерминированности для лучшего пользовательского опыта корпоративных приложений. Ant Design - один из популярных и наиболее поддерживаемых фреймворков для React с 57 тыс. Звезд на Github. Вся клиентская часть Alibaba использует эти фреймворки. Следуя спецификации Ant Design, мы разработали библиотеку React UI antd, которая содержит набор высококачественных компонентов и демонстраций для создания многофункциональных интерактивных пользовательских интерфейсов.

Вы можете установить его с помощью следующей команды:

npm install antd

И после этого вручную импортируйте таблицы стилей:

import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

4. Вечнозеленый

Evergreen - это React UI Framework для создания амбициозных продуктов в сети. Он построен и поддерживается с открытым исходным кодом компанией Сегмент. Semantic UI имеет 9,1 тыс. Звезд на Github.

Evergreen состоит из нескольких компонентов и инструментов, которые вы можете импортировать один за другим. Все, что вам нужно сделать, это установить пакет evergreen-ui:

npm install --save evergreen-ui

5. План

Blueprint - это набор инструментов пользовательского интерфейса для Интернета на основе React. Это лучшая платформа, оптимизированная для создания сложных веб-интерфейсов с большим объемом данных для настольных приложений, работающих в современных браузерах и IE11. Эта структура разработана для метрик, данных, таблиц. На данный момент blueprint является самым мощным фреймворком для работы с большими данными, имеющим около 16 тысяч звезд на Github. Итак, если вы хотите создать приложение с метриками, финансами, торговлей, криптовалютой, это для вас.

Вы можете установить его через npm:

npm install @blueprintjs/core

После установки импортируйте основные файлы css:

// using node-style package resolution in a CSS file
@import "~normalize.css";
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";

Заключение

Спасибо за внимание, надеюсь, вы нашли эту статью полезной. Удачного кодирования!

Ресурсы