React просто великолепен: он крайне производителен и популярен во всем мире. Но не стоит игнорировать тот факт, что “из коробки” React предоставляет не так уж и много готовых решений.

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

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

Содержание:

  1. Глобальное управление состоянием.
  2. Управление состоянием сервера.
  3. Скаффолдинг.
  4. Работа с формами.
  5. HTTP-запросы.
  6. Стили CSS.
  7. Готовый пользовательский интерфейс.
  8. Документация.
  9. Интернационализация и локализация.
  10. Анимация.
  11. Отрисовка длинных списков.
  12. Линтеры.
  13. Форматирование.
  14. Аналитика.
  15. Тестирование.
  16. Компоненты для совместной разработки.

1. Глобальное управление состоянием

Обмен состояниями между компонентами  —  обязательный функционал 99% приложений, а React как раз предоставляет несколько хороших решений как собственных, так и внешних.

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

Используйте Redux. Не потому, что данная библиотека лучше всех остальных, а потому, что она самая практичная. Многие компании уже применяют Redux, так что и вам придется когда-то его изучить.

Экосистема Redux также предлагает решения практически для любой проблемы, связанной с глобальным управлением состоянием приложения. Рассмотрим некоторые замечательные библиотеки-дополнения, работающие с Redux:

  • redux-thunk обрабатывает асинхронные действия.
  • redux-persist локально хранит данные (поддержка оффлайн).
  • reselect существенно ускоряет запросы к хранилищу.

Альтернативы

  • context  —  встроенная библиотека React, которая хорошо подходит для простых задач, но довольно медленно выполняется, особенно при работе с большими часто изменяющимися данными.
  • recoil  —  разработка для решения конкретной проблемы, не подходит в качестве стандарта.
  • mobx  —  следует шаблону наблюдателя и хорошо подходит для реактивного программирования. Как и recoil, не годится в качестве стандарта для любого нового проекта.

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

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

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

Многие разработчики называют себя поклонниками react-query, потому что эта библиотека просто волшебно работает!

Данная библиотека обрабатывает кэширование устаревших данных и многое другое, она мощная и настраиваемая.

Альтернативы

На рынке представлен еще один игрок под названием SWR  —  это библиотека, аналогичная React Query.

Главное преимущество SWR  —  ее разработала и поддерживает компания Vercel, а это профессионалы, создавшие NextJS. Следовательно, применяя NextJS вы можете рассчитывать на лучшую производительность приложения с библиотекой SWR.

3. Скаффолдинг

Написание приложения на React с нуля  —  сложная задача: настройка Webpack, Bable и т. д. зачастую крайне утомительна.

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

NextJS  —  лучший выбор при создании React-приложения с нуля. Его называют полнофункциональным React-фреймворком.

В документации говорится:

Next.js предоставляет лучшие возможности для разработчиков со всеми функциями, необходимыми для производственного этапа: гибридный статический и серверный рендеринг, поддержка TypeScript, интеллектуальное пакетирование, предварительная выборка маршрутов и многое другое. Конфигурация не требуется.

Самая важная особенность Next.js, выделяющая его среди остальных  —  встроенная поддержка SEO. Вы можете делать SEO и в React, но не так просто, быстро и удобно, как в NextJS.

Альтернативы

Если вы только начинаете работать с React или создаете какой-то простой проект, то рассмотрите и другие варианты:

  • create-react-app идеально подойдет для одностраничного приложения и удобен для начинающих разработчиков.
  • gatsby подойдет для статического сайта, ориентированного на контент, но не для других проектов.

4. Работа с формами

90% веб-приложений содержат те или иные формы, и обработка всех вводимых форм  —  большая боль. Но есть и хорошие новости!

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

React hook form  —  новейшая библиотека для работы с формами, очень производительная и гибкая.

Данная библиотека также оснащена хорошей поддержкой некоторых внешних библиотек дизайна, таких как material-ui и ant-design.

Альтернативы

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

  • Formik поставляется с проверенным временем функционалом валидации ввода, форматирования и обработки ошибок.
  • redux-form  —  не применяйте данную библиотеку! Она сильно вредит производительности приложений.

5. HTTP-запросы

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

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

Лучший способ выполнения HTTP-запросов  —  это Fetch.

У Fetch ограниченные, но мощные возможности, ему по силам поддерживать 95% от рабочей нагрузки приложения.

Альтернативы

Axios можно рассматривать как улучшенную версию fetch.

Данное решение выделяют на фоне остальных несколько особо приятных функций, таких как встроенная защита XSRF, автоматическое преобразование JSON и возможность перехвата HTTP-вызовов. Если вас интересует качественная реализация подобного функционала, то обязательно обратите внимание на Axios.

6. Стили CSS

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

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

styled-components  —  лучший выбор, когда дело доходит до CSS-стилей в React-приложении.

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

Альтернативы

Рассмотрим и другие отличные библиотеки для визуального оформления приложений на React:

  • plain old css поддерживается в React “из коробки” и вполне подойдет для небольших проектов.
  • sass  —  улучшение по сравнению с CSS. Предоставляет великолепные возможности управления стилями CSS и хорошо подходит для средних, а может даже больших проектов.
  • styled-jsx  —  библиотека со множеством схожих функций как у styled-components, но с некоторыми дополнительными возможностями.

7. Готовый пользовательский интерфейс

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

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

Наиболее универсальной и настраиваемой библиотекой пользовательского интерфейса можно назвать Material UI.

Она популярна по всему миру, применяется многими компаниями, очень легко настраивается и достаточно мощная.

Альтернативы

Разберем несколько хороших аналогов, также достойных внимания.

  • semantic-ui  —  много встроенных компонентов.
  • ant-design  —  меньше возможностей для настройки, ограниченные, но приятные компоненты.
  • chakra-ui сейчас набирает популярность.

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

Хорошая документация экономит сотни часов, поэтому будьте проактивны и создайте документацию на самом раннем этапе проекта.

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

Один из лучших способов создания документации  —  это React StyleGuidist.

Данная React-библиотека проста в освоении, но при этом действительно мощная.

Альтернативы

Но, как в других случаях, и найдутся аналоги.

  • js-docs  —  инструмент общего документирования для JavaScript.
  • react-docz  —  очень простое для понимания руководство по написанию документации. Стоит попробовать!

9. Интернационализация и локализация

Если вы создаете продукт в глобальном масштабе, то, вероятно, захотите добавить поддержку нескольких языков в React-приложение.

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

React i18next можно назвать де-факто вариантом для реализации многоязыковой поддержки в приложениях React.

Альтернативы

React-intl добавляет поддержку других библиотек, таких как VueJS и Angular.

10. Анимация

Анимация оживит любое приложение. Рассмотрим несколько хороших вариантов анимирования страницы в React.

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

Обычный CSS  —  лучший способ анимировать React-приложение, просто и быстро. Более того, именно CSS выдает наиболее производительный подход.

Альтернативы

Если вам нужно что-то готовое, то ознакомьтесь с рекомендациями ниже.

  • framer-motion  —  набор готовых к стадии производства анимаций.
  • react-awesome-reveal  —  простые анимации момента “раскрытия”, появления компонента на экране.
  • react-spring  —  еще одна замечательная и готовая к применению библиотека.

11. Отрисовка длинных списков

Стандартная отрисовка (рендеринг) длинного списка не в лучшую сторону сказывается на производительности приложения, поэтому сторонние решения  —  хорошая идея.

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

Если вы разрабатываете приложение с бесконечной прокруткой, то стоит обратить внимание на React Window.

Альтернативы

Если вам не нужна бесконечная прокрутка списка, то расположите данные постранично.

12. Линтеры

Линтер поможет найти почти любую ошибку в коде, он должен присутствовать в разработке каждого проекта.

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

Eslint можно назвать лучшим решением.

Альтернативы

  • jshint  —  старая библиотека.
  • tslint  —  линтер для TypeScript, сейчас уже не рекомендуется.

13. Форматирование

Согласованное визуальное оформление очень важно для любого приложения, а code-formatter сделает половину работы за вас!

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

Все самое лучшее  —  для вас. Больше ничего не нужно!

14. Аналитика

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

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

Самым популярным и мощным инструментом для работы с данными в React можно назвать React Ga. Скорее всего, ничего более вам не понадобится.

15. Тестирование

Не нужно повторять, насколько важно тестирование для любого приложения.

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

Библиотека тестирования React Testing Library.

Крайне простая в освоении, разработанная с учетом реальных условий эксплуатации.

Альтернативы

  • jest  —  для модульного тестирования.
  • cypress  —  end-to-end тестирование.

16. Компоненты для совместной разработки

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

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

Storybook  —  это то, что нужно, если вы в поисках наиболее полного решения задачи совместной разработки на React.

Вот и все. Теперь у вас есть довольно хорошее понимание, какую библиотеку выбрать для разработки.

Читайте также:

Читайте нас в Telegram, VK и Яндекс.Дзен

Перевод статьи Mohammad Faisal: 45 NPM Packages to Solve 16 React Problems

Предыдущая статья5 советов по быстрому написанию кода на любом языке программирования
Следующая статьяОсновы ​программирования на Ruby