React существует уже довольно давно, и за эти годы вокруг него выросла огромная экосистема библиотек. Разработчики, переходящие с других языков или фреймворков, часто испытывают трудности с выбором библиотек, необходимых для создания веб-приложений с помощью React.

React позволяет разработчикам создавать пользовательские интерфейсы (user interfaces, UI) на основе функциональных компонентов. Хотя он предоставляет встроенные решения, такие как хуки (hooks), для управления локальным состоянием, обработки побочных эффектов и оптимизации производительности, в конечном итоге все сводится к работе с функциями — как компонентами, так и хуками — для построения UI.

В этой статье мы рассмотрим основные библиотеки React на 2025 год. Эти библиотеки являются строительными блоками для разработки приложений. Независимо от того, новичок вы или опытный разработчик, эта шпаргалка поможет вам сориентироваться в обширной экосистеме React.

• React Tech Stack в 2025 году

❯ Создание нового проекта

Первый вопрос, который часто задают новички в React: как создать новый проект? При таком количестве доступных инструментов выбор подходящего может оказаться непростой задачей. Самым популярным решением в сообществе React является Vite, который позволяет легко создавать проекты, включающие различные библиотеки (например, React) и опциональной поддержкой TypeScript.

Одной из главных отличительных черт Vite является очень высокая производительность.

• Веб-сайты и ​​веб-приложения

Если вы уже знакомы с React, то вместо Vite рассмотрите возможность использования одного из его (мета)фреймворков. Next.js — популярный выбор, который строится поверх React, поэтому при его использовании важное значение имеет понимание основ React. Он предоставляет множество функций из коробки, таких как различные методы рендеринга, маршрутизация на основе файлов и маршруты API (API routes).

• React — это библиотека или фреймворк?

Хотя Next.js изначально использовался для рендеринга на стороне сервера, его можно использовать для статической генерации сайтов, наряду с другими шаблонами рендеринга (например, ISR). Самым последним дополнением к Next.js являются серверные компоненты React (RSC) и серверные функции React (RSF), которые с 2023 года вносят большой вклад в смену парадигмы, перемещая компоненты React с клиента на сервер.

Две альтернативы Next.js — TanStack Start (бета-версия) и React Router (на пути объединения с Remix), которые (пока) не поддерживают RSC.

• Дорога в будущее

Если производительность статического контента для вас в приоритете, взгляните на Astro. Как инструмент, не зависящий от фреймворка, он без проблем работает с React, отправляя в браузер только HTML и CSS, даже при использовании React для создания компонентов. JavaScript загружается только тогда, когда компоненты требуют интерактивности, что обеспечивает оптимальную производительность.

• Как начать проект React?

Если вы хотите понять, как работают такие инструменты, как Vite, попробуйте настроить проект React самостоятельно. Начните с проекта на чистом HTML/CSS и JavaScript и добавьте React и его вспомогательные инструменты (такие как Webpack и Babel). Это не то, с чем вам придется иметь дело в повседневной работе, особенно с тех пор, как Vite стал преемником Webpack, но это отличная возможность познакомиться с базовыми инструментами.

Если вы ветеран React и хотите попробовать что-то новое, взгляните на Nitro, Redwood или Waku. Последний, созданный разработчиком Zustand, поддерживает RSC.

Рекомендации:

• Vite для приложений с рендерингом на стороне клиента
• Next.js для приложений с рендерингом на стороне сервера
• Astro для приложений, основной контент которых является статическим

❯ Менеджер пакетов

Наиболее широко используемый менеджер пакетов для установки библиотек (зависимостей) в экосистеме JavaScript (и, следовательно, React) — это npm, поскольку он поставляется в комплекте с Node.js. Отличные альтернативы — yarn и pnpm. Последний отличается высокой производительностью.

• Настройка Mac для веб-разработки

Если вам необходимо создать несколько приложений React, которые зависят друг от друга или которые используют общий набор компонентов UI, возможно, вам стоит ознакомиться с концепцией монорепозитория (monorepo). Все упомянутые менеджеры пакетов позволяют создавать монорепозитории с помощью рабочих пространств (workspaces), однако в этом плане мне не очень нравится npm. Также могут пригодиться такие инструменты конвейера монорепозитория (monorepo pipeline tools), как Turborepo.

• Как создать монорепозиторий с TypeScript/JavaScript?

Рекомендации:

• для простых приложений
  
  • дефолтный и наиболее популярный → npm
  • более производительный, но не такой популярный → pnpm
• для монорепозиториев → Turborepo

❯ Управление состоянием

React предоставляет два встроенных хука для управления локальным состоянием: useState и useReducer. Для управления глобальным состоянием есть встроенный хук useContext, который позволяет передавать данные из родительских компонентов в дочерние без использования props, эффективно предотвращая prop drilling (сверление/бурение пропов).

• Когда использовать useState и useReducer?

Все три хука позволяют разработчикам управлять состоянием приложения, которое либо размещается в компонентах с помощью хуков useState/useReducer, либо делается глобальным путем их объединения с хуком useContext.

• Как объединить useState/useReducer с useContext?

Если вы часто используете контекст для общего/глобального состояния, вам определенно стоит взглянуть на Zustand. Он позволяет управлять глобальным состоянием приложения, которое может быть прочитано и изменено любым компонентом, подключенным к хранилищу.

• Что такое состояние в React?

Хотя Zustand становится фактическим стандартом в сообществе React, многие проекты по-прежнему используют Redux. Лично я ни разу не использовал Redux за последние несколько лет, поскольку предпочитаю Zustand за его простоту, гибкость и производительность. Однако вы вполне можете столкнуться со старыми приложениями, созданными с помощью Redux.

• Учебник по Redux (без Redux Toolkit)

Если вы используете Redux, вам определенно стоит взглянуть на Redux Toolkit. Если вам нравятся машины состояний (state machines), взгляните на XState или Zag. Если вам требуется глобальное хранилище, но не нравятся Zustand или Redux, взгляните на другие популярные решения, такие как Mobx, Jotai или Nano Stores.

Рекомендации:

• useState/useReducer для локального состояния
• useContext для небольшого глобального (совместно размещенного, collocated) состояния
• Zustand (или альтернатива) для одного или нескольких глобальных состояний уровня приложения

❯ Получение данных

Встроенные хуки React отлично подходят для управления состоянием UI, но когда дело доходит до управления состоянием (кэширования) удаленных (remote) данных (и их получения), я бы рекомендовал использовать специальную библиотеку, такую ​​как TanStack Query (ранее React Query).

Хотя TanStack Query как таковой не является библиотекой для управления состоянием, поскольку он в основном используется для получения данных из API, он берет на себя ответственность за управление состоянием (например, кэширование, оптимистичные обновления UI) этих данных.

• Как работает TanStack Query?

TanStack Query был разработан для использования REST API. Однако сейчас он также поддерживает GraphQL. Однако, если вы ищете более специализированную библиотеку для работы с GraphQL, взгляните на Apollo Client (популярный), urql (легкий) или Relay.

• Все о состоянии в React

Если вы используете Redux и хотите добавить выборку данных с интегрированным управлением состоянием, взгляните на RTK Query.

Если вы контролируете фронтенд и бэкенд (и оба написаны на TypeScript), взгляните на tRPC, который предназначен для создания сквозных типобезопасных API. Он дает существенный прирост производительности и сильно улучшает опыт разработки (developer experience, DX). Вы также можете объединить его с TanStack Query для обработки всех тонкостей, касающихся выборки данных, при этом по-прежнему имея возможность вызывать бэкенд из фронтенда, используя типизированные функции.

• Как создать типобезопасное приложение с помощью tRPC?

И последнее, но не менее важное: если вы используете (мета)фреймворк, который поддерживает RSC/RSF (например, Next.js), вы можете использовать их для извлечения данных. Они позволяют получать данные на сервере и передавать их клиенту. Это избавляет от потребности в клиентской библиотеке выборки данных.

Рекомендации:

• извлечение данных на стороне сервера
  
  • серверные компоненты/функции React (если поддерживаются (мета)фреймворком)
• получение данных на стороне клиента
  
  • TanStack Query (REST или GraphQL)
  • в сочетании с axios или fetch
  • Apollo Client (GraphQL)
  • для более специализированной работы с GraphQL
• tRPC для тесно связанных архитектур клиент-сервер

❯ Маршрутизация

Если вы используете фреймворк, например Next.js, то маршрутизация уже сделана за вас. Однако, если вы используете React без фреймворка и только для клиентского рендеринга (например, Vite без SSR), то самая популярная библиотека маршрутизации — это React Router.

• Использование React Router

Однако этот год может стать годом TanStack Router — новой библиотеки маршрутизации для React. Это отличная альтернатива React Router, особенно если вы используете TypeScript в своем проекте. Хотя он все еще находится в стадии бета-тестирования, любой, кто знаком с TanStack, знает, что он будет превосходен.

React Router и TanStack Router (с TanStack Start) работают над поддержкой RSC. Это означает, что код компонентов можно будет выполнять на сервере для различных оптимизаций (например, уменьшение размера пакета, отправляемого клиенту, выборка данных на стороне сервера и др.).

Прежде чем добавлять маршрутизатор в свой проект, если вы только начинаете изучать React, попробуйте сначала условный рендеринг React. Это не замена маршрутизации, но даст вам представление о том, как работает замена компонентов на уровне страницы.

Рекомендации:

• маршрутизация на стороне сервера: Next.js
• маршрутизация на стороне клиента:
  
  • наиболее популярный — React Router
  • в тренде — TanStack Router

❯ Стилизация

Существует много вариантов и еще больше мнений о стилизации в React, рассмотреть их все в одном разделе не представляется возможным.

• Стилизация в React (подробное руководство)

Если вы новичок в React, можете начать со встроенных стилей и чистого CSS путем использования объекта стилей в JSX. В реальных приложениях такой подход используется редко:

const Headline = ({ title }) =>
  

    {title}
  

Встроенные стили могут использоваться для динамической стилизации, а внешний файл CSS — содержать статические стили:

import './Headline.css';

const Headline = ({ title }) =>
  

    {title}
  

Для условного применения className рекомендуется использовать специальные библиотеки, такие как clsx.

Во-первых, я хочу порекомендовать TailwindCSS как самое популярное решение Utility-First-CSS. Оно поставляется с предопределенными классами CSS. Это улучшает DX и оптимизирует дизайн-систему приложения, но сопряжено с необходимостью знать все классы и многословным синтаксисом:

const Headline = ({ title }) =>
  

    {title}
  

Во-вторых, я бы рекомендовал взглянуть на CSS-модули как на одно из многих решений CSS-in-CSS. CSS-модули дают возможность инкапсулировать стили на уровне одного или нескольких компонентов. Таким образом, стили не будут случайно проникать в другие компоненты:

import styles from './style.module.css';

const Headline = ({ title }) =>
  

    {title}
  

И в-третьих, я хочу показать (но не рекомендовать) Styled Components как одно из многих решений CSS-in-JS. Этот подход предоставляется библиотекой styled-components (или альтернативами, такими как emotion), которая позволяет размещать стили, созданные с помощью JavaScript, рядом с компонентами React в том же файле или рядом с ним:

import styled from 'styled-components';

const BlueHeadline = styled.h1`
  color: blue;
`;

const Headline = ({ title }) =>
  
    {title}
  

Выбор CSS-in-CSS или Utility-First-CSS зависит от вас. Более популярным на сегодняшний день является Utility-First-CSS с TailwindCSS в качестве фактического стандарта. Решения CSS-in-JS уже не так популярны из-за проблем с производительностью и гидратацией в серверных средах, хотя более новые решения (но не такие популярные, как Styled Components или Emotion) решают эти проблемы.

Другие библиотеки, которые можно попробовать: PandaCSS, linaria, vanilla-extract, nanocss, UnoCSS и Styled JSX.

Рекомендации:

• Utility-First-CSS (самый популярный)
  
  • TailwindCSS
• CSS-in-CSS
  
  • CSS-модули
• CSS-in-JS
  
  • например, StyleX от Facebook (компилируется в CSS, ориентированный на утилиты)

❯ Библиотеки компонентов UI

Будь то раскрывающийся список, селект, радиокнопка или чекбокс, вы должны уметь создавать эти компоненты UI с нуля.

Однако если у вас нет ресурсов или времени, чтобы создать все компоненты самостоятельно, подключите библиотеку UI, которая предоставит множество готовых компонентов, которые используют одну и ту же систему проектирования, функциональные возможности и правила доступности:

• Material UI (MUI) (все еще самый популярный во фриланс-проектах)
• Mantine UI (самый популярный в 2022 году)
• Chakra UI (самый популярный в 2021)
• Hero UI (ранее Next UI)
• Park UI (основан на Ark UI)
• PrimeReact

Тенденция движется в сторону безголовых (headless) UI-библиотек. Они не имеют стилей, но обладают всеми функциями и возможностями, которые требуются современной библиотеке компонентов. Чаще всего они сочетаются с решением Utility-First-CSS, таким как TailwindCSS:

• shadcn/ui (самый популярный в 2023–2024 годах)
• Radix (основа для shadcn/ui)
• React Aria
• Ark UI (от создателей Chakra UI)
• Ariakit
• Daisy UI
• Headless UI
• Tailwind UI (платный)

Возможно, более старомодные по сравнению с другими библиотеками:

• Ant Design
• Semantic UI
• React Bootstrap
• Reactstrap

❯ Библиотеки анимации

Любая анимация в веб-приложении начинается с CSS. Однако CSS-анимации могут не полностью соответствовать вашим требованиям. Некоторые популярные библиотеки анимации для React включают:

• Motion (личная рекомендация, ранее Framer Motion)
• React Spring

❯ Библиотеки для визуализации данных и построения диаграмм

Если вы хотите создавать диаграммы самостоятельно, вам не обойтись без D3. Это библиотека визуализации низкого уровня, которая предоставляет все необходимое для создания потрясающих диаграмм. Однако изучение D3 — это далеко не простая задача, поэтому многие разработчики берут библиотеку диаграмм, которая делает все сама в обмен на гибкость. Популярные решения:

• Recharts (личная рекомендация)
  
  • готовые графики
  • отличная компоновка
  • опциональная кастомизация за счет возможности произвольной компоновки
• visx
  
  • ближе к низкоуровневому D3, чем к высокоуровневой абстракции
  • более крутая кривая обучения
• больше готовых диаграмм, сложнее кастомизировать
  
  • Victory
  • nivo
  • react-chartjs

❯ Библиотеки для работы с формами

Самая популярная библиотека для форм — React Hook Form. Она поставляется со всем необходимым: валидация (zod — самое популярное решение), отправка формы, управление состоянием формы и многое другое. Это отличная библиотека для начала работы с формами.

Будущей альтернативой является Conform, который лучше интегрируется с фулстек-приложениями.

• Как работать с формами в React?

В качестве альтернативы можете использовать Formik или React Final Form. Если вы используете библиотеку UI, убедитесь, что она интегрируется с этими библиотеками.

Рекомендации:

• React Hook Form
  
  • с интеграцией zod для валидации

❯ Структура проекта

Для обеспечения единого и «здорового» стиля кода проекта следует использовать ESLint. Например, вы можете сделать обязательным для ESLint следование популярным руководствам по стилю. Вы также можете интегрировать ESLint в свой редактор кода, и он укажет на каждую ошибку.

• Структура проекта React за 5 шагов

Для обеспечения единого формата кода проекта следует использовать Prettier. Вы также можете интегрировать его в свой редактор кода, чтобы он форматировал код при каждом сохранении файла. Prettier не заменяет ESLint, но прекрасно интегрируется с ним.

• Функциональная архитектура React

Возможно, восходящей звездой в 2025 году станет Biome (ранее Rome). ESLint и Prettier — не самые простые утилиты, когда дело касается их настройки и взаимодействия между собой. Но они необходимы в повседневной работе каждого веб-разработчика. Biome стремится стать альтернативой Prettier и ESLint, предоставив быстрый (на основе Rust) и комплексный набор инструментов.

Рекомендации:

• ESLint + Prettier
• Biome (по желанию)

❯ Аутентификация

Аутентификация/авторизация — это такой функционал приложения, как регистрация, вход и выход пользователя из системы. Также часто требуются другие возможности, такие как сброс и изменение пароля. Этот функционал выходит далеко за рамки React, поскольку управляется сервером.

• Подготовка к аутентификации с помощью React Router

Лучшим опытом обучения будет реализация фулстэк-приложения с аутентификацией (например, The Road to Next) самостоятельно. Поскольку аутентификация сопряжена с множеством рисков безопасности и нюансов, о которых не все знают, я бы рекомендовал использовать сторонний сервис для аутентификации в продакшне:

• Lucia
  
  • Oslo: аутентификация и криптография
  • Arctic: OAuth 2.0 с поддержкой 50+ провайдеров
• Better Auth
• Auth.js
• Clerk (платный) or Kinde (платный)
• Supabase (Auth)
• AuthKit
• Auth0
• AWS Cognito

❯ Сервер

Поскольку существует сильная тенденция перемещения React на сервер, наиболее естественной средой для проекта будет (мета)фреймворк, такой как Next.js (для преимущественно динамических приложений) или Astro (для преимущественно статических приложений). React Router (ранее Remix) и TanStack Start также являются отличными альтернативами, но они находятся на ранних стадиях разработки.

Если вы не можете использовать фулстэк-фреймворк по каким-либо причинам (но при этом можете использовать JS/TS), взгляните на tRPC или Hono. Классикой Node.js-сервера, проверенной в боях, является старый, но по-прежнему очень популярный Express. Другие альтернативы — Fasitfy, Nest или Elysia.

Упоминания также заслуживают Koa и Hapi.

❯ База данных

Поскольку фулстэк-приложения становятся все более популярными, все более актуальным становится вопрос взаимодействия с базой данных. При разработке любого приложения Next.js вам, скорее всего, придется иметь дело с ORM. Самое популярное решение — Prisma. Альтернатива — Drizzle ORM.

Другие варианты — Kysely и database-js (только PlanetScale).

• Тенденции веб-разработки

Базу данных как услугу предоставляют такие поставщики, как Supabase и Firebase. Supabase с ее PostgreSQL можно развернуть на собственном сервере.

Популярными «бессерверными» базами данных являются PlanetScale (платная), Neon, Xata и Turso.

❯ Хостинг

Деплой приложения React похож на деплой любого другого веб-приложения. Для полного контроля над средой развертывания приложения рассмотрите возможность использования таких сервисов, как Digital Ocean или Hetzner. Они позволяют управлять всей инфраструктурой самостоятельно.

Если вы предпочитаете подход, когда хостинговая платформа управляет всем за вас, Vercel — это проверенный вариант, особенно для проектов, созданных с помощью Next.js.

В качестве компромисса отличным решением станет Coolify, который обеспечивает некоторую автономность и одновременно упрощает многие задачи хостинга.

Если вы используете сторонний бэкенд как сервис, например Firebase/Supabase, можете проверить, предлагают ли они хостинг. Другие популярные хостинг-провайдеры — Render, Fly.io, Railway, CloudFlare/AWS/Azure/Google Cloud.

❯ Тестирование

Для тестирования приложений используются специальные фреймворки, такие как Vitest (рекомендуется) или Jest. Они предоставляют инструмент для запуска тестов (test runner), библиотеку утверждений (assertions) и слежение, моки (имитации, mocks), заглушки. Все, что требуется для качественного тестирования приложения.

Рано или поздно вам также придется использовать React Testing Library (RTL), которая специально предназначена для тестирования компонентов React. RTL позволяет визуализировать компоненты и моделировать события в элементах HTML. Далее тестовый фреймворк используется для проверки утверждений.

Когда дело доходит до выбора инструмента для сквозного (E2E) тестирования, два из наиболее рекомендуемых и популярных вариантов — Playwright (рекомендуется) и Cypress. Оба инструмента позволяют автоматизировать и моделировать взаимодействие пользователя в браузере, гарантируя, что ваше приложение ведет себя так, как ожидается с точки зрения пользователя.

Рекомендации:

• юнит/интеграционное тестирование — Vitest + RTL
• тестирование E2E — Playwright (или Cypress)
• тестирование на основе моментальных снимков (snapshots) с помощью Vitest (опционально)

❯ Неизменяемые структуры данных

JavaScript предоставляет множество встроенных инструментов для обработки структур данных, как будто они являются неизменяемыми (иммутабельными, immutable). Однако, если вам требуется обеспечить неизменяемость структур данных, наиболее популярным выбором является Immer.

❯ Интернационализация

Интернационализация приложения (i18n) предполагает на только перевод текста, но также плюрализацию, форматирование дат и валют, а также множество других вещей. Вот самые популярные библиотеки для решения этих задач:

• FormatJS
• react-i18next
• Lingui
• next-intl (Next.js)

❯ Текстовый редактор

Когда речь заходит о «богатых» (rich) редакторах текста, мне на ум приходит следующее:

• TipTap
• Plate
• Lexical
• Slate

❯ Дата и время

Если ваше приложение часто обрабатывает даты, время и часовые пояса, рассмотрите возможность использования специальной библиотеки. Вот парочка популярных вариантов:

• date-fns
• Day.js

❯ Десктопное приложение

Самыми популярными фреймворками для разработки кроссплатформенных десктопных приложения являются Electron (Node.js) и Tauri (Rust).

❯ Загрузка файлов

• react-dropzone

❯ Электронная почта

Рендеринг электронных писем является головной болью при использовании только HTML. К счастью, существуют библиотеки, которые помогают создавать отзывчивые письма с помощью компонентов React:

• react-email (рекомендация)
• mjml
• Mailing
• jsx-email

Если вы ищете сервис электронной почты, взгляните на Resend, Postmark, SendGrid или Mailgun.

❯ Перетаскивание

Лично я использую библиотеку dnd (преемник react-beautiful-dnd) и не могу сказать о ней ничего плохого. Популярная альтернатива, которая предлагает гораздо больше гибкости и настроек, но имеет более крутую кривую обучения, это dnd kit.

❯ Мобильная разработка

Самым популярным решением для разработки мобильных приложений с помощью компонентов React по-прежнему является React Native. Наиболее популярной средой для создания приложений React Native является Expo. Если вам нужны унифицированные компоненты для веба и мобильных устройств, взгляните на Tamagui.

• Навигация в React Native

❯ Прототипирование

Если вы имеете опыт работы с UI/UX, вам может понадобиться инструмент для быстрого прототипирования новых компонентов, макетов или концепций. Лично я использую Figma. Для грубых, но легких набросков мне нравится использовать Excalidraw, другие предпочитают tldraw.

❯ Документация

Существует несколько удобных инструментов для документирования компонентов React. Я использовал Storybook во многих проектах и ​​у меня нейтральное мнение о нем. Я также слышал хорошие отзывы об этих решениях:

• Docusaurus
• Styleguidist
• React Cosmos

В конечном счете, экосистема React функционирует как гибкая структура, в основе которой лежит React. Она позволяет делать осознанный выбор библиотек, начинать с малого и добавлять зависимости по мере необходимости для решения конкретных задач. И наоборот, если React полностью удовлетворяет вашим требованиям, можно использовать только основную библиотеку.

Новости, обзоры продуктов и конкурсы от команды Timeweb.Cloud — в нашем Telegram-канале ↩