⚛️ 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
2. react-dnd
Крутой Drag&Drop для React.
Набор утилит, которые позволяют создавать сложные интерфейсы с перетаскиванием, сохраняя при этом отвязывание компонентов.
Отличительные особенности:
- идеально подходит для таких приложений, как Trello и Storify, где перетаскивание отвечает за передачу данных между различными частями приложения;
- построен поверх Drag&DropHTML5;
- React DnD использует данные, а не view.
Для установки:
npm i react-dnd
3. react-content-loader
Набор компонентов для легкого создания skeleton loadings (как загрузка карты в Facebook).
Отличительные особенности:
- Plug and play: поставляется с большим количеством пресетов для использования.
- DIY: можно использовать данный софт, чтобы создавать собственные загрузчики.
- Поддержка React Native: тот же API с теми же мощными функциями.
- Легковесный: менее 2 КБ и 0 зависимостей для веб-версии.
Для установки:
npm i react-content-loader
4. antd
Энтерпрайз-класс с UI-дизайном и UI-библиотека React.
Отличительные особенности:
- написан на TypeScript с использованием статических типов;
- в комплект входит пакет ресурсов с дизайном и инструментами разработки;
- крутая кастомизация темы для каждого элемента.
Для установки:
npm i antd
5. gatsby-image
Является компонентом React и специально разработана для работы с запросами к Gatsby GraphQL. Он сочетает в себе возможности обработки изображений с передовыми методами оптимизированной загрузки изображений.
Отличительные особенности:
- сайты с Gatsby не требуют серверов, поэтому вы можете разместить весь сайт на CDN за небольшую плату;
- возможность извлекать данные из любого источника (Markdownфайлы, CMS-ки: Contentfulили WordPress и RESTAPI);
- преимущества статических сайтов без каких-либо ограничений.
Для установки:
npm i gatsby-image
6. react-helmet
Повторно используемый React-компонент, созданный для управления всеми изменениями в заголовке документа. Принимает и выводит простые HTML-теги – очень просто и React-friendly.
Отличительные особенности:
- поддержка всех допустимых тегов: title, base, meta, link и т. д;
- поддержка рендеринга на стороне сервера;
- вложенные компоненты переопределяют повторяющиеся изменения заголовка.
Для установки:
npm i react-helmet
7. Flux
Софт для построения архитектуры приложения и пользовательских интерфейсов с однонаправленным потоком данных.
Отличительные особенности:
- позволяет легко находить ошибки в сложном приложении;
- быстрое время перезагрузки.
Для установки:
npm i flux
8. react-threesixty
React 360 помогает создать завораживающие VR-штуки с помощью React, которые распространяются на настольные компьютеры, мобильные и VR-устройства.
Отличительные особенности:
- упрощает создание сложных пользовательских интерфейсов 360 и VR.
Для установки:
npm i react-threesixty
Дополнительные материалы
- Локализация приложений React с i18next
- Настольный справочник по базовым принципам React
- 12 бесплатных ресурсов для изучения React
- Каркасные экраны: реализация в React
- Изучение React. С чего начать?