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

Сборщик и среда разработки
Для запуска React-эппки нужен сервер. Эти инструменты создают сервер, который обновляет приложение при изменении файлов.

Я рекомендую Vite. Он позволяет собирать приложение в статичные файлы, которые скачиваются пользователем. В конечном итоге пользователь видит готовое приложение.

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

Роутер
Лучше всего React Router. У Next.js свой роутер, поэтому если выбрали его, то выбирать роутер не нужно.

Стейт-менеджер
Полезно воспользоваться всеми и понимать как они работают. В разных компаниях используют разные менеджеры состояний.
— Redux Toolkit
— Recoil
— Zustand
— MobX
Мне нравится Recoil (использую в пет-проектах), на моём месте работы использовался MobX.

Асинхронный стейт-менеджер
TanStack Query v5. Отгородит от спагетти-кода. Даёт возможность получать состояние запроса (загрузка, успех, ошибка), создавать бесконечные списки, делать оптимистичные обновления. Также все данные кэшируются и могут переиспользоваться. Если правильно использовать асинхронный стейт-менеджер, то потребность использовать обычный стейт-менеджер значительно снизится.

Стилизация
— CSS modules (использование .css файлов с суффиксом module — button.module.css)
— Tailwind
— Styled Components (CSS in JS)

Формы
— React Hook Form (удобная работа с формами, вывод ошибок с заполнением форм и не только)
— React Select (кастомизируемый инпут с выпадающим списком с поддержкой доступности)

Локализация
react-i18next

Анимации
Преимущественно анимируем элементы с помощью CSS. Если анимации слишком сложные и не поддаются CSS, то реализуем с помощью библиотек.
— Framer Motion

Достаточно использовать по одной библиотеки из каждой категории, но никто не запрещает использовать несколько. Стоит понимать, что код будет тяжелый в поддержке, зависимым от ещё большего количества библиотек. Вес приложения увеличится и это плохо скажется на пользователях с плохим интернетом.

Этот пост будет дополняться и изменяться в соответствии с изменениями в экосистеме React, потому что веб не стоит на месте.

Плюрализация без i18next

Задача всё такая же: склонить существительное после числительного. Но что если на проекте нет i18next? Для этого можно использовать функцию:

function plural(number: number, titles: string[], withNumber: boolean = true) {
 const absoluteNumber = Math.abs(number)
 return (
  (withNumber ? number + ' ' : '') +
  titles[
   absoluteNumber % 10 == 1 && absoluteNumber % 100 != 11
    ? 0
    : absoluteNumber % 10 >= 2 &&
      absoluteNumber % 10 <= 4 &&
      (absoluteNumber % 100 < 10 || absoluteNumber % 100 >= 20)
    ? 1
    : 2
  ]
 )
}

Я нашёл её на просторах интернета пару лет назад и модернизировал её, добавив типизацию, поддержку отрицательных чисел и возможность вывода числа вместе с существительным.

plural(1, ['собака', 'собаки', 'собак']) // 1 собака
plural(5, ['собака', 'собаки', 'собак'], false) // собак

И, соответственно, эта функция не имеет поддержки других языков, кроме русского, украинского и белорусского.

Недавно узнал, что JS имеет встроенный объект для плюрализации — Intl.PluralRules. Подробно ознакомиться как с ним работать можно на MDN Web Docs. Это на случай, если нужно склонять на разных языках без i18next, но таких кейсов обычно мало.