11 лучших библиотек компонентов React в 2021 году

React - одна из самых популярных технологий на сегодняшний день. Это универсальная библиотека пользовательского интерфейса, которая была разработана компанией Facebook в 2011 году и стала открытой в 2013 году. Сегодня React широко используется для создания привлекательных пользовательских интерфейсов.

React состоит из компонентов, которые представляют собой небольшие фрагменты кода, заполняющие определенную часть пользовательского интерфейса, который вы создаете. Думайте об этих компонентах как о функциях JavaScript, которые имеют proporties и state в качестве входа и дают описание пользовательского интерфейса в качестве выхода.

Экосистема React за прошедшие годы невероятно разрослась. Теперь можно создать статический сайт на React с помощью Gatsby, мобильное приложение с помощью React Native и даже десктопные приложения с помощью Electron. Открыть для себя можно многое, но в этой статье мы сосредоточимся исключительно на самых мощных библиотеках компонентов React в 2021 году.

Material-UI

Material-UI - самая популярная библиотека компонентов React на GitHub. Она простая, легкая и создана в соответствии со спецификациями Material Design от Google. В ней есть компоненты для макетов, форм, навигации, отображения данных и многие другие виджеты.

Вы можете стилизовать свои компоненты с помощью @material-ui/styles, CSS-in-JS решения, которое является быстрым, расширяемым и имеет те же преимущества, что и стилизованные компоненты. Material-UI также совместим с другими основными решениями для стилизации, поэтому вам не обязательно использовать его стили.

Ant Design

Ant Design - это китайская компания с библиотекой React, разработанной для веб-приложений крупных компаний. В качестве примера можно привести Tencent, Alibaba и Baidu. Библиотека включает более шестидесяти компонентов и написана на TypeScript с предсказуемыми статическими типами. Англоязычная документация по ней чистая, хорошо написанная и исчерпывающая.

Но Ant Design - это больше, чем просто библиотека React UI. Это целая система проектирования, построенная на ценностях роста, осмысленности, определенности и естественности. Посмотрите на их ресурсы, где представлены наборы пользовательского интерфейса Figma, шаблоны целевых страниц, плагин для Sketch и многое другое.

Blueprint

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

Blueprint написан на TypeScript, как и все примеры кода в их документации. Библиотека поддерживает Chrome, Firefox, Safari, IE 11 и Microsoft Edge. Все IE10 и ниже не поддерживаются из-за отсутствия поддержки CSS Flexbox Layout.

React Bootstrap

React Bootstrap выступает в качестве замены Bootstrap JavaScript. Каждый компонент был создан как настоящий React-компонент, поэтому вам не нужны зависимости jQuery. React Bootstrap является одной из старейших библиотек React и постоянно развивается вместе с самим React.

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

Onsen UI

Onsen UI - это библиотека React, предназначенная для создания гибридных и мобильных веб-приложений на HTML5. Ее компоненты включают в себя вкладки, боковые меню, стековую навигацию, списки, формы и множество других полезных вещей. Все компоненты имеют поддержку iOS и Android Material Design и автоматическую стилизацию, которая меняет внешний вид приложения в зависимости от платформы.

Под своим капотом Onsen состоит из трех слоев: CSS-компоненты, написанные на cssnext, веб-компоненты, написанные на родном JavaScript, и привязки к фреймворку для легкой интеграции с React, а также Vue и Angular.

Evergreen

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

Компоненты Evergreen включают кнопки, кнопки выбора файлов, меню выбора, спиннеры, боковые листы, таблицы и многое другое. Evergreen v5 поддерживает тематизацию только частично, но разработчики выпустят новый api для тематизации в Evergreen v6, который должен сделать тематизацию более мощной и доступной.

Grommet

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

Многие крупные компании использовали Grommet для разработки своих веб-приложений, включая Netflix, Uber, Boeing, HP, Samsung и Twilio. Если вы хотите, чтобы ваш дизайн не казался "гугловским", посмотрите на компоненты Grommet.

Gestalt

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

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

React Virtualized

React Virtualized уникальна в этом списке тем, что служит узкой, специфической цели: эффективному рендерингу больших списков и табличных данных. Это полезная библиотека, если у вас есть список с сотнями, а тем более тысячами элементов или если вы пытаетесь отобразить много столбцов в одной таблице.

Компоненты React Virtualized включают в себя arrowkeystepper, autosizer, cellmeasurer, columnsizer, multigrid и многое другое. Это универсальная библиотека, которая запрограммирована на удовлетворение ваших требований к таблицам.

Semantic UI React

Semantic UI React - это официальный плагин для Semantic UI. Она не содержит jQuery и имеет декларативный API, сокращенные реквизиты, подкомпоненты, дополнения, автоматически управляемый state и многое другое. Библиотека может похвастаться коллекцией из более чем пятидесяти компонентов, включая сегменты, прогресс-бары, переходы, пагинацию и многое другое.

Semantic UI React предоставляет компоненты, а Semantic UI предоставляет темы в виде таблиц стилей CSS. Вы также можете использовать пользовательские иконки, используя <Icon className='my-icon' /> вместо <Icon name='my-icon' />.

Rebass

Rebass - это библиотека примитивных компонентов, созданная с помощью Styled System Брента Джексона. Она создана для создания согласованного пользовательского интерфейса с ограничениями дизайна и определяемыми пользователем масштабами. Занимая всего 4 КБ, Rebass позволяет быстро проектировать и разрабатывать ваши приложения.

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

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

Источник: https://x-team.com/blog/best-react-component-libraries/