В данной статье мы рассмотрим текущее состояние экосистемы React, а также какие инструменты и библиотеки нам необходимы чтобы покрыть все основные кейсы для успешной разработки приложения. Мы рассмотрим язык, библиотеки для различных use-кейсов и инструменты которые удобны, полезны, а иногда и необходимы для разработки фронтенда в 2022 году. Считаю, что статья будет полезна как новичкам, которые хотят понимать, что им важно знать, чтобы уверенно разрабатывать будущие проекты, так и профессионалам, которые могли погрязнуть в 3-4 годовалых проектах с легаси кодом и им хотелось бы посмотреть на стороннее мнение о экосистеме. Начнем с языка и пунктов, которые лежат у основ реакта и относятся больше к экосистеме всего фронтенда. Последние пару лет TS плотно лег в список необходимых инструментов для создания веб приложений. Он окончательно снял с наших плеч метание между babel плагинами, которые позволяют включить тот или иной синтаксис в JS, а также дал нам больше строгости в код. Теперь мы просто везде пишем на TS и я рад, что рынок веб разработки не свернул с тропы типизации. Сейчас очень редко мы слышим, что TypeScript удоражает и замедляет разработку. Вторая отличная новость, что мы наконец таки перешагнули бездонную пропасть между Internet Explorer 11 и текущими браузерами. Microsoft официально прекратит поддержку браузера летом 2022 года. Хотя естественно он никуда не изчезнет и будет еще доступен в специальных сборках Windows, а также браузер Edge будет иметь режим IE11, для отображения старых сайтов, но в любом случае крупные проекты уже начали отказ от поддержки IE и это очень радует. Этот шаг нам дает возможность полноценно пользоваться новыми спецификациями и функциями, а также новыми версиями библиотек, которые основаны на API, не поддерживаемом IE (Mobx, Bootstrap и пр). Webpack остается бесспорным лидером в своей нише, являясь супер настраиваемым комбайном для подготовки вашего проекта к запуску в любых средах. Он обновился до пятой версии, привнеся нам большую производительность и крутые фичи такие как Module Federation Babel также является основным инструментом, который может транспайлить наш код в старые синтаксисы, добавлять полифилы, кешировать результат и прочее. Но текущие лидеры сильно отстают в скорости таким инструментам как ESBuild, Vite и SWC. Vite в свою очередь претендует на конкуренцию Webpack, называя себя инструментом для фронтенда нового поколения. Поэтому смею предположить, что в скором времени лидерские позиции в сфере сборщиков могут поменяться. Приближаясь все ближе к Реакту нельзя забывать основной инструмент для создания проектов - Create React App. Он все также полностью снимает с нас вопрос о настройке проекта и конфигурировании сборки и вам действительно достаточно выполнить одну команду в терминале и можно сразу начать работу. Последний релиз версии 5.0, добавил нам возможность использовать Tailwind без изменения конфигурации, которая кстати говоря была возможна только с использованием сторонних библиотек (пр. Craco) Ну а теперь давайте пройдемся по текущей ситуации с экосистемой Реакта. Думаю тут стоит начать с компонентов, а именно с функциональных. Как бы я не любил классовые компоненты, считаю что функциональные окончательно победили и теперь необходимо уметь готовить сложные компоненты заворачивая логику в хуки, понимая когда важно их использовать, а когда можно обойтись без них (я про useCallback и useMemo). Также большинство библиотек с обновлениями предоставили собственные хуки, для получения данных или каких-нибудь действий, что тоже в свою очередь заставляет нас переписывать классы на функции. Грядущая 18ая версия реакта привнесет полезное обновление для работы хуков - автоматический батчинг всех вызовов сеттера useState, что позволит избежать лишних рендеров: Учитывая, что Реакт всегда являлся библиотекой для отрисовки интерфейсов, то для создания сложного проекта с статическими страницами, серверным рендерингом, кешированием и прочим, нам приходится готовить кучу сторонних библиотек, кода и инструментов. Решают эту проблему фреймворки, которые основаны на React и из коробки привносят более широкий функционал для разработки масштабных проектов. Лидерами в этой нише являются NextJS и Gatsby. Они привносят возможность серверного рендеринга и статическую генерацию страниц с очень простой настройкой. Также они обладают рядом готовых к использованию оптимизаций, которые позволяют добиться высокой скорости работы приложения. NextJS в конце 2021 года получил обновление до 12 версии. В ней команда разработчиков как и прежде сконцентрирована на оптимизации скорости работы приложения. Были представлены Middleware для страниц, позволяющие выполнять действия с запросом в момент его исполнения, что дает возможность авторизовывать пользователя и делать редиректы, еще до выполнения логики страницы. Также NextJS получил Rust compiler (SWC), который в разы увеличивает скорость сборки бандлов приложения. Gatsby обновился до 4 версии и привнес улучшенное решение статической генерации сайтов, которая не требует пререндера в момент сборки проекта. Но самым важным событием конца 2021, в нише фреймворков, стал open source релиз проекта под названием Remix. Это SSR фреймворк, который обладает функционалом в виде вложенных роутов, что дает возможность загружать контент страницы параллельно, а также и обрабатывать ошибки на каждый роут. Еще одним интересным подходом является работа с формами, которая реализована как в старые времена через браузерный API форм, это позволяет реализовывать простые страницы с формами, которые могут работать вообще JS на стороне браузера. Как вывод этого раздела, то лично для меня развитие и существование фреймворков на Реакте имеет огромный плюс для как нас, так и для индустрии. Фреймворки всегда создавались с целью упрощения и ускорения разработки проектов, предоставляя готовые к работе инструменты, уменьшая нашу работу. Знание этих фреймворков в 2022 я считаю обязательным, так как они продолжают заходить в enterprise и многие крупные компании создают проекты именно на реакт фреймворках. Далее рассмотрим библиотеки, которые используются чаще всего и стали дефолтным набором почти любого проекта В нише SPA приложений лидером был и остается react-router. Он удобен, прост в освоении и предоставляет хуки на все необходимые случаи.  С последним мажорным обновлением react-router предложил нам кардинально новый подход к организации роутов, который также был интегрирован в Remix. Более подробно можно ознакомиться на главной странице проекта reactrouter.com (Спасибо за комментарий @Amper) Противопоставить react-router можно, только встроенные в реакт фреймворки роутеры, которые базируются на файлах. Под каждую страницу нам достаточно добавить файл и экспортировать из него компонент. В дополнение такой роутинг предоставляют оптимизацию, разделяя страницы проекта на чанки, что уменьшает размер загружаемого контента на страницах. Это самый жаркий раздел, в котором уже который год не утихают холивары на предмет лучшего инструмента для управления центральным состоянием приложением, в простонародье Сторы. Главным игроком на рынке состояний все также остается Redux. Хоть и хайп вокруг него утих, но за время своей славы он успел попать в enterprise и сложный продакшн. Поэтому мы долго теперь будем иметь с ним дело. Да и вакансий требующих его знание подавляющее большинство. Стоит заметить, что Redux развивается в сторону решения основных спорных моментов и с релизом Redux Toolkit появилась возможность сократить количество boilerplate кода и мутировать состояние, если кому-то было это важно делать. Вторым по популярности менеджером состояний является Mobx, за счет простоты использования и реализации реактивности через наблюдаемые объекты (observable). В работе с формами разработчики часто самостоятельно описывают хранение данных форм и их обработку. И это может быть оправдано для совсем небольшого проекта. В случае когда в проекте большое количество сложных форм, нам на помощь приходят библиотеки, которые уменьшают объем повторяемого кода и упрощают нам работу: react-hook-form - По моему мнению лучший инструмент для создания форм. Используя хуки, можно легко создавать формы, обрабатывать и валидировать данные. Библиотека отличается еще тем, что хранит стейт форм с помощью самого браузера, что позволяет достичь практически нулевого количества пере-рендеров форм в процессе работы с ней. formik - Еще одна популярная библиотека для работы с формами. Реализована она через компоненты, но также возможно использовать хуки. Инструменты, которые мы используем для стилизации наших проектов не меняется кардинально из года в год. А самое важное, что тут не наблюдается какого-то единственного лидера. Я же только приведу небольшой список подходов и библиотек, которые чаще всего встречаю в проектах: Чистый CSS или препроцессоры (SCSS, LESS) Tailwind styled-components UI библиотеки Material UI Ant Design React-Bootstrap Как и с стилизацией, в работе с данными сервера, у нас есть устойчивый набор инструментов, которые практически всегда вы будете встречать на своем пути. fetch / axios - для работы с REST API Apollo GraphQL swr, react-query - библиотеки, которые по мимо работы с запросами предоставляют возможность кеширования запросов с ревалидацией, показа состояния загрузки и обработку ошибок. Предлагаю поделиться своим видением текущей экосистемы реакта. Буду рад прочесть другие мнения в комментариях. Всем удачи и не болейте! 👋 Frontend Engineer