При разработки приложении на React стоит знать и использовать полезные библиотеки.
Для дополнительных функций, например, аутентификации или стилизации, вам нужно выбрать хорошую стороннюю библиотеку.
В этом подробном руководстве я расскажу вам обо всех библиотеках, которые я рекомендую использовать в 2024 году, чтобы с легкостью создавать быстрые и надежные приложения на React.
Список библиотек
- React Framework
- Package Manager
- CSS & UI Libraries
- State Management
- Data Fetching
- Routing
- Authentication
- Database & ORM
- Dates & Times
- Forms
- Drag & Drop
- Mobile Apps
- Deployment
- TypeScript
- Become a Pro React Developer,
React Framework
Прежде всего, как мы вообще создадим наше React-приложение в 2024 году?
Если вам нужен проект React с клиентским рендерингом, то лучший выбор — Vite, который вытеснил устаревший инструмент Create React App.
Если вы хотите создать серверно-рендерный или полностековый React-проект, Next.js — самый полный и популярный полностековый React-фреймворк.
В 13-й версии Next.js появился маршрутизатор приложений, который предоставил нам такие возможности, как серверные компоненты и серверные действия. Они позволяют нам получать данные и рендерить наши React-компоненты на сервере.
Если некоторые функции Next.js слишком сложны или вы не понимаете, как их использовать, отличной альтернативой полному стеку для создания динамических и статических сайтов является Remix.
Если вы создаете приложение, которое должно быстро загружаться и в основном обслуживать статический контент, еще один отличный вариант — Astro. Astro позволяет использовать React наряду с другими фреймворками, такими как Vue и Svelte (то есть он «фреймворк-агностик»), и предназначен для передачи клиенту минимального количества JavaScript, что приводит к очень быстрой загрузке.
Package Manager
Чтобы установить все эти библиотеки, перечисленные в этом руководстве, вам понадобится нечто, называемое менеджером пакетов.
Если у вас установлен Node.js, который необходим для локального запуска проекта React на вашем компьютере, вы можете просто использовать NPM, который по-прежнему является отличным выбором в 2024 году. Существуют и другие альтернативы NPM, включая Yarn и PNPM.
Новейшей альтернативой, которая быстро становится очень популярной в мире JavaScript, является Bun. Bun — это одновременно и среда выполнения JavaScript, как Node, и менеджер пакетов, и рекламируется как более быстрая альтернатива Node и NPM.
CSS & UI Libraries
Теперь, когда вы настроили проект и установили библиотеки, как вы собираетесь оформлять свои React-проекты?
Все фреймворки, которые я упомянул выше, включают базовую поддержку CSS. В 2024 году будет вполне нормально, если вы захотите просто стилизовать свои React-проекты с помощью обычного CSS.
Вы можете использовать таблицы стилей CSS или модули CSS, но, возможно, самым популярным выбором на данный момент с точки зрения чистого стиля является использование Tailwind CSS. Tailwind CSS включает в себя несколько шагов по настройке, но он позволяет вам объединять готовые классы в цепочки, чтобы быстро добавлять стили непосредственно в файлы компонентов.
ShadCN — очень популярная библиотека пользовательского интерфейса для 2024, которая сочетает Tailwind CSS с библиотекой компонентов под названием Radix UI. Библиотеки компонентов, такие как Radix, позволяют легко добавлять компоненты, не кодируя их самостоятельно.
ShadCN стала популярной благодаря большему контролю над тем, как выглядят ваши компоненты с помощью Tailwind CSS.
Есть и множество других очень популярных библиотек функциональных компонентов. Material UI по-прежнему остается популярной, как и другие, такие как Mantine и Chakra UI. Выбор библиотеки зависит от того, как вы хотите, чтобы выглядело ваше конечное приложение. Я рекомендую попробовать несколько этих библиотек пользовательского интерфейса и посмотреть, какая из них вам понравится больше.
State Management
В React есть встроенные инструменты, такие как useState и useReducer, для управления состоянием приложения в базовых приложениях. Если вы используете Next.js, то управление состоянием при работе с серверными компонентами перенесено на URL. Несмотря на эти возможности, вам может понадобиться более точный способ управления состоянием.
Возможно, у вас много фрагментов состояния и вы хотите получить больший контроль над тем, как обновления состояния отображают ваши компоненты. В этом случае вы можете обратиться к специализированной библиотеке управления состоянием.
Такие библиотеки, как Zustand, Recoil и Jotai, которые очень похожи друг на друга, позволяют управлять состоянием, просто объявляя свойства и методы объекта. В конечном итоге это самый простой способ управления состоянием компонентов вашего приложения.
Если бы мне пришлось выбирать одну библиотеку управления состоянием для всех моих React-проектов в 2024 году, я бы выбрал Zustand. Практически не нужно тратить время на то, чтобы научиться ее использовать. Она также не требует добавления компонента-провайдера в ваше приложение, что делает ее очень удобной для использования в любом компоненте.
Data Fetching
Управление состояниями и выборка данных часто идут рука об руку. Если вы создаете клиентское приложение React, вам, скорее всего, понадобится библиотека для получения данных.
Лучшим способом получения данных с сервера в приложении React в 2024 году остается React Query или Tanstack Query, как он сейчас называется. TanStack Query дает вам тонкий контроль не только над получением данных, но и над тем, когда их получать и возвращать, кэшировать, все это с помощью удобных пользовательских хуков, а также очень легко изменять или мутировать данные.
Другой надежной альтернативой является SWR, который также предлагает пользовательский хук для обработки запросов и мутаций, но он гораздо проще в плане того, что он предлагает. Вы не ошибетесь, если выберете любой из них и будете получать данные и выполнять HTTP-запросы с помощью fetch API.
Вот статья, в которой рассказывается о некоторых наиболее популярных методах получения данных в React (включая Tanstack Query и SWR).
Routing
Если вы используете такие фреймворки, как Next.js, Remix или Astro, о маршрутизации уже позаботились. Все они поставляются со встроенными способами создания маршрутов или страниц в проекте.
Если вы используете React-приложение с клиентским рендерингом, например, созданное с помощью Vite или Create React App, вам придется выбрать библиотеку маршрутизации. React Router по-прежнему остается самым популярным выбором. Она решает любые задачи, связанные с маршрутизацией. Кроме того, она очень продвинута благодаря функциям загрузки данных с помощью реквизита loader. Реквизит loader позволяет получать данные для заданного маршрута без использования внешних библиотек, таких как React Query.
Новая библиотека, которая, судя по всему, обладает не менее хорошими возможностями, — Tanstack Router. Tanstack Router была создана для того, чтобы быть полностью безопасной в отношении типов и предлагать отличные настройки по умолчанию для получения данных, как в React Router версии 6.
Хотя Tanstack Router немного новее, вы действительно не можете ошибиться с выбором, и это идеальная пара, если вы уже используете Tanstack Query или SWR в своих приложениях.
Authentication
Хотя аутентификация — это то, чем занимается серверная часть наших проектов, стоит знать, какие библиотеки лучше всего интегрируются с проектами React, как на клиенте, так и на сервере.
В 2024 году Supabase стала очень надежным решением для аутентификации и предлагает легкую интеграцию с приложениями React как на сервере, скажем, в проекте Next.js, так и на клиенте. В прошлые годы по аналогичным причинам выбирали Firebase, но его сложнее интегрировать на серверной стороне.
Если вы используете Next.js, у вас есть масса вариантов, таких как NextAuth, Clerk и новичок Lucia. К сожалению, в настоящее время для Next.js нет встроенной библиотеки аутентификации, но, возможно, в будущем она появится.
Пока же лично я буду использовать Supabase и настоятельно рекомендую вам ознакомиться с их документацией.
Database & ORM
Как и аутентификация, ваша база данных — это то, что будет и должно в значительной степени определять ваш код на стороне сервера.
Такие базы данных, как Supabase и Firebase, не требуют наличия сервера. Вы можете получать и изменять данные непосредственно в клиенте, а также добавлять правила безопасности на панели управления, чтобы убедиться, что определенные типы запросов разрешены или не разрешены в соответствии со статусом аутентификации и ролью пользователей.
За пределами этих двух вариантов, если вы используете традиционный сервер или фреймворк полного стека, существует бесчисленное множество вариантов. В 2024 году предпочтение будет отдано базам данных SQL, таким как MySQL или PostgreSQL, а не базам данных NoSQL, таким как MongoDB или Firebase.
Для общения с базой данных вы будете использовать либо обычный SQL, либо ORM, который позволит вам использовать собственный язык запросов. Популярные варианты ORM включают Prisma или Drizzle. Оба они позволяют генерировать код, безопасный для типов, чтобы вы знали, какие данные будут возвращены, и оба очень хорошо интегрируются с SQL или NoSQL базами данных по вашему выбору.
Dates & Times
Когда вы работаете с JavaScript, всегда рекомендуется иметь библиотеку дат. Конструктор дат JavaScript непредсказуем и практически не может надежно работать с такими вещами, как часовые пояса.
Существует множество вариантов, но я склоняюсь к date-fns или day.js. Обе эти библиотеки — очень маленькие, но обширные, позволяющие манипулировать датами JavaScript как в браузере, так и на заднем плане. Вы не ошибетесь ни с одной из них.
Forms
В большинстве случаев библиотека форм может не понадобиться, если вы создаете приложение с простой формой регистрации — использование обязательного реквизита для вводимых данных, как правило, это все, что вам нужно.
Если вы создаете что-то более сложное и у вас много форм, React Hook Form — это полнофункциональная библиотека форм, которая позволяет вам проверять вводимые данные и отображать ошибки с минимальным количеством кода.
Другие библиотеки форм, такие как Formik и React Final Form, предоставят вам ту же функциональность, но React Hook Form немного лучше, потому что у нее более современный API, основанный на хуках, и обычно требует меньше кода.
Drag & Drop
Когда речь заходит о добавлении перетаскивания в приложение, вам почти наверняка понадобится сторонняя библиотека. Самым популярным выбором в прошлом была React Beautiful DnD. По состоянию на 2024 год она больше не получает регулярных обновлений.
В будущем надежной заменой для перетаскивания будет использование DnD Kit. Он легкий, очень гибкий, а документация содержит множество полезных примеров, охватывающих все возможные варианты использования перетаскивания.
Mobile Apps
Если вы хотите создать мобильное приложение, то для разработчиков React библиотекой для этого всегда была React Native. Есть несколько интересных библиотек, которые расширяют границы React Native, чтобы распространить его на веб.
Expo — это инструмент, похожий на Vite, но предназначенный для создания мобильных React-приложений. Он обладает такими замечательными функциями, как быстрое обновление, а с помощью Expo Go вы можете легко запустить свой проект на собственном устройстве в процессе его разработки. Expo упрощает работу с мобильной кодовой базой и ее развертывание в Интернете.
Это конечная цель других проектов, таких как Tamagui, на который вам также стоит обратить внимание, если вы хотите создать настоящее нативное приложение, работающее на Android, iOS и в Интернете.
Если у вас есть приложение React, которое вы уже написали для запуска в браузере, то самый быстрый способ запустить его как нативное приложение и запустить его в Apple App Store или Google Play Store — это использовать Capacitor.js.
Deployment
Сейчас как никогда много способов развернуть приложение React. Vercel — это, пожалуй, самая простая платформа для развертывания React-приложений, как клиентских, так и серверных. Они поддерживают практически все фреймворки, которые только можно придумать, включая языки, не относящиеся к JavaScript. У них щедрый хобби-план, а среди конкурентов в том же пространстве — Netlify и Cloudflare Pages.
Cloudflare Pages может быть немного сложнее в настройке, особенно если у вас есть проект React с полным стеком, но он самый щедрый по цене из всех перечисленных вариантов. Если вы не против платить за сервер, вы можете использовать что-то вроде Railway или Render, которые отлично подходят для развертывания, если у вас есть сервер, отдельный от вашего приложения React.
Библиотека №1, которую необходимо знать
Наконец, библиотека номер один, которую вы должны знать, если вы React-разработчик в 2024 году, — это TypeScript. Все упомянутые мною фреймворки включают в себя опции для создания приложений React с помощью TypeScript.
TypeScript — это инструмент, который позволяет обнаруживать ошибки типа в коде JavaScript, чтобы предотвратить ошибки во время выполнения. Вы можете создавать все свои React-проекты только на JavaScript, но в какой-то момент вы либо сами увидите преимущества использования TypeScript, либо будете смотреть на кодовую базу, в которой есть TypeScript.
Я настоятельно рекомендую вам выделить немного времени на изучение TypeScript. Это самый необходимый, самый востребованный инструмент, который нужно знать разработчику React и который может значительно улучшить общее качество вашего кода.