Содержание
Ключ к качественному пользовательскому интерфейсу лежит в дизайне, который помогает вам достичь наилучшего графического пользовательского интерфейса. Есть такие разработчики, как я, которые с нуля проектируют компоненты пользовательского интерфейса для моего приложения. К счастью для таких людей, как мы, которые обычно работают с бэкэндом и по какой-то причине должны играть с внешним интерфейсом, существует множество потрясающих фреймворков, которые помогают создавать удивительные пользовательские интерфейсы. Если вы используете React для обработки кода на стороне клиента, хотя фреймворков, подходящих для работы с компонентами в React, не так уж и много, существует пара, в которой есть лучшие из всех известных CSS-фреймворков.
Наслаждайтесь нашей коллекцией из 10 лучших фреймворков пользовательского интерфейса, доступных для потрясающей среды React.js.
10. светокопия
Blueprint — это набор компонентов пользовательского интерфейса React, которые охватывают большинство общих элементов интерфейса, шаблонов и взаимодействий в Интернете. Использование Blueprint гарантирует, что вы получите элегантный и простой в использовании пользовательский интерфейс, что позволит вам сосредоточиться на создании продукта, а не на элементарных элементах, которые его составляют. Повысьте свою производительность с помощью набора высококачественных базовых компонентов, которые можно использовать «из коробки», а универсальные концепции дизайна и модификаторы применимы ко всем компонентам. Blueprint был разработан с нуля для настольных приложений, поэтому он не был тщательно протестирован в мобильных веб-браузерах (iPad работает нормально).
9. красавица
Belle предоставляет вам набор компонентов React, таких как Toggle, ComboBox, Rating, TextInput, Button, Card, Select и вскоре многие другие. Все компоненты оптимизированы для работы как на мобильных устройствах настольные устройства. Стили можно настраивать на двух уровнях. Вы можете настроить базовые стили всех компонентов, а также изменить каждый из них в отдельности.
8. Офисный пользовательский интерфейс Fabric
Fabric является официальной интерфейсной средой для создания приложений, которые органично вписываются в Office и Office 365. Fabric является официальной структурой UX для надстроек Office. С Fabric надстройки легко сочетаются с Word, Excel, PowerPoint и Outlook. Надежные, современные компоненты Fabric созданы на основе инфраструктуры React. Просмотрите список компонентов, чтобы увидеть строительные блоки, доступные с помощью Fabric React. Компоненты Fabric помогают быстро и легко получать кнопки, элементы навигации и многое другое, которые выглядят как Office. Они также содержат дополнительную функциональность, которая помогает вашему приложению работать как Office.
7. Реагировать MD
Целью React MD является создание полностью доступного веб-сайта в стиле дизайна материалов с использованием React Components и Sass. С разделением стилей в Sass вместо встроенных стилей должно быть легко создавать пользовательские компоненты с существующими стилями. Сайт документации может использоваться для просмотра примеров в реальном времени, примеров кода и общей документации.
6. React Boostrap
React Bootstrap — это перестроенный для React самый популярный интерфейсный фреймворк. React-Bootstrap — это библиотека многократно используемых интерфейсных компонентов. Вы получите внешний вид Twitter Bootstrap, но с гораздо более чистым кодом, через фреймворк Facebook React.js. Библиотека компонентов React-Bootstrap пытается следовать философии React.js, согласно которой в одном месте должен быть определен один элемент функциональности. Просмотрите текущую библиотеку React-Bootstrap на странице компонентов.
5. Элементальный интерфейс
Elemental UI — это UI Toolkit для веб-сайтов и приложений React.js. Пользовательский интерфейс Elemental создан для решения реальных требований в проектах, над которыми мы работаем, и для использования в платформе управления контентом node.js KeystoneJS. Целью Elemental UI является создание набора функциональных и непонятных компонентов, которые полезны сами по себе или вместе, с ненавязчивым стилем по умолчанию и гибкими возможностями тем. Elemental предназначен для установки из npm и встроен в ваш проект с помощью browserify или webpack. Вы можете настроить его, в том числе и на нашу LESS.
4. Муравей Дизайн
Ant Design предлагает язык дизайна пользовательского интерфейса корпоративного класса для веб-приложений с набором высококачественных компонентов React из коробки. Он написан на TypeScript с полными определенными типами. Он работает в современных браузерах и Internet Explorer 9+ (используя полифиллы) и поддерживает рендеринг на стороне сервера. Во время разработки вам может понадобиться скомпилировать и отладить код JSX и ES2015, и даже прокси-часть некоторых запросов на ложные данные или некоторые внешние сервисы. И все это должно быть сделано с быстрой обратной связью, предоставляемой посредством горячей перезагрузки изменений.
3. React Toolbox
React Toolbox — это набор компонентов React, который реализует спецификацию Google Material Design. Он построен на основе самых модных предложений, таких как CSS-модули (написанные на SASS), Webpack и ES6. Библиотека гармонично интегрируется с вашим рабочим процессом Webpack, легко настраивается и очень гибка.
React Toolbox использует CSS Модули по умолчанию импортировать таблицы стилей, написанные в SASS. Если вы хотите импортировать компоненты, уже связанные с CSS, ваш модуль-модуль должен иметь возможность требовать эти модули SASS.
2. Реагируйте на семантический интерфейс
Semantic UI React является официальной интеграцией React для Семантический интерфейс. Семантический пользовательский интерфейс рассматривает слова и классы как взаимозаменяемые понятия. Классы используют синтаксис из естественных языков, таких как отношения существительное / модификатор, порядок слов и множественность, чтобы интуитивно связать понятия. Semantic использует простые фразы, называемые поведением, которые запускают функциональность. Любое произвольное решение в компоненте включено как параметр, который разработчики могут изменить. Он оснащен интуитивно понятной системой наследования и высокоуровневыми переменными тем, что дает вам полную свободу проектирования. Он полностью свободен от jQuery и использует простой декларативный API.
1. MaterialUI
MaterialUI — это набор компонентов React, которые реализуют рекомендации Google по разработке материалов. Есть 2 проекта, которые вы можете посмотреть, чтобы начать. Их можно найти в папка примеров. Эти проекты являются базовыми примерами, которые показывают, как использовать компоненты Material-UI в вашем собственном проекте. Первый проект использует browserify для связывания модулей и глоток для автоматизации задач JS, в то время как второй проект использует WebPack для комплектации и сборки модулей. Вы можете включить Material-UI в свой проект, просто запустив npm install material-ui из каталога вашего проекта, а затем с использованием необходимых вам компонентов Material-UI.
Похвальные грамоты
React Material Bootstrap
Material Design for Bootstrap (MDB) — это бесплатный, мощный набор материалов для пользовательского интерфейса Design Bootstrap 4. Это одна из самых всеобъемлющих структур проектирования материалов, созданных на сегодняшний день. Он доступен для различных сред или библиотек, таких как ReactJS, Vue.js, jQuery и Angular. React-версия Material Bootstrap основана на последней Bootstrap 4 и React 15.6.1, что означает абсолютно нет jQuery. Благодаря более чем 400+ элементам пользовательского интерфейса материала, 600+ значкам материала, 74 CSS-анимациям, файлам SASS и многим другим компонентам, версия React широко известной начальной загрузки материалов будет уверена в списке вариантов пользовательского интерфейса для реализации в ваших новых проектах. ,
Реакция осколков
Если вы с самого начала работали с простым jQuery и Bootstrap в качестве веб-разработчика, вы наверняка знаете Shards, современный комплект Bootstrap 4 UI, наполненный дополнительными шаблонами и компонентами. Версия Shards для React оснащена той же современной системой дизайна, которая делает Shards особенными, чтобы вы могли удивить своих пользователей плавными микровзаимодействиями и прекрасным общением с пользователем. Реакция Shards обеспечивает поддержку наборов значков Material и Fontawesome. Он также поставляется со всеми пользовательскими компонентами, доступными в Shards, включая датчики, ползунки диапазонов, переключатели и многое другое.
Реакция Shards является открытым исходным кодом на GitHub и доступна в виде пакета NPM. Однако вы также можете скачать его здесь и получить доступ к исходным файлам ядра, чтобы вы могли испачкать руки и расширить набор в соответствии со своими потребностями.
Если вы знаете еще одну замечательную платформу с открытым исходным кодом для ReactJS, пожалуйста, поделитесь ею с сообществом в поле для комментариев.
