Компоненты пользовательского интерфейса React: 15 популярных библиотек

React существует уже более десяти лет. О чем безумно думать. Но, несмотря на свой возраст, библиотека React загружается более 14 миллионов раз в неделю. Есть также более 80 000 других проектов с открытым исходным кодом, работа которых зависит от React.

Многие из этих проектов значительно расширяют возможности React. В частности, разработчики создают настраиваемые элементы и компоненты, которые можно повторно использовать при разработке приложений. На самом деле работа с React почти полностью связана с компонентами. Если вы хотите быстро собрать MVP или создать макет приложения — компоненты сделают процесс быстрым и доступным.

Если вы хотите обновить свое понимание React, прочтите эту статью Линтона Йе.

Стоит ли использовать библиотеку компонентов React UI?

React по своей природе является библиотекой для создания пользовательских интерфейсов. Компоненты в этом контексте — это предварительно созданные элементы пользовательского интерфейса, которые вы можете повторно использовать в процессе разработки. Компоненты React (или любой другой фреймворк) нацелены на ускорение темпов создания приложений.

Но есть и некоторые существенные преимущества использования библиотеки компонентов:

• Темп развития. Поскольку компоненты уже созданы заранее, вы можете быстро собрать рабочий прототип того, как, по вашему плану, должно выглядеть ваше приложение в конечном итоге.
• Производительность. Каждая отдельная библиотека компонентов охватывает такие элементы дизайна, как формы, кнопки и разделы. Таким образом, вы можете не создавать эти элементы самостоятельно.
• Знакомство с дизайном. Креативность имеет место быть, но предоставить знакомый опыт проектирования для ваших пользователей очень важно, если вы хотите обеспечить беспрепятственный опыт.
• Последние стандарты. В частности, большинство современных библиотек разрабатываются таким образом, чтобы компоненты соответствовали последним стандартам доступности.

Что касается потенциального недостатка, то в большинстве случаев вы будете полагаться на поддержку разработчика/сообщества. Кроме того, чтобы освоить новую библиотеку, требуется некоторое время, чтобы освоить новую библиотеку, но это, безусловно, небольшая проблема в более широкой картине.

Что такое дизайн-система?

Компоненты React делятся на множество категорий. Вы можете выбирать из «отдельных» компонентов или из полноценной библиотеки компонентов пользовательского интерфейса. И во многих случаях эти полноценные библиотеки включают полную систему проектирования.

Проще говоря, дизайн-система — это полный набор компонентов, которые можно использовать для создания приложений в любом масштабе. Вы, вероятно, слышали о пользовательском интерфейсе Google Material, системе дизайна Polaris от Shopify и многих других.

Во всяком случае, дизайн-система помогает создать согласованный пользовательский интерфейс за счет повторного использования одних и тех же компонентов пользовательского интерфейса. К счастью, каждая библиотека предлагает уникальную концепцию дизайна.

Простые критерии

При составлении этого обзора я следовал простым критериям, чтобы этот список оставался актуальным и актуальным:

• Полный. Например, каждая библиотека полностью расширена и охватывает широкий спектр элементов пользовательского интерфейса.
• Доступность. Это характерно для опыта разработки. Моя главная забота заключается в том, чтобы с данной библиотекой компонентов было легко работать с точки зрения разработчика.
• Активный. Например, у библиотеки есть как активные подписчики, так и часто обновляемая.

Я также принял во внимание такие вещи, как популярность на GitHub, общий интерес среди учебных пособий по веб-разработке и т. д. Если появится новая библиотека компонентов React и покажет многообещающие результаты, я сделаю все возможное, чтобы в конечном итоге включить ее в этот список.

Давайте посмотрим поближе.

Мантин

Mantine — это обширная библиотека компонентов пользовательского интерфейса, которая охватывает различные элементы и включает крючки для каждого из них. Библиотека, созданная Виталием Ртищевым, с момента своего первого выпуска в 2021 году привлекла большое количество поклонников. Mantine включает родную темную тему, и все компоненты доступны как в светлом, так и в темном стилях.

Всего более 120 пользовательских компонентов.

Документация охватывает широкий спектр вариантов использования, включая использование Mantine с Next.js и Gatsby. Проект находится в активной разработке. И, как говорят некоторые разработчики, «документация не имеет себе равных». .

Чакра

Chakra — одна из самых быстрорастущих библиотек React UI. Предпосылка простых и доступных компонентов означает, что вы можете начать загрузку своих приложений мгновенно. Кроме того, Chakra следует строгим принципам дизайна. Каждый компонент поставляется с уникальным свойством стиля, что означает, что вы можете индивидуально настраивать стили компонентов.

Если сравнить Chakra с более жесткими библиотеками компонентов, становится очевидным, что Chakra работает в непредвзятой среде. Таким образом, масштабирование приложений и интерфейсов становится проще, поскольку вам не нужно зависеть от строгих спецификаций свойств.

Другие примечательные функции включают поддержку TypeScript, доступность через WAI-ARIA и a11y, а также Styled System для оформления реквизита.

Пользовательский интерфейс материала

Нуждается ли Material Design в представлении? Библиотека MUI реализует всю систему дизайна Google в расширенной библиотеке React. MUI также является одной из самых любимых библиотек в этой отрасли. С почти 75 тысячами звезд на GitHub популярность MUI довольно очевидна. Так что же делает его таким успешным?

Прежде всего, MUI работает как бренд, а не как проект с открытым исходным кодом. Это означает, что для защиты целостности бренда компоненты доведены до совершенства. То же самое касается документации, которая не является типичным типом «вот пример» .

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

Гештальт

Гештальт — это « Набор компонентов пользовательского интерфейса React, поддерживающих язык дизайна Pinterest» . Другими словами, это система дизайна, используемая командами разработчиков и дизайнеров Pinterest.

При ближайшем рассмотрении Gestalt отличается от других систем проектирования тем, что предлагает прочную основу, основанную на современных веб-стандартах. Эти стандарты включают доступность, постоянные параметры цвета и глубокую оптимизацию переменных.

А поскольку Pinterest сам использует React в производстве, каждый отдельный компонент в этой библиотеке имеет готовый готовый компонент React, который легко доступен.

ПраймРеакт

PrimeReact может не иметь маркетингового бюджета гигантов, но, тем не менее, это исключительная библиотека. Из-за своей агностической природы PrimeReact не зависит от стиля.

Таким образом, вы можете использовать его с популярными руководствами по стилю, такими как Tailwind, Material, Bootstrap, Arya и другими. Вы можете выбрать базовую тему, используя их функцию конструктора.

Сами компоненты охватывают все, что вы ожидаете от обширной библиотеки. Меню, разнообразные панели, таблицы данных и многое другое. PrimeReact является частью проекта PrimeFaces. Это позволяет вам быстро подключаться к другим их ресурсам, таким как темы и блоки.

Начальная загрузка

Можете ли вы вообще назвать себя фронтенд-разработчиком, если вы никогда не пробовали Bootstrap? Самый любимый набор инструментов для фронтенда ( субъективно ) также имеет библиотеку React. И он был построен с нуля, чтобы быть в первую очередь React. Каждый компонент был специально разработан для включения функций Bootstrap, но не зависит от jQuery.

Одной из примечательных особенностей этой библиотеки является то, что она использует исключительно руководство по стилю Bootstrap.

Таким образом, React Bootstrap можно использовать с проектами, основанными на исходной таблице стилей. Например, вы можете взять тему WordPress на основе Bootstrap и быстро преобразовать ее в дизайн на основе React.

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

Evergreen — первая библиотека в этом списке, которая также является системой дизайна. И это щедро предоставлено Сегментом. Итак, если вы посмотрите на веб-сайт Segment и его продукт, вы поймете, что он построен на базе Evergreen. Тем не менее, эта библиотека не будет привязывать вас к определенной конфигурации или требовать неортодоксальной интеграции.

По их собственным словам, «Вместо того, чтобы создавать фиксированные конфигурации, которые работают сегодня, Evergreen продвигает системы построения, которые предвосхищают новые и меняющиеся требования к дизайну».

Все компоненты также доступны в виде файла Figma.

Библиотека поставляется с двумя пользовательскими темами: классической и стандартной . И у вас есть возможность определить собственные стили для каждой темы или просто создать новую с нуля.

Арко Дизайн

Сообщество китайских разработчиков внесло безупречный вклад в развитие открытого исходного кода. И Арко не исключение. Эта библиотека компонентов корпоративного уровня изменит процесс создания современных интерфейсов. Это также система дизайна, которая гарантирует, что вся ваша основа дизайна следует строгому распорядку.

Arco отличается изысканной философией дизайна. Их система дизайна делает упор на доступность, но также и на пользовательский опыт. Примером этого является их подход к дизайну форм.

Формы в основном пытаются выполнить действие синхронно. Вместо того, чтобы предоставлять внешнее модальное окно, Arco специализируется на обратной связи в реальном времени на основе пользовательского ввода. Их компоненты также можно загрузить для использования в Figma и Sketch соответственно.

Гейст

Пользовательский интерфейс Geist был создан путем разветвления системы дизайна, предоставленной Vercel. Мое первое впечатление от Geist — он довольно минималистичный. Это делает его идеальным для создания целевых страниц и веб-сайтов портфолио.

Хотя, очевидно, он нашел применение как в веб-приложениях, так и в более сложных развертываниях проектов. В последних обновлениях Geist реализовал возможность добавлять темы .

Итак, если вам нравится структура и разнообразие компонентов — реализовать собственный стиль несложно. Вы также можете вызывать пользовательские стили для отдельных компонентов.

Свободный пользовательский интерфейс

React — это настолько прорывная технология, что весь набор Microsoft 365 основан на ней.

Ну, через Fluent UI, разумеется.

Fluent — это взгляд Microsoft на то, какой должна быть библиотека компонентов React.

И, честно говоря, хотя он и предоставляет компоненты пользовательского интерфейса, он делает гораздо больше.

Пакет Fluent UI Utilities включает множество классов, функций и интерфейсов. Это поможет вам создать богатый и интерактивный пользовательский интерфейс. Fluent помогает не только создавать приложения, но и помогает создавать настоящие корпоративные приложения.

Он также управляется Microsoft. Таким образом, о таких вещах, как проблемы с надежностью, не может быть и речи.

Основа

Одной из главных достопримечательностей любой библиотеки компонентов является стиль. Это аккуратно, вызывающе или профессионально? Копирует ли он популярное веб-приложение? Это все правильные вопросы.

Однако Radix UI специализируется на другом подходе.

Radix, низкоуровневая библиотека компонентов, делает упор на доступность и возможность индивидуального стиля. Это достигается за счет введения компонентов в качестве базовой основы.

Поскольку компоненты поставляются в сыром виде , вы можете полностью погрузиться в творческую свободу, чтобы самостоятельно стилизовать их. В свою очередь, Radix предоставляет встроенную реализацию специальных возможностей. Кроме того, компоненты спроектированы так, чтобы быть детализированными, что позволяет интегрировать настраиваемое руководство по стилю.

Реакит

Reakit — это обширный набор инструментов для поддержки многофункциональных веб-приложений. Он доступен по дизайну и реализует структуру в стиле пакета. Это означает, что вы можете использовать отдельные компоненты и отключать другие. В результате размер упаковки может быть очень большим.

Важно отметить, что Reakit не поставляется со стилем по умолчанию. Это также делает его библиотекой компонентов «низкого уровня». Приветственный пользовательский интерфейс с использованием Reakit — это один из примеров того, как вы можете создавать собственные стили. Тем не менее, его не должно быть сложно использовать с чем-то вроде Tailwind.

Полу

Система Semi Design поддерживает весь интерфейс TikTok. Он создан как комплексная библиотека пользовательского интерфейса для предприятий. В частности, помимо модульных компонентов, Semi также публикует свой набор пользовательского интерфейса на Figma. Это помогает ускорить процесс разработки приложений и привлечь к работе разработчиков.

Что касается тем, у Semi есть специальная платформа «сделай сам», созданная для этой цели. Цель состоит в том, чтобы ускорить процесс определения системы, а затем ввести ее в эксплуатацию.

Муравей Дизайн

Влияние современного и доступного с Дальнего Востока трудно не заметить. Ant Design — самая популярная библиотека компонентов на GitHub. По крайней мере, для Реакта. Он не только предоставляет компоненты пользовательского интерфейса, но также является языком дизайна. Подробнее см. здесь.

Одна из вещей, которая делает Ant таким популярным, — это доступные ресурсы. Основная команда, поддерживающая Ant, проделала исключительную работу в этой области. Вы можете выбирать из готовых шаблонов, настраиваемых мобильных интерфейсов или углубляться в документацию.

Кроме того, чтобы свести к минимуму раздувание , Ant реализует стороннюю структуру. Хотя их библиотека охватывает множество элементов пользовательского интерфейса и макетов, добавление дополнительных функций лучше всего выполнять с помощью внешних библиотек. Многие такие библиотеки уже следуют спецификации дизайна Ant.

Реагировать Люкс

React Suite специализируется на легкодоступных компонентах интерактивного дизайна. Он создан специально для использования в проектах в стиле back-end.

Однако вы можете реализовать его в любом интерфейсном рабочем процессе.

Библиотека предоставляет выбор различных тем: светлая, темная и высококонтрастная. Что касается пользовательского стиля — вы будете использовать Less.

Спектр

Adobe будет введена в Зал славы за вклад в дизайн. И неудивительно, что они сделали свою дизайн-систему Spectrum доступной для сообщества open-source. Это та самая система дизайна, которую Adobe использует сама.

Spectrum использует Flex и Grid для реализации макетов. И ряд их компонентов основан на пользовательском макете слотов. Эти «слоты» позволяют стилизовать отдельные макеты и назначать определенные элементы их вложенной группе.

Интересно, что Adobe не рекомендует разработчикам и дизайнерам настраивать свой готовый стиль. Идея состоит в том, что Spectrum уже построен с учетом согласованности. И вместо того, чтобы возиться со стилем, цель должна состоять в том, чтобы создать бесшовный пользовательский интерфейс.

В недавних новостях Adobe также работает над React Aria — набором React Hooks , которые функционируют как примитивы пользовательского интерфейса, ориентированные на доступность. В конечном счете, цель React Aria — дать вам свободу создавать собственную библиотеку компонентов, внедряя передовые методы доступности с самого начала.

Базовая сеть

Одна из главных привлекательных сторон библиотек компонентов заключается в том, что они прошли полевые испытания. А в случае с Base Web — это система дизайна, которую использует Uber. Да, приложение для совместного использования.

Base специализируется на настройке сразу нескольких приложений. Цель состоит в том, чтобы предоставить простое решение для повторного использования компонентов на разных этапах разработки. Так, например, когда вы начинаете работу над новым дизайном — тематическая среда остается прежней.

Все темы с Base могут быть выполнены в JavaScript, Flow и TypeScript.

Пользовательский интерфейс схемы

Приятно видеть, что компании частного сектора, такие как SumUp, вносят столь значительный вклад в разработку открытого исходного кода. Circuit UI — это система проектирования, используемая в инфраструктуре SumUp. Он построен на основе нескольких избранных принципов, которые обеспечивают наилучшее взаимодействие с пользователем.

Эти принципы включают тестирование кода перед фиксацией, полномасштабную доступность, стандартизированное именование и многое другое. Помимо основного пакета, вы также получаете доступ к их токенам дизайна (примитивам) и пакету значков.

NextUI

NextUI использует одну из библиотек — в качестве базы — которую мы рассматривали ранее — Geist. Сложный подход NextUI к деталям позволяет даже неопытным дизайнерам создавать красивые веб-сайты и приложения. И обширная документация прекрасно объясняет, как развернуть ваш первый проект NextUI.

Некоторые примечательные особенности включают в себя:

• Рендеринг на стороне сервера с полной кросс-браузерной поддержкой.
• Встроенные функции доступности с полным соответствием WAI-ARIA.
• Использует стежки, чтобы избежать загрузки ненужного CSS. Загружайте только то, что вам нужно.

И, наконец, это становится чрезвычайно популярным среди пользователей Next.js.

Крошечный пользовательский интерфейс

Tiny UI предоставляет компоненты React Hook, написанные на TypeScript. Главной привлекательностью этой библиотеки компонентов является ее небольшой размер, но настраиваемый характер.

В частности, вы можете предварительно определить пользовательскую тему перед началом нового проекта.

Компоненты варьируются от небольших элементов макета до более конкретных вещей, таких как формы обратной связи, модальные окна и менеджеры конфигурации.

Компонентно-ориентированная веб-разработка

Благодаря всем этим замечательным библиотекам теперь вы можете больше никогда не писать CSS! Помимо шуток, в этом списке есть много отличных вариантов.

Если вы когда-нибудь чувствовали, что отказываетесь от создания сложных проектных структур, эти библиотеки частично уменьшат эту неопределенность. Помимо обширной документации, многие из вышеупомянутых библиотек имеют сильную поддержку сообщества.

Таким образом, вы всегда можете найти дополнительные расширения и реализации.