Для чего нужен react
Зачем использовать React.js: как эта библиотека помогает разработчикам
За последние 20 лет интернет и технологии веб-разработки изменились до неузнаваемости. Некоторые проверенные временем решения получили второе рождение – например, язык программирования Python, а некоторые новые разработки, подобные Angular и React.js, стремительно набирают популярность. Востребованность React.js связана с новым трендом на обработку данных на стороне клиента.
Для чего нужен React.js
Сейчас на рынке доступно множество различных платформ для веб-разработки, и? по сути, все они взаимозаменяемы. Чтобы в полной мере оценить удобство React.js, стоит вернуться на несколько лет назад, в 2011 год, когда все веб-технологии были основаны на скриптах и рендеринге. Это была эпоха HTML и CSS на стороне клиента, и PHP на стороне сервера.
Все, что надо было сделать разработчику сайта – создать каталог HTML-страниц для их последующей обработки с помощью PHP. Программисты концентрировались на серверной части, не уделяя должного внимания рендерингу на стороне пользователя. Не было никаких уникальных и динамических решений, и сайты выглядели соответствующе.
Затем кое-что изменилось: появились одностраничные приложения, JavaScript, а вскоре и React.js. С JavaScript стало возможным создание веб-приложений с обработкой данных на стороне клиента. Язык JavaScript предусматривает передачу данных и добавление к ним новых атрибутов. Разработчики начали создавать динамические приложения, не вдаваясь в тонкости PHP и серверной обработки. Осталась только одна сложная задача – манипуляции с DOM элементами.
Вклад React.js
Библиотека React.js, впервые представленная в 2013 году, используется для создания динамических веб и мобильных приложений. React.js предусматривает создание независимых повторно используемых компонентов, что значительно повышает производительность приложений. Эта библиотека использует концепцию виртуального DOM – имитационного способа представления структурного документа с помощью объектов.
Виртуальный DOM позволяет имитировать обработку на стороне сервера в браузере пользователя, без необходимости перезагрузки страницы для обновления информации. Это позволяет создавать по-настоящему динамические, интерактивные веб-приложения: любой элемент интерфейса можно обновить, не затрагивая и не перезагружая остальную часть страницы.
Основные особенности React.js
Используя библиотеку React.js, разработчик получает возможность сосредоточиться на пользовательском интерфейсе и компонентах приложения, уделяя меньше внимания коду. Эта библиотека помогает создавать приложения быстрее, декларативный стиль программирования значительно упрощает отладку компонентов и проекта в целом. Рассмотрим главные особенности React.js, которые делают эту библиотеку такой удобной.
Компонентный подход
Библиотека React.js включает в себя компоненты, ответственные за общение в социальных сетях, пользовательский интерфейс, управление состоянием приложения и другие сложные задачи. Модульный подход в React.js упрощает проектирование и предоставляет разработчикам наборы различных готовых компонентов.
Компактность
Библиотека React.js доступна в компактной редакции Minimal React. Этот небольшой пакет не требует времени и усилий для настройки. Он поставляется с удобной опцией разделения кода, которая помогает сократить время загрузки веб-сайта, так как эта функция предотвращает одновременный рендеринг всех компонентов.
Гибкость и развитая экосистема
React.js поставляется с множеством компонентов, интегрируется с другими платформами – все это позволяет разработчикам создавать сложные веб-приложения для любых целей. Этим и объясняется огромная популярность библиотеки React.js.
Обратная совместимость
Самое большое преимущество использования React.js заключается в том, что новые версии этой библиотеки полностью совместимы с предыдущими выпусками. Старые библиотеки не становятся бесполезными после выхода обновлений.
Как React.js может помочь разработчикам
У библиотеки React.js есть и другие полезные преимущества. Отметим некоторые из них.
React.js упрощает создание динамических приложений
Разработкой динамических веб-приложений занимаются многие компании. Пакет React.js найдет применение в любой из них, поскольку значительно сокращает сроки работы над проектами, улучшает функциональность веб-разработок и снижает объемы написания кода вручную.
Простота разработки и повышенная производительность приложений
Виртуальный DOM делает разработку проще, быстрее, понятнее, чем любая другая технология. Кроме того, использование этой технологии помогает избежать полной перезагрузки данных с сервера при внесении изменений в отдельный компонент.
Повторно используемые компоненты
Эта концепция в React.js предусматривает многократное использование одних и тех же компонентов в различных разделах приложения, что значительно сокращает сроки работы над проектом.
Однонаправленный поток данных
React.js помогает вложить дочерний компонент в родительский, позволяя потоку данных быть однонаправленным. Это облегчает разработчикам обнаружение ошибок и их устранение.
Простота изучения
Изучение React.js не представляет трудностей, поскольку эта среда разработки использует HTML, JavaScript и удобные дополнения. Встроенные инструменты и фреймворки помогают разработчику понять логику React.js.
Использование в разработке мобильных приложений
Пакет React Native применяют для создания мобильных приложений, однако эту библиотеку можно использовать и в разработке сайтов. React Native позволяет обходиться минимумом программного кода.
Архитектуры Flux и Redux
Архитектура Flux работает с однонаправленным потоком данных; Redux применяется, к примеру, в обработке исключений, регистрации событий и в управлении операциями в асинхронных запросах API.
Известные сайты, которые используют React.js
Прежде чем мы обсудим, в каких сферах можно применять React.js, давайте посмотрим, какие гиганты уже используют эту технологию. Ниже перечислены примеры таких сервисов.
Социальная сеть Facebook использует React.js для веб-приложения и пакет React Native в мобильном варианте сервиса, доступного для платформ Android и iOS.
Приложение Instagram применяет React.js для систем геолокации и рекомендаций, поискового движка, а также для обработки Google-карт.
Netflix
Вместо интерфейса DOM (объектной модели документа) сервис использует React.js в приложениях для устройств с невысокой производительностью. Компания отдает предпочтение React.js по причине модульности, скорости загрузки и компактности.
React.js – одна из библиотек, используемых мессенджером, наряду с Velocity.js и UnderScore.js. В Whatsapp на основе React.js реализован интерфейс пользователя.
Dropbox
React.js используется облачным сервисом Dropbox как для веб-версии, так и для мобильного приложения.
Где лучше всего использовать React.js
На основе библиотеки React.js можно создавать самые разнообразные типы мобильных приложений и сайтов. Вот несколько интересных идей.
Социальные сети
React.js подходит для создания социальных платформ: Twitter, Facebook, Instagram используют многие возможности этой библиотеки. React.js упрощает разработку функций для размещения текстовых и мультимедийных материалов. Создание новостных лент и трансляций, реализацию комментариев, лайков и системы аутентификации пользователей.
Электронная коммерция
Гигант онлайн-ретейла Amazon использует React.js. Данная библиотека позволяет разрабатывать надежные и многофункциональные системы управления продажами в онлайн-магазине, подходящие для площадок с огромным трафиком. Возможности React.js применяются в популярном мобильном приложении UberEats для заказа и доставки еды.
Развлечения
Среди развлекательных платформ, использующих React.js, можно упомянуть сервисы Netflix, YouTube, TikTok и Spotify. Функциональность этой библиотеки позволяет создавать интерактивные развлекательные веб-сервисы и мобильные приложения с опциями социальной сети – комментариями, лайками, подписками, рейтингами.
Мессенджеры
Функции библиотеки React.js, помимо Whatsapp, используются в мессенджерах Viber и Facebook Messenger. На основе библиотеки React Native можно создать систему технической поддержки пользователей, работающую в реальном времени – на сайте компании или в мобильном приложении.
Планировщики задач
Библиотека React.js отлично подходит для разработки приложений, связанных с управлением проектами и личным временем, хранением заметок, распределением задач, совместной работой. На основе React.js среди прочих работают приложения Todoist, Notion, Things.
Подведем итоги
Мы рассмотрели некоторые из возможных сфер применения библиотеки React.js. Это очень гибкая, универсальная технология, и какая бы идея у вас ни возникла, квалифицированный разработчик сможет ее реализовать. Создание веб-сервиса и приложения на основе React.js будет способствовать росту компании, поскольку даст возможность бизнесу использовать все новейшие тренды.
Пожалуйста, оставьте свои мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, дизлайки, отклики, подписки!
Основы React: всё, что нужно знать для начала работы
Хотите узнать о том, что такое React, но вам всё никак не выпадает шанс изучить его? Или, может быть, вы уже пробовали освоить React, но не смогли толком понять? А может, вы разобрались с основами, но хотите привести в порядок знания? Эта статья написана специально для тех, кто положительно ответил хотя бы на один из этих вопросов. Сегодня мы создадим простой музыкальный проигрыватель, раскрывая основные концепции React по мере продвижения к цели.
Разобравшись с этим материалом, вы освоите следующее:
Предварительная подготовка
Рассмотрим такую ситуацию: к вам за помощью обращается маленький стартап. Они создали приятную страницу, пользуясь которой пользователи могут загружать в их сервис музыку и проигрывать её. Им хочется, чтобы вы сделали самое сложное — вдохнули в эту страницу жизнь.
Для начала создайте новую директорию проекта и добавьте туда три файла. Вот они на GitHub, а вот их код.
Для успешного прохождения этого руководства вам понадобится свежая версия браузера Google Chrome, иначе не будут работать анимации. Выражаем благодарность Стивену Фабре за CSS для кнопки проигрывания и Джастину Виндлу за код визуализации (оригинал можно посмотреть здесь).
Откройте index.html в редакторе кода и в браузере. Пришло время познакомиться с React.
Что такое React?
React — это инструмент для создания пользовательских интерфейсов. Его главная задача — обеспечение вывода на экран того, что можно видеть на веб-страницах. React значительно облегчает создание интерфейсов благодаря разбиению каждой страницы на небольшие фрагменты. Мы называем эти фрагменты компонентами.
Вот пример разбивки страницы на компоненты:
Каждый выделенный фрагмент страницы, показанной на рисунке, считается компонентом. Но что это значит для разработчика?
Что такое компонент React?
Компонент React — это, если по-простому, участок кода, который представляет часть веб-страницы. Каждый компонент — это JavaScript-функция, которая возвращает кусок кода, представляющего фрагмент страницы.
Для формирования страницы мы вызываем эти функции в определённом порядке, собираем вместе результаты вызовов и показываем их пользователю.
Напишем компонент внутри тега
Функции можно писать и так:
React использует язык программирования, называемый JSX, который похож на HTML, но работает внутри JavaScript, что отличает его от HTML.
Вы можете добавить сюда обычный HTML для того, чтобы он попал в пользовательский интерфейс:
Можно и написать собственный компонент на JSX. Делается это так:
Это — стандартный подход — вызывать компоненты так, будто вы работаете с HTML.
Сборка компонентов
Компоненты React можно помещать в другие компоненты.
Вот что выведет вышеприведённый код:
Именно так страницы собирают из фрагментов, написанных на React — вкладывая компоненты друг в друга.
Классы компонентов
До сих пор мы писали компоненты в виде функций. Их называют функциональными компонентами. Однако, компоненты можно писать и иначе, в виде классов JavaScript. Их называют классами компонентов.
В том случае, если вас интересуют компоненты без состояния, предпочтение следует отдать функциональным компонентам, их, в частности, легче читать. О состоянии компонентов мы поговорим ниже.
JavaScript в JSX
В JSX-код можно помещать переменные JavaScript. Выглядит это так:
Теперь текст «I am a string» окажется внутри тега
Кроме того, тут можно делать и вещи посложнее, вроде вызовов функций:
Вот как будет выглядеть страница после обработки вышеприведённого фрагмента кода:
Подводные камни JSX
Для того, чтобы этого добиться, нужно воспользоваться свойством className :
Особенности создаваемого компонента
Метод constructor компонента React всегда должен вызвать super(props) прежде чем выполнять что угодно другое.
Итак, а что нам делать с этим «состоянием»? Зачем оно придумано?
Изменение компонента React на основе его состояния
Состояние — это инструмент, позволяющий обновлять пользовательский интерфейс, основываясь на событиях. Тут мы будем использовать состояние для изменения внешнего вида кнопки проигрывания музыки, основываясь на щелчке по ней. Кнопка может отображаться в одном из двух вариантов. Первый указывает на возможность запуска проигрывания, второй — на то, что музыка проигрывается, и этот процесс можно приостановить. Когда пользователь щёлкает по кнопке, меняется состояние, а затем обновляется пользовательский интерфейс.
В функции render ключевое слово this всегда ссылается на компонент, внутри которого она находится.
Как компонент реагирует на события?
Пользователь может взаимодействовать с компонентом, щёлкая по кнопке проигрывания музыки. Мы хотим реагировать на эти события. Делается это посредством функции, которая занимается обработкой событий. Эти функции так и называются — обработчики событий.
Когда пользователь щёлкает по тексту, представленному тегом
Как должен работать компонент
Теперь, разобравшись с этим механизмом, займёмся обработкой щелчка по кнопке.
Обмен данными между компонентами
Когда состояние Container меняется, свойство PlayButton также меняется, и функция PlayButton вызывается снова. Это означает, что вид компонента на экране обновится.
Внутри PlayButton мы можем реагировать на изменения, так как PlayButton принимает свойства как аргумент:
Если мы поменяем состояние на this.state = < isMusicPlaying: true >; и перезагрузим страницу, на ней должна появиться кнопка паузы:
События как свойства
Свойства необязательно должны представлять собой какие-то данные. Они могут быть и функциями.
Неприятная особенность setState
Поэтому вот так поступать не следует:
Если вы изменяете состояние, основываясь на предыдущем состоянии, нужно делать это по-другому. А именно, следует передать setState функцию, а не объект. Эта функция принимает старое состояние как аргумент и возвращает объект, представляющий новое состояние.
Эта конструкция сложнее, но она необходима только в том случае, если вы используете старое состояние для формирования нового состояния. Если нет — можно просто передавать setState объект.
Что такое ссылки?
Пришло время включить музыку. Для начала добавим тег :
Введение в React, которого нам не хватало
React — это самая популярная в мире JavaScript-библиотека. Но эта библиотека не потому хороша, что популярна, а потому популярна, что хороша. Большинство существующих вводных руководств по React начинается с примеров того, как пользоваться этой библиотекой. Но эти руководства ничего не говорят о том, почему стоит выбрать именно React.
У такого подхода есть свои сильные стороны. Если кто-то стремится к тому, чтобы, осваивая React, тут же приступить к практике, ему достаточно заглянуть в официальную документацию и взяться за дело.
Этот материал (вот, если интересно, его видеоверсия) написан для тех, кто хочет найти ответ на следующие вопросы: «Почему React? Почему React работает именно так? С какой целью API React устроены так, как устроены?».
Почему React?
Жизнь становится проще в том случае, если компоненты не знают об обмене данными по сети, о бизнес-логике приложения или о его состоянии. Такие компоненты, получая одни и те же входные параметры, всегда формируют одни и те же визуальные элементы.
Когда появилась библиотека React — это на фундаментальном уровне изменило то, как работают JavaScript-фреймворки и библиотеки. В то время как другие подобные проекты продвигали идеи MVC, MVVM и прочие подобные, в React был выбран другой подход. А именно, тут рендеринг визуальной составляющей приложения был изолирован от представления модели. Благодаря React во фронтенд-экосистеме JavaScript появилась совершенно новая архитектура — Flux.
Почему команда разработчиков React поступила именно так? Почему такой подход лучше тех, что появились раньше него, вроде архитектуры MVC и спагетти-кода, который пишут на jQuery? Если вы из тех, кого интересуют эти вопросы, можете посмотреть это выступление 2013 года, посвящённое разработке JavaScript-приложений в Facebook.
В 2013 году компания Facebook только что завершила серьёзную работу по интеграции в свою платформу чата. Эта новая возможность была встроена практически в каждую страницу проекта, чат влиял на обычные сценарии работы с платформой. Это было сложное приложение, встроенное в другое приложение, которое и до этого нельзя было назвать простым. Команде Facebook пришлось столкнуться с решением нетривиальных задач, справляясь с неконтролируемой мутацией DOM и с необходимостью обеспечить параллельную асинхронную работу пользователей в новой среде.
Например, как заранее узнать о том, что будет выведено на экране в ситуации, когда что угодно, в любое время и по любой причине, может обратиться к DOM и внести туда изменения? Как обеспечить правильность построения того, что увидит пользователь?
Используя популярные фронтенд-инструменты, существовавшие до React, ничего такого гарантированно обеспечить было нельзя. В ранних веб-приложениях «состояние гонок» в DOM было одной из самых распространённых проблем.
Отсутствие детерминизма = параллельные вычисления + мутабельное состояние.
Главной задачей команды разработки React было решение этой проблемы. Они с ней справились, применив два основных инновационных подхода:
Том Оччино, JSConfUS 2013
Библиотека React смогла серьёзно снизить остроту проблемы неконтролируемых мутаций благодаря использованию архитектуры Flux. Вместо того чтобы присоединять к произвольному количеству произвольных объектов (моделей) обработчики событий, вызывающие обновления DOM, библиотека React дала разработчикам единственный способ управления состоянием компонента. Это — диспетчеризация действий, влияющих на хранилище данных. Когда меняется состояние хранилища, система предлагает компоненту перерендериться.
Когда мне задают вопрос о том, почему стоит обратить внимание на React, я даю простой ответ: «Дело в том, что нам нужен детерминированный рендеринг представлений, а React значительно упрощает решение этой задачи».
Обратите внимание на то, что чтение данных из DOM ради реализации некоей логики — это анти-паттерн. Тот, кто так поступает, идёт вразрез с целью использования React. Вместо этого данные нужно читать из хранилища, а решения, основанные на этих данных, нужно принимать до того, как будут отрендерены соответствующие компоненты.
Если бы детерминированный рендеринг компонентов был бы единственной фишкой React, то одно это уже было бы замечательной инновацией. Но команда разработчиков React на этом не остановилась. Эта команда представила миру библиотеку, обладающую и другими интереснейшими, уникальными возможностями. А по мере развития проекта в React появилось ещё больше всего полезного.
JSX — это расширение JavaScript, позволяющее декларативно создавать компоненты пользовательского интерфейса. JSX обладает следующими заметными возможностями:
В наши дни, если взглянуть на разные фронтенд-инструменты, окажется, что без специального синтаксиса, вроде директивы *ngFor из Angular, тоже не обойтись. Но, так как JSX можно назвать надмножеством JavaScript, создавая JSX-разметку можно пользоваться существующими возможностями JS.
Вот пример JSX-кода:
Правда, при работе с JSX нужно учитывать некоторые особенности, которые, поначалу, могут показаться непривычными.
Вот мои любимые возможности React, касающиеся работы со стилями:
Синтетические события
Жизненный цикл компонента
Концепция жизненного цикла React-компонентов ориентирована на защиту состояния компонента. Состояние компонента не должно меняться в процессе его вывода на экран. Это достигается благодаря следующей схеме работы: компонент оказывается в некоем состоянии и рендерится. Затем, благодаря событиям жизненного цикла, оказывается возможным применение к нему эффектов, можно воздействовать на его состояние, работать с событиями.
Понимание особенностей жизненного цикла компонентов React крайне важно для того чтобы разрабатывать интерфейсы и при этом не сражаться с React, а пользоваться этой библиотекой так, как задумано её разработчиками. «Сражение» с React, вроде неправильного изменения состояния компонентов или чтения данных из DOM, сводит на нет сильные стороны этой библиотеки.
В React, начиная с версии 0.14, появился синтаксис описаний компонентов, основанных на классах, позволяющий обрабатывать события жизненного цикла компонентов. В жизненном цикле React-компонентов можно выделить три важнейших этапа: Mount (монтирование), Update (обновление) и Unmount (размонтирование).
Жизненный цикл компонента
Этап Update можно разделить на три части: Render (рендеринг), Precommit (подготовка к внесению изменений в дерево DOM), Commit (внесение изменений в дерево DOM).
Структура этапа Update
Остановимся на этих этапах жизненного цикла компонента подробнее:
Жизненный цикл React-компонентов
Я полагаю, что представление компонентов в виде долгоживущих классов — это не самая лучшая ментальная модель React. Помните о том, что состояние React-компонентов не должно мутировать. Устаревшее состояние должно заменяться на новое. Каждая такая замена вызывает повторный рендеринг компонента. Это даёт React его, пожалуй, самую главную и самую ценную возможность: поддержку детерминированного подхода к созданию визуальных представлений компонентов.
Подобное поведение лучше всего представить себе так: при каждом рендеринге компонента библиотека вызывает детерминированную функцию, возвращающую JSX. Эта функция не должна самостоятельно вызывать собственные побочные эффекты. Но она, если ей это нужно, может передавать React запросы на выполнение подобных эффектов.
Другими словами, большинство React-компонентов имеет смысл представлять себе в виде чистых функций, получающих входные параметры и возвращающих JSX. Чистые функции обладают следующими особенностями:
Хуки React
В React 16.8 появилась новая концепция — хуки React. Это — функции, которые позволяют подключаться к событиям жизненного цикла компонентов, не пользуясь при этом синтаксисом классов и не обращаясь к методам жизненного цикла компонентов. Компоненты, в результате, стало возможным создавать не в виде классов, а в виде функций.
Вызов хука, в целом, означает появление побочного эффекта — такого, который позволяет компоненту работать со своим состоянием и с подсистемой ввода-вывода. Побочный эффект — это любое изменение состояния, видимое за пределами функции, за исключением изменения значения, возвращаемого функцией.
Хук useEffect позволяет ставить побочные эффекты в очередь для их последующего выполнения. Они будут вызываться в подходящее время жизненного цикла компонента. Это время может настать сразу после монтирования компонента (например — при вызове метода жизненного цикла componentDidMount), во время фазы Commit (метод componentDidUpdate), непосредственно перед размонтированием компонента (componentWillUnmount).
Обратили внимание на то, что с одним хуком связано целых три метода жизненного цикла компонента? Дело тут в том, что хуки позволяют объединять связанную логику, а не «раскладывать» её, как было до них, по разным методам жизненного цикла компонента.
Многим компонентам нужно выполнять какие-то действия во время их монтирования, нужно что-то обновлять при каждой перерисовке компонента, нужно освобождать ресурсы сразу перед размонтированием компонента для предотвращения утечек памяти. Благодаря использованию useEffect все эти задачи можно решить в одной функции, не разделяя их решение на 3 разных метода, не смешивая их код с кодом других задач, не связанных с ними, но тоже нуждающихся в этих методах.
Вот что дают нам хуки React:
Компоненты-контейнеры и презентационные компоненты
Я, стремясь улучшить модульность компонентов и их пригодность для многократного использования, ориентируюсь на разработку компонентов двух видов:
▍Презентационные компоненты
Рассмотрим особенности презентационных компонентов:
Лучшее — враг хорошего.
▍Компоненты-контейнеры
Компоненты высшего порядка
Компонент высшего порядка (Higher Order Component, HOC) — это компонент, который принимает другие компоненты и возвращает новый компонент, реализующий новый функционал, основанный на исходных компонентах.
Компоненты высшего порядка функционируют, оборачивая одни компоненты другими. Компонент-обёртка может реализовывать некую логику и создавать элементы DOM. Он может передавать оборачиваемому компоненту дополнительные входные параметры, а может этого и не делать.
В отличие от хуков React и от механизма render props, компоненты высшего порядка поддаются композиции с использованием стандартного подхода к композиции функций. Это позволяет декларативно описывать результаты композиции возможностей, предназначенных для использования в разных местах приложения. При этом готовые компоненты не должны знать о существовании тех или иных возможностей. Вот пример HOC с EricElliottJS.com:
Кстати, учитывая то, что аутентификация пользователей с помощью пароля устарела, и то, что это — опасная практика, в наши дни стоит использовать другие методы аутентификации пользователей.
Почти все страницы вышеупомянутого сайта используют все эти возможности. Учитывая то, что их композиция выполнена средствами компонента высшего порядка, можно включить их все в компонент-контейнер, написав всего одну строку кода. Вот, например, как это будет выглядеть для страницы с уроками:
У подобных компонентов высшего порядка есть альтернатива, но она представляет собой сомнительную конструкцию, называемую «pyramid of doom» («пирамида погибели») и ей лучше не пользоваться. Вот как это выглядит:
И это придётся повторить на каждой странице. А если надо будет что-то в этой конструкции изменить, то изменения в неё придётся вносить везде, где она присутствует. Полагаю, недостатки такого подхода совершенно очевидны.
Использование композиции для решения задач общего характера — это один из лучших способов уменьшения сложности кода приложений. Композиция — это настолько важно, что я даже написал об этом книгу.
Итоги
Что дальше?
В этом материале о React мы затронули множество концепций функционального программирования. Если вы стремитесь к глубокому пониманию принципов разработки React-приложений, вам полезно будет освежить свои знания о чистых функциях, об иммутабельности, о каррировании и частичном применении функций, о композиции функций. Соответствующие материалы вы можете найти на EricElliottJS.com.
Я рекомендую использовать React совместно с Redux, Redux-Saga и RITEway. Redux рекомендуется использовать совместно с Autodux и Immer. Для организации сложных схем работы с состоянием можно попробовать воспользоваться Redux-DSM.
Когда вы разберётесь с основами и будете готовы к созданию реальных React-приложений, обратите внимание на Next.js и Vercel. Эти инструменты помогут автоматизировать настройку системы сборки проекта и CI/CD-конвейера, с их помощью можно подготовить проект к оптимизированному развёртыванию на сервере. Они дают тот же эффект, что и целая команда DevOps-специалистов, но пользоваться ими можно совершенно бесплатно.
Какие вспомогательные инструменты вы применяете при разработке React-приложений?