Сделайте свой пользовательский интерфейс намного лучше
Действительно отличный пользовательский интерфейс - одно из ключевых качеств фронтенд-разработки. Следовательно, инфраструктура 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";
Заключение
Спасибо за внимание, надеюсь, вы нашли эту статью полезной. Удачного кодирования!