В React есть библиотека компонентов; библиотека компонентов представляет собой план проектирования, который объединяет компоненты для создания многомерных комбинаций; проектирование компонентов осуществляется посредством разборки, индукции и реорганизации элементов в функциях и визуальных выражениях и основано на многоразовом использовании. Целью является создание стандартизированных компонентов. Часто используемые библиотеки компонентов для реагирования включают Bulma, AntDesign, Bootstrap и т. д.
Операционная среда этого руководства: система Windows 10, версия 17.0.1, компьютер Dell G3.
Проектирование компонентов заключается в разборке, обобщении и реорганизации элементов в функциях и визуальных выражениях, а также в формировании стандартизированных компонентов с целью повторного использования. Весь план проектирования строится посредством многомерной комбинации, и эти компоненты организуются вместе. формируется.
Часто используемые библиотеки компонентов реагирования:
Муравей Дизайн
Ссылка на проект: Ant Design
Размер пакета (из BundlePhobia): 1,2 МБ после минификации, 349,2 КБ после минификации + сжатие gzip, уменьшите размер путем встряхивания дерева.
преимущество:
AntDesign поставляется с обширной вспомогательной документацией, имеет сообщество, включая отдельный проект (AntDesignPro) с готовыми шаблонами;
Библиотека пользовательского интерфейса, которую можно использовать для быстрого проектирования серверных/внутренних приложений.
недостаток:
отсутствие доступности;
Оно велико и, как ожидается, окажет большое влияние на производительность;
Загрязните свой CSS (ожидайте добавления !important, чтобы предотвратить стилизацию ваших компонентов, отличных от Ant).
Бутстрап
На самом деле я в основном думаю о Bootstrap как о библиотеке пользовательского интерфейса. Он не принесет вам никаких наград за дизайн, но его можно использовать для реализации некоторых передовых проектов и минимально жизнеспособных продуктов.
Но это зависит от того, для чего вы хотите его использовать. Если вы новичок в React, это отличная библиотека для начала. Более опытные разработчики могут рассмотреть стилизованные компоненты/Emotion.
Есть две популярные библиотеки с привязками React для Bootstrap, лично я использую только Reactstrap.
Ссылка на проект: React Bootstrap
Размер пакета (из BundlePhobia): 111 КБ после минификации, 34,4 КБ после минификации + gzip, уменьшить размер путем встряхивания дерева
Ссылка на проект: Reactstrap
Размер пакета (из BundlePhobia): 152,1 КБ после минификации, 39,4 КБ после минификации + сжатие gzip, уменьшить размер путем встряхивания дерева
преимущество:
Библиотека Bootstrap с привязками React, которая всем нравится;
Легко настраивается с помощью CSS-in-JS;
Он существует достаточно давно, поэтому вам не нужно беспокоиться об ошибках/проблемах;
Приступайте к работе быстро;
Здесь нет зависимости от jQuery, поскольку она была полностью переработана в React.
недостаток:
Это Bootstrap: если вы его не настроите, ваш сайт будет выглядеть как любой другой.
Бульма
Bulma отличается от других библиотек, представленных в этой статье, поскольку Bulma представляет собой чистый CSS-фреймворк и не требует JS. Вы можете использовать классы из Bulma напрямую или использовать библиотеку-оболочку, такую как реакции-bulma-компоненты.
Ссылка на проект: Булма
Ссылка на проект: реакция-bulma-компоненты
Размер пакета (из BundlePhobia): минифицировано 179 КБ, минифицировано 20,1 КБ + сжато gzip.
преимущество:
Ваш сайт не будет выглядеть как Bootstrap;
Идеально подходит для быстрого начала работы;
Современные функции (основанные в основе Flexbox/Grid).
недостаток:
Доступность. Некоторые библиотеки придерживаются рекомендаций WCAG, но не так строго, как другие.
Пользовательский интерфейс чакры
Ссылка на проект: ChakraUI
Размер пакета (из BundlePhobia): 326,2 КБ после минификации, 101,2 КБ после минификации + сжатие gzip, уменьшить размер путем встряхивания дерева
преимущество:
Доступность: в соответствии с рекомендациями WAI-ARIA компоненты используют теги aria;
Работает на сервере Discord;
Легко настраивается (с поддержкой тем);
Высокая модульность, поэтому встряхивание дерева фактически удалит код, который вы не используете.
недостаток:
Совсем новый.
Уведомление:
Он очень близок к версии 1, поэтому обратите внимание на критические изменения после версии 0.8.0.
Материальный интерфейс
MaterialUI — одна из моих ненавистных библиотек. В прошлом это помогало мне справляться с некоторыми очень напряженными сроками выполнения проектов, но в конце концов я всегда справлялся с ними как можно быстрее.
Раньше вы могли настраивать стили MaterialUI только путем написания JSS, но, к счастью, теперь вы можете переопределять стили, используя styled-компоненты и Emotion.
Ссылка на проект: Пользовательский интерфейс материала
Размер пакета (из BundlePhobia): 325,7 КБ минифицировано, 92 КБ минифицировано + сжато gizp, уменьшено за счет встряхивания дерева
преимущество:
Полная документация
Библиотека иконок огромна
Простой и удобный в использовании (ситуация в начале)
недостаток:
Настраивать сложно и больно, но необходимо (для улучшения визуала);
Производительность: будет отображаться слишком много узлов DOM;
Ваше приложение будет выглядеть как продукт Google (для некоторых это может выглядеть профессионально).
Семантический интерфейс
Ссылка на проект: Семантический интерфейс
Семантический интерфейс-React
Размер пакета (из BundlePhobia): 300,8 КБ после минификации, 80,9 КБ после минификации + сжатие gzip, уменьшите размер путем встряхивания дерева.
преимущество:
Компонуемый (передача компонентов в качестве опоры)
Легко настроить
Полезная документация
Пользователь хорошо известен (используется внутри компании Netflix и используется в продуктах, выпущенных Amazon).
Поддержка TypeScript
недостаток:
Потенциальная неопределенность проектов с открытым исходным кодом.
Посмотреть проблему:
https://github.com/Semantic-Org/Semantic-UI/issues/6109
https://github.com/Semantic-Org/Semantic-UI/issues/6413
Форк, управляемый сообществом:
https://github.com/fomantic/Fomantic-UI
Почетное упоминание
Охватить пользовательский интерфейс
ReachUI — это низкоуровневая библиотека компонентов, которая позволяет разработчикам встраивать доступные компоненты React в свои системы проектирования.
Размер пакета недоступен, поскольку каждый компонент экспортируется индивидуально как отдельный пакет npm.
Реакит
Reakit — еще одна библиотека компонентов низкого уровня. Технически это библиотека пользовательского интерфейса, но в нее не входит CSS. Так что стайлинговое решение все равно нужно найти.
Размер пакета (из BundlePhobia): 119,9 КБ после минификации, 32,1 КБ после минификации + сжатие gzip, уменьшите размер путем встряхивания дерева.
Ребас
Я давно слежу за Ребассом. Это мощная библиотека компонентов, которая не имеет темы, но вы можете легко изменить тему. Пример в действии см. в демо-версии.
Ссылка на проект: Ребасс
Размер пакета (из BundlePhobia): 43 КБ после минификации, 14,4 КБ после минификации + сжатия gizp, уменьшите размер путем встряхивания дерева.