Чтобы создавать приложения на React, нужно знать библиотеки, помогающие добавлять те или иные функции. Например, для реализации таких возможностей, как аутентификация и стилизация, придется поискать подходящую стороннюю библиотеку.
В этом подробном руководстве вы найдете все библиотеки, которые я рекомендую использовать в 2024 году, чтобы с легкостью создавать быстрые и надежные приложения на React.
React-фреймворк
Начнем с разговора о том, как вообще создать React-приложение в 2024 году.
Если вы работаете над React-проектом с клиентским рендерингом, то лучший выбор — Vite, который вытеснил устаревший инструмент Create React App.
Если хотите создать полностековый React-проект или проект с серверным рендерингом, следует воспользоваться Next.js — самым полным и популярным полностековым React-фреймворком. В 13-й версии Next.js появился app router, который предоставил такие возможности, как серверные компоненты и серверные действия, позволяющие получать данные и рендерить React-компоненты на сервере.
Если некоторые возможности Next.js покажутся вам слишком сложными, отличной полностековой альтернативой для создания динамических и статических сайтов является Remix.
Если приложение должно быстро загружаться и в основном обслуживать статический контент, то наиболее подходящим вариантом будет Astro. Он позволяет использовать React наряду с другими фреймворками, такими как Vue и Svelte (то есть не привязан к конкретному фреймворку), и предназначен для передачи клиенту минимального количества JavaScript, что приводит к очень быстрой загрузке.
Менеджер пакетов
Чтобы установить любую из библиотек, перечисленных в этом руководстве, понадобится инструмент, называемый менеджером пакетов.
Если у вас установлен Node.js, что необходимо для локального запуска React-проекта на компьютере, можно использовать NPM. Этот менеджер пакетов по-прежнему является отличным выбором в 2024 году наряду с Yarn и PNPM.
Новейшим инструментом, быстро завоевывающим популярность в мире JavaScript, является Bun. Это одновременно и среда выполнения JavaScript (наподобие Node), и менеджер пакетов, как NPM. Однако, как уверяет производитель, Bun — более быстрая альтернатива Node и NPM.
Библиотеки CSS и UI
Как оформить React-проект после его настройки и установления библиотек?
Все вышеупомянутые фреймворки включают базовую поддержку CSS. В 2024 году будет вполне нормальным решением стилизовать React-проект с помощью минималистичного PlainCSS.
Можно использовать таблицы стилей CSS или модули CSS. Однако Tailwind CSS является, пожалуй, самым популярным выбором на данный момент с точки зрения чистого стиля. Придется потратить некоторое время на настройку Tailwind CSS, но он позволит объединять готовые классы в цепочки, чтобы быстро добавлять стили непосредственно в файлы компонентов.
ShadCN — чрезвычайно популярная библиотека пользовательского интерфейса в 2024 году. Она сочетает технологию Tailwind CSS с библиотекой компонентов под названием Radix UI. Библиотеки компонентов, такие как Radix, позволяют легко добавлять компоненты без необходимости писать их код самостоятельно. ShadCN стала популярной библиотекой благодаря усилению контроля над тем, как выглядят компоненты, с помощью Tailwind CSS.
Есть и множество других очень популярных библиотек функциональных компонентов. По-прежнему востребованными остаются Material UI, Mantine и Chakra UI. Выбор библиотеки зависит от того, какой внешний вид вы выбираете для своего приложения. Рекомендую попробовать несколько библиотек пользовательского интерфейса, чтобы понять, какая из них больше отвечает вашему вкусу.
Управление состоянием
В React есть встроенные инструменты, такие как useState и useReducer, для управления состоянием базовых приложениях. Если вы используете Next.js, то управление состоянием при работе с серверными компонентами переходит к URL. Несмотря на эти возможности, вам может понадобиться более точный способ управления состоянием.
Возможно, у вас много фрагментов состояния и необходимо получить больший контроль над тем, как обновления состояния отображают компоненты. В этом случае стоит обратиться к специализированной библиотеке управления состоянием.
Такие библиотеки, как Zustand, Recoil и Jotai, очень похожи друг на друга. Они позволяют управлять состоянием, просто объявляя свойства и методы на объектах. Это самый простой способ управления состоянием компонентов приложения.
Если бы мне пришлось выбирать одну библиотеку управления состоянием для всех своих React-проектов в 2024 году, я бы предпочел Zustand. Вам практически не нужно тратить время на то, чтобы научиться ее использовать. Она также не требует добавления компонента провайдера в приложение, что делает ее очень удобной для использования в любом компоненте.
Получение данных
Управление состояниями и получение данных часто идут рука об руку. При разработке React-приложения с клиентским рендерингом, скорее всего, понадобится библиотека для получения данных.
Лучшим способом получения данных с сервера в React-приложении в 2024 году остается TanStack Query (прежнее название — React Query). TanStack Query обеспечивает тонкий контроль не только над получением данных, но и над временем их получения или повторного получения, а также над кэшированием. И все это можно выполнять с помощью удобных пользовательских хуков, а также очень легко изменять или мутировать данные.
Другой надежной альтернативой является сервис SWR, который также предоставляет пользовательские хуки для обработки запросов и мутаций. Но он гораздо проще в плане того, что предлагает. Вы не ошибетесь, если выберете какой-либо их этих сервисов и будете получать данные и выполнять HTTP-запросы с помощью Fetch API.
Маршрутизация
В таких фреймворках, как Next.js, Remix и Astro, маршрутизация уже предусмотрена. Все они имеют встроенные способы создания маршрутов или страниц в проекте.
При создании React-приложения с клиентским рендерингом, допустим, с помощью Vite или Create React App, вам придется выбрать библиотеку маршрутизации. React Router по-прежнему остается самым популярным выбором — эта библиотека решает любые задачи, связанные с маршрутизацией. Кроме того, она довольно продвинута благодаря функциям загрузки данных с помощью свойства loader. Оно позволяет получать данные для определенного маршрута без использования внешних библиотек, таких как React Query.
Новая библиотека, которая, судя по всему, обладает не меньшими возможностями, — Tanstack Router. Она была создана для того, чтобы обеспечивать полную безопасность в отношении типов и предлагать отличные настройки по умолчанию для получения данных, как в 6-й версии React Router.
Хотя Tanstack Router немного новее React Router, оба варианта будут беспроигрышными, особенно при использовании их в сочетании с TanStack Query или SWR.
Аутентификация
Хотя аутентификация — это то, чем занимается серверная часть React-проектов, стоит знать, какие библиотеки лучше всего интегрируются с ними как на клиенте, так и на сервере.
В 2024 году Supabase стала супернадежным решением для аутентификации, предлагая легкую интеграцию с React-приложениями как для сервера, скажем, в проекте Next.js, так и для клиента. В прошлые годы по аналогичным причинам выбирали Firebase, но эту технологию сложнее интегрировать на серверной стороне.
У тех, кто использует Next.js, есть масса вариантов, включая NextAuth, Clerk и библиотеку-новинку Lucia. Жаль, что в текущем году для Next.js нет встроенной библиотеки аутентификации, но, возможно, в будущем она появится.
Пока же лично я буду использовать Supabase и настоятельно рекомендую вам ознакомиться с документацией этой платформы.
База данных и ORM
Как и аутентификация, база данных — это то, что в значительной степени определяет код приложения на стороне сервера.
Такие базы данных, как Supabase и Firebase, не требуют наличия сервера. Вы можете получать и изменять данные непосредственно на клиенте, а также добавлять правила безопасности на дэшборд, чтобы убедиться в выполнении или невыполнении определенных типов запросов в соответствии со статусом аутентификации и уровнем доступа пользователя.
Помимо Supabase и Firebase, есть бесчисленное множество вариантов для тех, кто использует традиционный сервер или фреймворк полного стека. В 2024 году предпочтение будет отдано базам данных SQL, таким как MySQL и PostgreSQL, чего нельзя сказать о базах данных NoSQL, таких как MongoDB и Firebase.
Для взаимодействия с базой данных подойдет либо обычный SQL, либо ORM, который позволит использовать собственный язык запросов. Популярные варианты ORM включают Prisma и Drizzle. Оба они позволяют генерировать безопасный для типов код, чтобы вы знали, какие данные будут возвращены. К тому же оба отлично интегрируются с базами данных SQL или NoSQL по вашему выбору.
Дата и время
При написании приложений на JavaScript рекомендуется использовать библиотеку для дат. Конструктор дат JavaScript непредсказуем и не может надежно работать с такими вещами, как часовые пояса.
Есть множество библиотек дат, но я склоняюсь к date-fns и day.js. Обе эти библиотеки, несмотря на свою компактность, довольно обширные. Обе позволяют манипулировать датами JavaScript как в браузере, так и на бэкенде.
Формы
Если вы создаете приложение с простой формой регистрации, то в большинстве случаев библиотека форм не понадобится: использование свойства required для вводимых данных — все, что вам нужно.
Если же вы создаете что-то более сложное и со множеством форм, воспользуйтесь React Hook Form. Эта полнофункциональная библиотека форм позволяет валидировать вводимые формы и отображать ошибки, требуя минимальное количество кода.
Другие библиотеки форм, такие как Formik и React Final Form, предоставят ту же функциональность, но React Hook Form немного лучше, потому что у нее более современный API, основанный на хуках. Кроме того, при использовании React Hook Form обычно требуется меньше кода.
Перетаскивание (Drag & Drop)
При добавлении перетаскивания в приложение почти наверняка понадобится сторонняя библиотека. Самым популярным выбором в прошлом была React Beautiful DnD. По состоянию на 2024 год она больше не получает регулярных обновлений.
В будущем надежной заменой для перетаскивания станет использование DnD Kit. Это легкая и очень гибкая библиотека. Ее документация содержит множество полезных примеров, охватывающих все возможные варианты использования перетаскивания.
Мобильные приложения
React-разработчики обычно пользуются React Native при создании мобильных приложений. Однако есть ряд интересных библиотек, которые расширяют возможности React Native, распространяя их на веб-разработку.
Expo — это инструмент, похожий на Vite, но предназначенный для создания мобильных React-приложений. Он обладает такими замечательными функциями, как быстрое обновление, а Expo Go позволит легко запустить свой проект на собственном устройстве в процессе его разработки. Expo упрощает работу с кодовой базой мобильного приложения и ее развертывание в веб-пространстве.
Это конечная цель и других проектов, таких как Tamagui, на который также стоит обратить внимание. Tamagui поможет создать настоящее нативное приложение, работающее на Android, iOS и в вебе.
Если вы уже написали приложение React для запуска в браузере, то самый быстрый способ запустить его как нативное приложение и вывести в Apple App Store или Google Play Store — это использовать Capacitor.js.
Развертывание
Сейчас как никогда много способов развернуть React-приложение. Vercel — это, пожалуй, самая простая платформа для развертывания React-приложений с рендерингом как на стороне клиента, так и на стороне сервера. Она поддерживают практически все фреймворки, которые только можно придумать, включая языки, не относящиеся к JavaScript. Кроме того, у нее щедрый план Hobby. Ближайшими конкурентами Vercel являются Netlify и Cloudflare Pages.
Cloudflare Pages может быть немного сложнее настроить, особенно при работе над React-проектом с полным стеком. Но это самый доступный по цене из всех перечисленных вариантов. Если вы готовы платить за сервер, можете использовать что-то вроде Railway или Render, которые отлично подходят для развертывания, если у вас есть сервер, отдельный от React-приложения.
Библиотека №1, которую нужно знать
Наконец, библиотека номер один, которую вы должны знать, если будете React-разработчиком в 2024 году, — это TypeScript. Все упомянутые здесь фреймворки включают в себя опции для создания React-приложений с использованием TypeScript.
TypeScript — это инструмент, который позволяет обнаруживать ошибки типов при написании кода JavaScript, чтобы предотвратить их во время выполнения. Вы можете создавать все React-проекты только на JavaScript, но в какой-то момент либо сами оцените преимущества использования TypeScript, либо будете полагаться на кодовую базу, в которой есть TypeScript.
Настоятельно рекомендую вам выделить немного времени на изучение TypeScript. Это самый необходимый, самый востребованный инструмент, который нужно знать React-разработчику. Он может значительно улучшить общее качество кода.
Читайте также:
- Топ-10 заданий по написанию кода для собеседования по React.js в 2024 году
- Как реализовать функциональность перетаскивания с помощью React Beautiful Dnd
- Проблема устаревших замыканий и способы ее решения в React. Часть 2
Читайте нас в Telegram, VK и Дзен
Перевод статьи Reed Barger: 📚 React Libraries You Should Use In 2024
