⚛️ 8 мощных библиотек React, которые стоит попробовать в 2021 году

Использование правильных библиотек для оптимизации рабочего процесса – залог успеха. Разбирайте, пока горячие – актуальные в 2021 году библиотеки для React.

Перевод публикуется с сокращениями, автор оригинальной статьи Mohit.

Все рассмотренные далее пакеты имеют более 10 000+ звезд на Github.

1.react-select

Отличная альтернатива для компонента Select в React.js.

Представляет собой совершенно новый способ развития мощных компонентов React.js, которые работают из коробки, будучи полностью настраиваемыми.

Отличительные особенности:

  • гибкий подход к данным с настраиваемыми функциями;
  • расширяемый API с Emotion – JS-библиотека, предназначенная для написания CSS-стилей;
  • внедрение компонентов через API для полного контроля над поведением UI;
  • оption groups, поддержка портала, анимация и многое другое.

Для установки:

npm i react-select

react-select

2. react-dnd

Крутой Drag&Drop для React.

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

Отличительные особенности:

  • идеально подходит для таких приложений, как Trello и Storify, где перетаскивание отвечает за передачу данных между различными частями приложения;
  • построен поверх Drag&DropHTML5;
  • React DnD использует данные, а не view.

Для установки:

npm i react-dnd

react-dnd

3. react-content-loader

Набор компонентов для легкого создания skeleton loadings (как загрузка карты в Facebook).

Отличительные особенности:

  • Plug and play: поставляется с большим количеством пресетов для использования.
  • DIY: можно использовать данный софт, чтобы создавать собственные загрузчики.
  • Поддержка React Native: тот же API с теми же мощными функциями.
  • Легковесный: менее 2 КБ и 0 зависимостей для веб-версии.

Для установки:

npm i react-content-loader

react-content-loader

4. antd

Энтерпрайз-класс с UI-дизайном и UI-библиотека React.

Отличительные особенности:

  • написан на TypeScript с использованием статических типов;
  • в комплект входит пакет ресурсов с дизайном и инструментами разработки;
  • крутая кастомизация темы для каждого элемента.

Для установки:

npm i antd

antd

5. gatsby-image

Является компонентом React и специально разработана для работы с запросами к Gatsby GraphQL. Он сочетает в себе возможности обработки изображений с передовыми методами оптимизированной загрузки изображений.

Отличительные особенности:

  • сайты с Gatsby не требуют серверов, поэтому вы можете разместить весь сайт на CDN за небольшую плату;
  • возможность извлекать данные из любого источника (Markdownфайлы, CMS-ки: Contentfulили WordPress и RESTAPI);
  • преимущества статических сайтов без каких-либо ограничений.

Для установки:

npm i gatsby-image

gatsby-image

6. react-helmet

Повторно используемый React-компонент, созданный для управления всеми изменениями в заголовке документа. Принимает и выводит простые HTML-теги – очень просто и React-friendly.

Отличительные особенности:

  • поддержка всех допустимых тегов: title, base, meta, link и т. д;
  • поддержка рендеринга на стороне сервера;
  • вложенные компоненты переопределяют повторяющиеся изменения заголовка.

Для установки:

npm i react-helmet

react-helmet

7. Flux

Софт для построения архитектуры приложения и пользовательских интерфейсов с однонаправленным потоком данных.

Отличительные особенности:

  • позволяет легко находить ошибки в сложном приложении;
  • быстрое время перезагрузки.

Для установки:

npm i flux

flux

8. react-threesixty

React 360 помогает создать завораживающие VR-штуки с помощью React, которые распространяются на настольные компьютеры, мобильные и VR-устройства.

Отличительные особенности:

  • упрощает создание сложных пользовательских интерфейсов 360 и VR.

Для установки:

npm i react-threesixty

react-threesixty

Дополнительные материалы

Источники

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ