- 3D
- Accessibility
- Animation
- Возможности браузера
- Библиотеки запроса данных
- Визуализация данных
- Forms
- Mocking APIs
- State Management
- Testing
- Videos
Ни для кого не секрет, что у React есть проблема с обнаружением библиотеки.
Хоть количество звезд в GitHub и еженедельные загрузки в npm могут быть хорошей отправной точкой для поиска качественных библиотек, обычно тебе приходится пробираться через множество Reddit, хакерских новостей, dev.to и отдельных сообщений в блогах, чтобы найти лучшие.
В этой (постоянно обновляемой) статье я добавлю библиотеки (за исключением библиотек компонентов), о которых стоит поговорить.
3D
react-three-fiber - это threejs для React в web и react-native.
Скорее всего, если ты видел действительно классную 3D-анимацию на сайте, вероятно, она была построена на three.js - react-three-fiber даёт тебе возможность подключиться к React при создании 3D-сцен. Также стоит изучить Next.js + Tailwind.
Accessibility
React Aria предоставляет хуки, которые обеспечивают доступность компонентов, поэтому всё, о чем нужно беспокоиться, - это дизайн и стиль.
Пример использования - useButton:
import { useButton } from '@react-aria/button';
function Button(props) {
let ref = React.useRef();
let { buttonProps } = useButton(props, ref);
return (
<button {...buttonProps} ref={ref}>
{props.children}
</button>
);
}
<Button onPress={() => alert('Button pressed!')}>Press me</Button>;Animation
Анимация добавляет душу скучным вещам. Эти библиотеки позволяют создавать веб-приложение, эквивалентное Intro Animation от Pixar, но на React.
Обе библиотеки имеют схожие API-интерфейсы и поддерживают физику пружины и временную анимацию, хотя Framer Motion, похоже, чаще используется на GitHub.
Framer Motion - это библиотека анимации и жестов, созданная Framer. Дополнительным преимуществом Framer Motion является то, что дизайнеры могут создавать анимацию во Framer, а затем передавать проекты для точной реализации с использованием собственной библиотеки Framer.
React Spring использует физику пружины, а не временную анимацию для анимации компонентов. По сравнению с Framer Motion, React Spring находится в разработке дольше, с большим количеством участников с открытым исходным кодом.
Возможности браузера
Вас когда-нибудь просили реализовать функционал, который кто-то из продуктовой группы видел на другом веб-сайте и посчитал крутым? Эти библиотеки экономят время на создание этих функций.
useClippy - это React хук, который позволяет читать и писать в буфер обмена пользователя. Особенно полезно для улучшения UX; позволяет уберечь пользователей от двойного щелчка по полям данных, предоставив им кнопку для копирования значений.
ReactPlayer - потрясающая библиотека, которая позволяет вставлять видео из основных источников (YouTube, Facebook, Twitch, SoundCloud и другие) и определять собственные элементы управления видео.
React Toastify позволяет добавлять причудливые уведомления из приложения (например, уведомление «Сообщение отправлено» в Gmail) в React приложение с помощью всего четырех дополнительных строк кода.
Библиотеки запроса данных
Тебе может быть интересно, зачем вообще нужна библиотека для запроса данных, если можно использовать useEffect и fetch(). Короткий ответ заключается в том, что эти библиотеки также обрабатывают кеширование, загрузку и состояние ошибок, избегая избыточных сетевых запросов и многое другое.
Ты можешь потратить сотни часов на реализацию этих функций в менеджере состояний, подобном Redux, или просто установить одну из этих библиотек.
React Query позволяет запрашивать данные из одной и той же конечной точки API (например, api/users/1) через несколько компонентов, не вызывая множественных сетевых запросов.
Подобно React Query (см. сравнение), SWR - еще одна библиотека для запроса данных, которую стоит проверить. SWR имеет дополнительную безопасность, так как Vercel использует его в производстве как часть своей платформы.
Визуализация данных
Если ты когда-либо использовал популярную библиотеку диаграмм, такую как Recharts или Charts.js, ты знаешь, что на удивление легко достичь пределов того, что библиотека может сделать для тебя.
visx отличается тем, что предоставляет React компоненты более низкого уровня, которые намного ближе к D3, чем другие библиотеки диаграмм. Это упрощает создание твоей собственной многократно используемой библиотеки диаграмм или гипер-настраиваемых диаграмм.
Forms
React Hook Form отличается от других форм библиотек тем, что по умолчанию ты не создаешь контролируемые компоненты и не следишь за их состоянием. Это означает, что производительность приложения не будет снижаться по мере добавления дополнительных полей в форму.
Вдобавок ко всему, это, вероятно, одна из лучших документированных библиотек - в каждом примере есть CodeSandbox, что позволяет легко выполнить форк и опробовать свой конкретный вариант использования.
Formik - популярное решение для создания форм, так как он предоставляет многоразовый компонент, в котором можно просто использовать его API для обработки трех наиболее раздражающих частей при построении форм:
- получение значений внутри формы и вне его состояния;
- сообщения о проверке и ошибках;
- обработка отправки формы.
Mocking APIs
Ты, вероятно, можешь утверждать, что имитирующие библиотеки больше относятся к тестовым утилитам, но они также добавляют преимущества во время разработки. Хоть они специально и не связаны с React, но могут быть чрезвычайно полезны, когда нужны динамические ответы от имитируемых конечных точек.
MSW - это библиотека, которая позволяет имитировать как REST, так и GraphQL API; использует service workers для генерации реальных сетевых запросов.
Чем это круто?
Ты действительно можешь использовать MSW как часть рабочего процесса разработки независимо от выбора технологии, а не только во время тестирования! Это настолько круто, что Kent C. Dodds написал об этом целую статью.
Короче говоря, ты можешь использовать MSW, чтобы экспериментировать с созданием функций внешнего интерфейса до того, как он будет готов, и смоделировать свой сервер для тестов.
State Management
С первых дней Redux, в управлении состоянием было немало инноваций. Стоит взглянуть ещё раз, если ты заинтересован в использовании глобального состояния.
Jotai описывает себя как примитивное решение для управления состоянием для React и конкурента Recoil. Это довольно минималистично - меньше API для изучения; и если ты понимаешь хук useState в React, ты, вероятно, поймешь хук Jotai useAtom.
Mobx - это глобальная библиотека управления состоянием, и чтобы к ней привыкнуть требуется немного изменить ментальную модель. Однако, как только привыкнешь, Mobx предоставит решение для управления состоянием и распространения изменений без шаблона.
Recoil. Представь, что Redux встречается с React Hooks, без шаблонов.
Redux Toolkit (или RTK) - это официальный, уверенный способ управлять своим состоянием с помощью Redux.
RTK значительно сокращает количество шаблонов, необходимых для использования Redux, обеспечивает разумные значения по умолчанию и сохраняет ту же неизменную логику обновления, которую мы знаем и любим.
XState - библиотека, которая позволяет формализовать приложение React как конечный автомат.
Конечные автоматы - не особо новая концепция, но разработчики только недавно начали понимать, что, возможно, наши приложения могли бы быть менее глючными, если бы мы четко определяли состояния, в которых они могут находиться, и входные данные, необходимые для перехода между состояниями.
XState также создает диаграммы на основе конфигурации xstate приложения: твоя документация будет обновляться по мере того, как кодишь.
Zustand - ещё одна библиотека, которая стремится быть простой и незамысловатой. Основное отличие состоит в том, что ты используешь хуки в качестве основного способа получения состояния и он не требует привязки приложения к context providers.
Testing
React Testing Library (RTL) - библиотека тестирования по умолчанию, которая поставляется с приложением create-react-app.
RTL заменяет Enzyme в тестовом стеке. В то время как обе библиотеки предоставляют методы для рендеринга компонентов React в тестах, RTL предоставляет функции, которые уводят разработчиков от деталей реализации тестирования в сторону функциональности.
Videos
Remotion позволяет снимать видеоролики о рендеринге React компонентов - будь то получение данных из API и их отображение, или показ классной анимации.