Использование правильных библиотек для оптимизации рабочего процесса – залог успеха. Разбирайте, пока горячие – актуальные в 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

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

• Локализация приложений React с i18next
• Настольный справочник по базовым принципам React
• 12 бесплатных ресурсов для изучения React
• Каркасные экраны: реализация в React
• Изучение React. С чего начать?