Rivalry2

Библиотека React: особенности, перспективы, ситуация на рынке труда

2026-02-26 22:54 Diff

https://ru.hexlet.io/blog/posts/biblioteka-react-review-article

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

React — JavaScript-библиотека для работы с пользовательскими интерфейсами (UI), которую создали разработчики Facebook. Библиотеку начали использовать на сайте этой социальной сети в 2011 году. А в 2013 году Facebook открыл исходный код React.

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

React применяют для отрисовки компонентов пользовательского интерфейса. Также библиотека может полностью управлять фронтендом. В этом случае React используют с библиотеками для роутинга и управления состоянием, например, Redux и React Router.

Содержание

Зачем нужен React
Как работает React
Преимущества и недостатки React
Конкуренты React.js
Востребованность React.js
Стоит ли учить React: мнение экспертов о развитии и перспективах библиотеки

Зачем нужен React

Фронтенд современных сайтов пишут на JavaScript. Этот язык программирования позволяет создавать интерактивные интерфейсы. То есть реагирующие на действия пользователей.

Например, вы можете написать комментарий к странице и опубликовать его одним нажатием кнопки. Он появится на сайте без обновления страницы. Все это благодаря JavaScript.

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

С этой целью создают библиотеки и фреймворки. Первое — набор функций и компонентов, которые применяют для своего кода. Второе — готовые каркасы для приложений, которые можно использовать с небольшими видоизменениями.

React — самая популярная библиотека для JS, его применяют на многих проектах.

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

Где используют React:

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

Как работает React

Расскажем о ключевых особенностях библиотеки, которые обеспечили ей популярность.

Декларативный подход

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

Проще говоря, разработчик при создании кода указывает, как должен себя повести интерфейс при получении определенных данных или наступлении событий.

Библиотека позволяет оптимизировать процесс разработки за счет того, что программисту не нужно описывать подробности. React.js самостоятельно будет обновлять элементы, ориентируясь на условия. Задача программиста — грамотно описать их.

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

Компоненты

Главная сущность в этой библиотеке — компоненты. Они представляют собой отдельные элементы на странице. Каждый компонент в React — инкапсулированный, то есть содержит в себе весь комплект данных и методов, необходимых для работы.

Инкапсуляция позволяет хранить состояние элементов в них самих. Это делает их изолированными и самостоятельными.

Эта особенность React предусматривает постоянное переиспользование элементов. Один и тот же элемент можно применить на другой странице или в другом разделе сайта.

Преимущества такого подхода очевидны — разработчику не нужно заново писать код для элемента. А отсутствие сложных зависимостей между ними упрощает отладку.

Рендеринг компонентов

У каждой страницы в интернете есть своя структура. Это так называемое DOM-дерево или объектная модель документа. Он состоит из тэгов HTML — языка разметки и каскадных таблиц стилей — CSS, а также подключенного к нему коду на JavaScript.

У библиотеки React есть специальный механизм для управления рендерингом всех компонентов на странице. То есть создания визуального представления элементов.

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

Например, если после какого-либо действия страница нуждается в перезагрузке, React будет работать не с реальной структурой, а с копией. Что позволит пользователю быстрее увидеть результат.

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

Этот процесс основан на обновлении DOM по частям. В памяти остаются две копии: старая и новая. При необходимости React сравнивает две версии и меняет только ту часть, в которой что-то изменилось, а не весь DOM целиком.

За счет этого достигается оптимизация загрузки.

Передача свойств компонентов

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

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

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

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

Hooks

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

Это позволяет отказаться от применения классов. Вместо этого при изменении состояния автоматически выполняют заданные функции.

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

JSX

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

На практике это выглядит так: программист пишет компонент с HTML, но тот становится объектом на JavaScript с соответствующими возможностями. Это не всегда просто для новичков, но удобно для опытных разработчиков.

Developer Tools

Это специальный набор инструментов в виде расширения для браузера. Developer Tools в React помогают в деле проверки и отладки написанного кода.

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

Преимущества и недостатки React

Разберемся в преимуществах и недостатках этой библиотеки — как технических, так и с точки зрения обучения.

Технические достоинства:

Скорость загрузки

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

Быстрая разработка

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

Минимизация ошибок

Использование этой библиотеки позволяет забыть о многих рутинных операциях. Это уменьшает влияние «человеческого фактора»: в готовых решениях сложнее ошибиться. За счет этого использование React на проекте упрощается отладка и уменьшается количество багов.

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

Распространенность

Сейчас он занимает первое место среди самых популярных инструментов для разработки интерфейсов. Из ближайших конкурентов — фреймворки Vue.js и Angular. Но о них мы поговорим ниже. В настоящее время библиотеку активно используют на проектах в крупных компаниях и найти работу со знанием React относительно легко.

Крупное комьюнити

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

Большая экосистема

Библиотека React регулярно обновляется. А за счет крупного комьюнити есть множество энтузиастов, которые создают свои собственные решения. Их можно применять совместно с React. Речь идет и о дополнительных библиотеках, и об инструментах.

Недостатки у этой библиотеки тоже есть:

Сложность изучения

React отличается собственной архитектурой на основе компонентов. Новичкам бывает сложно овладеть всеми концепциями этой библиотеки. Большое внимание при разработке на React уделяют улучшению производительности при помощи виртуального DOM. А это потребует перестройки мышления.

Технология JSX также часто вызывает затруднение: разработчикам бывает тяжело собирать воедино язык разметки и JavaScript.

Высокий порог входа

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

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

Таким образом, от программиста с React требуется больше квалификации.

Конкуренты React.js

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

Angular

Этот фреймворк выпустила компания Google. Его основная цель — создание одностраничных приложений на JavaScript и TypeScript. Angular — наследник AngularJS, разработанного в 2009 году. Но это другой фреймворк и обратной совместимости у них нет.

Он обладает принципиально другой архитектурой и даже написан на другом языке — TypeScript, а не на JavaScript.

Главное преимущество Angular — модульность. Этот фреймворк позволяет собирать приложения на основе готовых компонентов — модулей. Их пишут и тестируют изолированно, что добавляет надежности.

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

Angular применяют для создания крупных корпоративных приложений. Его преимущество в обилии инструментов для стандартных задач. Однако это может быть и ограничением. В Angular много «навязанных» решений и меньше гибкости по сравнению с React.js. Его редко используют для MVP и небольших проектов.

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

Vue

Vue.js — относительно молодой фреймворк для создания пользовательских интерфейсов. Его отличительная особенность — представление, которое изменяется по мере изменения модели.

Vue используют для создания быстрых сайтов, небольших блогов и нагруженных веб-приложений. Этот фреймворк подходит для внедрения в уже существующие проекты. На нем часто переписывают отдельные модули, а не всю структуру целиком.

Vue, по сравнению с аналогами, отличается простотой и низким порогом входа. Его сможет без труда освоить даже начинающий веб-разработчик. Vue применяют для MVP и средних приложений.

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

Многие предпочитают делать проекты на этом фреймворке из-за более простого найма разработчиков. Освоить Vue несколько проще.

Востребованность React.js

Согласно исследованию портала Stackoverflow, React занимает второе место в списке самых популярных фреймворков и технологий. Немногим превосходит его только Node.js, который адаптирует JavaScript для серверной разработки.

А в технологиях для фронтенда React уверенно побеждает всех конкурентов.

Если посмотреть по статистике загрузок, то эта библиотека также уверенно лидирует, оставляя позади двух самых сильных конкурентов: Vue и Angular.

Что касается статистики hh.ru, на момент написания статьи:

React фигурировал в 3473 вакансиях.
Angular — в 1339.
Vue — 1977.

Стоит ли учить React: мнение экспертов о развитии и перспективах библиотеки

Специально для этой статьи опытные разработчики поделились мыслями о перспективах React, целесообразности изучения этой библиотеки и инструментах для управления состоянием и альтернативных библиотеках и фреймворках. Эксперты ответили на такие вопросы:

По данным LogRocket, доля React на рынке UI-фреймворков и библиотек составляет около 60%. Как вы считаете, в обозримом будущем эта ситуация может существенно измениться?
Провокационный вопрос: фреймворк или библиотека, который обойдёт React в будущем, уже существует или он только должен появиться?
Какие новые возможности React лично вы ждёте больше всего? Когда они могут появиться?
Для управления состоянием в более или менее сложных React-приложениях чаще всего используется Redux. Появятся ли альтернативы Redux, которые станут популярными и общепринятыми способами управления состоянием?
Вопрос, ответ на который заинтересует новичков: стоит ли изучать React, чтобы устроиться на работу фронтенд-разработчиком в 2020 или 2021 году?

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

О популярности

Сейчас появляется все больше фреймворков на рынке, и этот факт сам по себе снижает долю React. Думаю, что эта библиотека будет постепенно уходить из предпочтений разработчиков. Хоть и на данный момент это самое лучшее и популярное решение.

О библиотеке или фреймворке, который обойдёт React в будущем

Да, я думаю, что такой инструмент уже есть, хоть и в очень зачаточном состоянии. При должном развитии, популяризации и организации обучения, этот новый инструмент заменит React в привычных сферах. Это решение построено на основе стейт-менеджера Effector. Автор Effector пришел к выводу, что управление состоянием неотделимо от отображения. Пока что рано рассказывать об этом решении на большую аудиторию. Но желающие смогут легко найти информацию об Effector в поиске.

О новых возможностях

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

Помимо этого, хочется tree-shaking. Слишком уж много весит react-dom. Я не хочу «платить» за то, чего не использую.

О Redux и других инструментах управления состоянием

Redux изжил себя. Насчёт общепринятых или популярных — не знаю. Но я сам, а также в рабочих проектах с командой, полностью перешёл на управление состоянием с помощью Effector. Он поддерживает SSR, TypeScript, не привязан к фреймворку. Обеспечивает декларативные связи между сущностями, что помогает визуально отсматривать логику.

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

Effector позволяет мне реализовать это все без бойлерплейта, десятков различных методов, классов и декораторов. Лишь обычный JS/TS.

О целесообразности изучения

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

Об эксперте

Сергей Сова, Frontend Team-Lead at REDMADROBOT. Frontender, Podcaster, Rustacean. Telegram, «ВКонтакте».

Анна Селезнёва: начинать обучение надо не с фреймворка, а с чистого JavaScript

О популярности

На мой взгляд, ситуация будет меняться, но несущественно, если говорить о цифрах. State of JavaScript наглядно показывает, что лидеры на рынке фреймворков постоянно меняются, и в любой момент могут появиться конкурентоспособные новички.

История успеха Svelte говорит о том, что в ближайшем будущем может появиться что-то новое, что заберет часть аудитории у React. Скорее всего, React еще долгое время будет если не на первом месте, то определенно в топе фреймворков.

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

О библиотеке или фреймворке, который обойдёт React в будущем

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

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

О новых возможностях

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

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

О Redux и других инструментах управления состоянием

Новые инструменты появятся. Я бы даже сказала, что уже сейчас они есть. С одной стороны, появление хуков заставило взглянуть на управление состоянием под другим углом. С другой стороны, клиентские реализации для GraphQL (например, Apollo) позволяют некоторым проектам обходиться без Redux. Также не стоит недооценивать MobX, который развивается и в будущем может предложить неплохую альтернативу.

О целесообразности изучения

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

Как раз недавно на митапе MinskJS, который я помогаю организовывать, соорганизатор митапов MinskCSS и MinskJS Саша Шинкевич рассказывала доклад на тему «Как перестать выбирать фреймворки и начать жить». Мне кажется, это хорошая иллюстрация современного фронтенда. Выбирайте фреймворк не ради фреймворка, а для достижения хорошего результата.

Об эксперте

Анна Селезнёва, Lead Frontend Developer @ Spiral Scout.

Артём Арутюнян: на React уже написано слишком много, глобально бизнесу не выгодна его депопуляризация

О популярности

В обозримом по меркам фронтент-разработки будущем доля React существенно не упадёт. На нём уже написано слишком много, глобально бизнесу не выгодно его депопуляризация.

О библиотеке или фреймворке, который обойдёт React в будущем

Думаю, такого инструмента ещё нет. Но это мне как идеалисту хочется чего-то принципиально нового. Опыт Vue показывает, что может быть иначе.

О новых возможностях

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

О Redux и других инструментах управления состоянием

Это сложный вопрос, но серебряной пули, думаю, не будет. Redux Toolkit может ещё продлить жизнь Redux, но, честно говоря, это выглядит как серьезный костыль, и часть очень важных проблем он все ещё не решает. Reatom выглядит логичной эволюцией и я, конечно, надеюсь, что он отнимет часть рынка. При этом интересными выглядят и альтернативные подходы вроде graphQL-driven или grammarly/focal, думаю, они тоже будут развиваться.

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

Возможно будет ещё оптимизирован в плане DX и обезмагивания MobX, и его будут ждать новые высоты — автор все ещё активно им занимается.

XState мне кажется очень нишевым, как Rx и Effector.

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

О целесообразности изучения

Точно стоит, индустрия в лице бизнеса ещё долго будет нуждаться в разработчиках на React.

Об эксперте

Артём Арутюнян, автор библиотеки Reatom.

Роман Макаров: важно не забывать, что React — всего лишь инструмент, а по-настоящему ценно знание фундаментальных вещей

О популярности

В обозримом будущем, кажется, крупных изменений не стоит ждать. Во-первых, из-за инертности — очень уж много написано на React и вокруг него. Во-вторых, инструмент объективно удобный.

О библиотеке или фреймворке, который обойдёт React в будущем

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

О новых возможностях

Лично мне хочется дальнейшего развития create-react-app как инструмента для быстрого старта. Разработчики пошли по пути кастомных темплейтов вместо конфигурирования через cli при создании приложения. Это, конечно, уже лучше, чем создавать и поддерживать собственные бойлерплейты, но всё ещё недостаточно для того, чтобы считать CRA промышленным стандартом.

Кроме того, API хуков пока кажется неким промежуточным решением, поверх которого должна быть построена более удобная система работы с состоянием и методами жизненного цикла.

О Redux и других инструментах управления состоянием

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

За последние годы вокруг Redux возникла целая экосистема библиотек с мидлварами и хэлперами для удобной работы, а квинтэссенцией стала библиотека redux-toolkit. Из существующих альтернатив лично мне нравится библиотека mobx-state-tree, построенная поверх Mobx. И если для небольших приложений эта библиотека выглядит избыточной, то на проектах с большим количеством логики в тандеме с хуками она прекрасна.

О целесообразности изучения

Я думаю, что эта библиотека еще долгое время будет присутствовать в большинстве объявлений о поиске фронтенд-разработчиков, поэтому мой ответ — да, её стоит изучать. Но важно не забывать, что это всего лишь инструмент, а по-настоящему ценно знание фундаментальных вещей — операционных систем, сетей, структур данных, алгоритмов, концепций и парадигм.

Об эксперте

Роман Макаров, фронтенд-разработчик в Хекслете.

Сергей Головин: чем опытнее разработчик, тем менее важной для него становится конкретная библиотека, фреймворк и даже язык программирования

О популярности

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

Первый и основной — очередной технологический сдвиг. Так было, когда «эпоха jQuery» закончилась в связи с переносом бизнес-логики с сервера на клиент, что, в свою очередь, закономерно произошло из-за значительного увеличения производительности, как компьютеров в целом, так и браузеров в частности, существенного роста скорости доступа к сети интернет, а также из-за запроса со стороны бизнеса на перенос сложных технических решений в веб без потери отзывчивости, присущей десктоп-приложениям.

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

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

О библиотеке или фреймворке, который обойдёт React в будущем

Оба варианта возможны. Но мне кажется, что второй вариант более правдоподобен. При этом нельзя исключать, что библиотекой, которая обойдет React в будущем, может стать условный React 2. Так или иначе, прогнозы по этому поводу делать очень сложно, но хотелось бы верить, что решение, которое станет популярнее React, будет чем-то принципиально новым, иначе это просто очередная смена шила на мыло.

О новых возможностях

На мой взгляд, вместо добавления чего-то нового команде React стоит сфокусироваться на доработке и стабилизации старого. Переработка методов жизненного цикла и добавление хуков привели к тому, что сейчас есть несколько разных способов делать похожие вещи, при этом best practices на этот счет в сообществе пока еще не сложились. Соответственно, мы имеем два параллельных мира: мир разработчиков, предпочитающих классы, где все еще есть неоднозначная замена componentWillReceiveProps на getDerivedStateFromProps, и мир разработчиков, предпочитающих функциональные компоненты и хуки, имеющие перегруженный и местами запутанный API.

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

О Redux и других инструментах управления состоянием

Такие решения уже появились. Например, те же MobX и Effector являются отличными production-ready альтернативами. Конечно, нельзя сказать, что они настолько же популярны, как Redux, и это, возможно, является сейчас их основным недостатком, из которого уже вытекают более конкретные. Например, сообщество этих библиотек значительно меньше, чем у Redux, из-за чего может быть сложнее найти готовые решения или ответы на возникшие вопросы. Банальное, но существенное преимущество Redux — огромное количество статей и гайдов по связке React + Redux.

Безусловно, есть много опытных разработчиков, для которых отсутствие готовых решений и малочисленное сообщество не являются минусом, так как они вполне могут сами написать необходимые библиотеки или дописать недостающую этим state-менеджерам функциональность, а также найти ответ на свой вопрос, прочитав исходники этих библиотек. Но не стоит забывать, что есть очень много разработчиков, которые просто не видят смысла переходить на другие библиотеки, понимая, что те недостатки, которые, безусловно, есть в Redux, не перевешивают для них его достоинств. Так или иначе монополии Redux уже не существует, разные команды по разным причинам выбирают разные решения, и выбор у них, безусловно, есть.

О целесообразности изучения

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

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

Об эксперте

Сергей Головин — ведущий разработчик/технический руководитель CSSSR.

Анна Волкова: много компаний с современным стеком технологий используют React, поэтому эту библиотеку стоит учить

О популярности

Да, думаю, что в какой-то момент ситуация может измениться, но это будет не очень быстро, как с jQuery. Когда появилась эта библиотека, она заняла большую нишу. Но ведь jQuery еще используют где-то, также будет и с React.

О библиотеке или фреймворке, который обойдёт React в будущем

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

О новых возможностях

Жду от React стабильности и совместимости.

О Redux и других инструментах управления состоянием

Ответила бы тут также, как и на второй вопрос. Очень много проектов написано с использованием связки React/Redux, поэтому пока Redux вне конкуренции.

О целесообразности изучения

Да, безусловно стоит, так как много компаний с современным стеком технологий используют React.

Об эксперте

Анна Волкова, фронтенд-разработчик в «Альфа-банке».

Максим Лебедев: такой же крутой экосистемы, как у React, на горизонте не видно

О популярности

По-моему мнению, в IT, а тем более в такой динамичной развивающейся его части, как технологии для веба и всё, что с ним связано, «обозримым будущим» можно называть период времени максимум в 2-3 года. React дает действительно неплохое видение, как нужно делать интерфейсы и веб в целом (с учетом всей той экосистемы, которая образовалась вокруг него). И то, что он предлагает, в достаточной степени гибко, производительно и совместимо с браузерами. Да есть интересные вещи типа Polymer Project, да и много чего ещё, что может давать какие-то плюсы, например, в производительность, но это требует каких-то дополнительных усилий, чтобы понять, как это правильно готовить. Такой же крутой экосистемы, как у React, именно с точки зрения порога вхождения, гибкости, производительности на горизонте «обозримого будущего» пока не видно, по-моему.

О библиотеке или фреймворке, который обойдёт React в будущем

Честно говоря, для меня это не является провокационным вопросом :-) Сами создатели React считают его библиотекой, и я склонен с ними согласиться. Да, React с легкостью можно назвать MV-фреймворком, который берет на себя довольно большую часть ответственности за архитектуру вашего приложения. Но степень этого охвата в то же время не такая всеобъемлющая, как у Angular, Vue, Ext — они в своей официальной документации дают вам полное видение того, как должна выглядеть ваша архитектура, и вполне обоснованно называют себя фреймворками. С другой стороны, вокруг React образовалась существенная экосистема, которая в большинстве случаев говорит вам, как нужно делать React-приложение. И вот если взять React + экосистема, то можно увидеть уже кучку фреймворков. Вы сами можете сделать еще один фреймворк на React, если вам это нужно.

О новых возможностях

Мне нравится их идея сделать в React 17 механизм, позволяющий из коробки рендерить некие заглушки в момент асинхронной загрузки данных.

О Redux и других инструментах управления состоянием

По-моему, этих конкурентов уже и так полно, вы не находите? Да, все они — некая вариация на тему Flux(читай MVC)-подобных архитектур c однонаправленным потоком данных, но их действительно много. Redux, MobX, Cerebral, xstate, и я думаю, это даже не половина всего, что есть в современной экосистеме. Да, Redux наиболее популярен, наверное, но совсем не значит, что он общепринят и безальтернативен на данный момент. Если же имеется в виду что-то принципиально новое, то я даже не знаю, скорее всего ничего лучше вариаций на тему MVC всё-равно не придумаешь, особенно если в качестве View у тебя «реакт головного мозга».

О целесообразности изучения

Однозначно стоит. Но нужно понимать, что самое важное — не знать все тонкости React, а понимать принципы, на которых он построен, что лежит в основе его архитектуры. Также не стоит забывать про базовые знания касательно JS и веба в целом. То есть если вы научились в хуки на React, но не понимаете, зачем в JS нужны прототипы, что такое замыкание, не представляете same origin policy и для чего оно нужно — это повод задуматься и изучить вопрос.

Об эксперте

Максим Лебедев, тимлид команды интеграций в Miro.

Алексей Резвов: знание React делает любое резюме весомее

О популярности

Мои личные наблюдения подтверждают тренд на снижение доли React на рынке. В первую очередь за счет увеличения доли Vue, к тому же растут и другие фреймворки вроде Aurelia, Svelte. Существенного изменения ждать не стоит, скорее всего React продолжит, постепенно замедляясь, терять долю рынка.

О библиотеке или фреймворке, который обойдёт React в будущем

Это вполне возможно, однако рынок разработки фронтенд-приложений ещё довольно непредсказуем, я бы не стал загадывать.

О Redux и других инструментах управления состоянием

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

О целесообразности изучения

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

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

Сложно вообще представить специалиста, который освоил какие-то альтернативные фреймворки, при этом не применив ни разу что-нибудь из большой тройки — React, Vue, Angular. Определенно можно сказать, что знание React делает любое резюме весомее, даже если работать с React не предполагается вовсе.

Ещё хочу акцентировать внимание на усилении тенденции использования TypeScript. Она есть как на фронтенде, так и на бэкенде, чему лично я рад. Таким образом, стоит уделить внимание изучению фреймворков именно в связке с TypeScript.

Об эксперте

Алексей Резвов, организатор разработки программного обеспечения.

<!DOCTYPE html>
<html class="h-100" data-bs-theme="light" data-mantine-color-scheme="light" lang="ru" prefix="og: https://ogp.me/ns#">
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<link crossorigin="true" href="https://cdn.hexlet.io" rel="preconnect">
<link href="https://mc.yandex.ru" rel="preconnect">
<meta content="aa2vrdtq64dub8knuf83lwywit311w" name="facebook-domain-verification">
<link href="/favicon.ico" rel="icon" sizes="any">
<link href="/favicon.svg" rel="icon" type="image/svg+xml">
<link href="/apple-touch-icon.png" rel="apple-touch-icon">
<link href="/manifest.webmanifest" rel="manifest">

<script>
//<![CDATA[
window.gon={};gon.ym_counter="25559621";gon.is_bot=true;gon.applications={};gon.current_user={"id":null,"last_viewed_notification_id":null,"email":null,"state":null,"first_name":"","last_name":"","created_at":"2026-02-26 22:54:50 UTC","current_program":null,"current_team":null,"full_name":"","guest":true,"can_use_paid_features":false,"is_hexlet_employee":false,"sanitized_phone_number":"","can_subscribe":true,"can_renew_education":false};gon.token="YuX4vt9QVlmDicz2MUhEMIw0LdPBI_6vA_YchecJCDONNDOJLS77OTXK6G49R7RHTD0AeckUAA2-FobRtQ7vXQ";gon.locale="ru";gon.language="ru";gon.theme="light";gon.rails_env="production";gon.mobile=false;gon.google={"analytics_key":"UA-1360700-51","optimize_key":"GTM-5QDVFPF"};gon.captcha={"google_v3_site_key":"6LenGbgZAAAAAM7HbrDbn5JlizCSzPcS767c9vaY","yandex_site_key":"ysc1_Vyob5ZPPUdPBsu0ykt8bVFdzsfpoVjQChLGl2b4g19647a89","verification_failed":null};gon.social_signin=false;gon.typoreporter_google_form_id="1FAIpQLSeibfGq-KvWQ2Fyru-zkFFRVTLBuzXAHAoEyN1p49FtDmNoNA";
//]]>
</script>
<meta charset="utf-8">
<title>Что такое React.js</title>
<meta name="description" content="Почему эта библиотека настолько популярная, стоит ли изучать её сегодня, каковы её перспективы по мнению опытных программистов? Ответы на эти и другие вопросы читайте в обзорной статье.">
<link rel="canonical" href="https://ru.hexlet.io/blog/posts/biblioteka-react-review-article">
<meta property="og:title" content="Что такое React.js">
<meta property="og:description" content="Почему эта библиотека настолько популярная, стоит ли изучать её сегодня, каковы её перспективы по мнению опытных программистов? Ответы на эти и другие вопросы читайте в обзорной статье.">
<meta property="og:image" content="https://ru.hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTYyOCwicHVyIjoiYmxvYl9pZCJ9fQ==--6bac7610f325471938a0e33f58eaa4c52527d66f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX2FuZF9wYWQiOlsxNDU2LDcyOF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--b2ecf6121248a24883cda19469732b47b57f4e80/%D1%87%D1%82%D0%BE%D1%82%D0%B0%D0%BA%D0%BE%D0%B5react-01.png">
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="2JasNEL4hMIa0t5bVYtMJmIJ2pNo1BOF1QZ-n_MHZZI3R2cDsIYpoqyR-sNZhLxRogD3OWDj7Sdo5uTLoQCC_A" />



<script src="/vite/assets/inertia-DfXos102.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/preload-helper-BJ4cLWpC.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-BrRXra1y.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ahoy-DrlRQ-1D.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/analytics-cb8xch9l.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-naDSYSy9.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Surface-DL2bpZA-.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-D3e4yh1x.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-CGMYrt2Y.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-DRqSHbQE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-CCH8ilKF.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/extends-C-EagtpE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/inheritsLoose-BBd-DCVI.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/objectWithoutPropertiesLoose-DRHXDhjp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/index.esm-DAqKOkZ0.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Button-CGPUux8l.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/CloseButton-D1euiPao.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Group-BX48WcuU.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Loader-BQEY8g6v.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Modal-Cy3HByv7.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/OptionalPortal-1Hza5P2w.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Stack-CtjJzfw4.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Textarea-Ck64llAy.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Box-B5-OOzBf.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/DirectionProvider-Dc9zdUke.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/events-DJQOhap0.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/use-reduced-motion-D2owz4wa.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/use-disclosure-zKtK5W1r.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/use-hotkeys-Cnc_Rwkb.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/random-id-DOQyszCZ.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/notifications.store-C-3AFSMn.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/exports-C_MrNx_T.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/axios-BEvgo0ym.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-BkKovM-s.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/i18next-BlSq9s7B.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-U9M77rxp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-DaLxUz_h.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-Bx1Cdrkz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-6XxiPFnt.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-CwjcCKJi.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CkL4ZRHB.js" as="script" crossorigin="anonymous">
<link rel="stylesheet" href="/vite/assets/application-BqhCP46M.js" />
<script src="/vite/assets/application-Df9RExpe.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/autocomplete-VMNbxKGl.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-CCH8ilKF.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/createPopper-C3aM9r1M.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/js.cookie-D1-O8zkX.js" as="script" crossorigin="anonymous"><link rel="stylesheet" href="/vite/assets/application-C8HjmMaq.css" media="screen" />
<script>
  window.ym = function(){(ym.a=ym.a||[]).push(arguments)};
  window.addEventListener('load', function() {
    setTimeout(function() {
      ym.l = 1*new Date();
      ym(window.gon.ym_counter, "init", {
        clickmap: true,
        trackLinks: true,
        accurateTrackBounce: true,
        webvisor: true
      });
  
      // Загружаем скрипт
      var k = document.createElement('script');
      k.async = 1;
      k.src = 'https://mc.yandex.ru/metrika/tag.js';
      document.head.appendChild(k);
  
      ym(window.gon.ym_counter, 'getClientID', function(clientID) {
        window.ymClientId = clientID;
      });
    }, 1500);
  });
</script>

<!-- Google Tag Manager - deferred -->
<script>
  // dataLayer stub сразу — пуши работают до загрузки скрипта
  window.dataLayer = window.dataLayer || [];
  
  // Сам скрипт — отложенно после load
  window.addEventListener('load', function() {
    setTimeout(function() {
      dataLayer.push({'gtm.start': new Date().getTime(), event: 'gtm.js'});
      var j = document.createElement('script');
      j.async = true;
      j.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-WK88TH';
      document.head.appendChild(j);
    }, 1500);
  });
</script>
<!-- End Google Tag Manager -->




</head>
<body>
<noscript>
<div>
<img alt="" src="https://mc.yandex.ru/watch/25559621" style="position:absolute; left:-9999px;">
</div>
</noscript>


<header class="sticky-top bg-body">
<nav class="navbar navbar-expand-lg">
<div class="container-xxl">
<a class="navbar-brand" href="/"><img alt="Логотип Хекслета" height="24" src="https://ru.hexlet.io/vite/assets/logo_ru_light-BpiEA1LT.svg" width="96">
</a><button aria-controls="collapsable" aria-expanded="false" aria-label="Меню" class="navbar-toggler border-0 mb-0 mt-1" data-bs-target="#collapsable" data-bs-toggle="collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsable">
<ul class="navbar-nav mb-lg-0 mt-lg-1">
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
Все курсы
<span class="bi bi-chevron-down align-middle ms-1"></span>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item d-flex py-2" href="/courses"><div class="fw-bold me-auto">Все что есть</div>
<div class="text-muted">117</div>
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Популярные категории</b>
</li>
<li>
<a class="dropdown-item py-2" href="/courses_devops">Курсы по DevOps
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_data_analytics">Курсы по аналитике данных
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_programming">Курсы по программированию
</a></li>
<li>
<a class="dropdown-item py-2" href="/courses_testing">Курсы по тестированию
</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li class="dropdown-item">
<b>Популярные курсы</b>
</li>
<li>
<a class="dropdown-item py-2" href="/programs/devops-engineer-from-scratch">DevOps-инженер с нуля
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/go">Go-разработчик
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/java">Java-разработчик
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/python">Python-разработчик 
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/qa-auto-engineer-java">Автоматизатор тестирования на Java
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/data-analytics">Аналитик данных
</a></li>
<li>
<a class="dropdown-item py-2" href="/programs/frontend">Фронтенд-разработчик
</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<button aria-haspopup class="btn nav-link" data-bs-toggle="dropdown" type="button">
О Хекслете
<span class="bi bi-chevron-down align-middle"></span>
</button>
<ul class="dropdown-menu bg-body">
<li>
<a class="dropdown-item py-2" href="/pages/about">О нас
</a></li>
<li>
<a class="dropdown-item py-2" href="/blog">Блог
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/hse-research" role="button">Результаты (Исследование)
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://career.hexlet.io" role="button">Хекслет Карьера
</span></li>
<li>
<a class="dropdown-item py-2" href="/testimonials">Отзывы студентов
</a></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://t.me/hexlet_help_bot" role="button">Поддержка (В ТГ)
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/referal-program/?promo_creative=priglasite-druzei&amp;promo_name=referal-program&amp;promo_position=promo_position&amp;promo_start=010724&amp;promo_type=link" role="button">Реферальная программа
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://special.hexlet.io/certificate" role="button">Подарочные сертификаты
</span></li>
<li>
<span class="dropdown-item py-2 external-link" data-href="https://hh.ru/employer/4307094" role="button">Вакансии
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://b2b.hexlet.io" data-target="_blank" role="button">Компаниям
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexly.ru/" data-target="_blank" role="button">Колледж
</span></li>
<li>
<span class="dropdown-item d-flex external-link" rel="noopener noreferrer nofollow" data-href="https://hexlyschool.ru/" data-target="_blank" role="button">Частная школа
</span></li>
</ul>
</li>
<li><a class="nav-link" href="/subscription/new">Подписка</a></li>
</ul>
<ul class="navbar-nav flex-lg-row align-items-lg-center gap-2 ms-auto">
<li>
<a class="nav-link" aria-label="Переключить тему" href="/theme/switch?new_theme=dark"><span aria-hidden="true" class="bi bi-moon"></span>
</a></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="/u/new" role="button"><span>Регистрация</span>
</span></li>
<li>
<span data-target="_self" class="nav-link external-link" data-href="https://ru.hexlet.io/session/new" role="button"><span>Вход</span>
</span></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="x-container-xxxl">

</div>

<main class="mb-6 min-vh-100 h-100">
<link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTYyOCwicHVyIjoiYmxvYl9pZCJ9fQ==--6bac7610f325471938a0e33f58eaa4c52527d66f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX2FuZF9wYWQiOlsxNDU2LDcyOF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--b2ecf6121248a24883cda19469732b47b57f4e80/%D1%87%D1%82%D0%BE%D1%82%D0%B0%D0%BA%D0%BE%D0%B5react-01.png"/><link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDA0OSwicHVyIjoiYmxvYl9pZCJ9fQ==--a6531362dd1f3afb65f5b269e1a23113df7171b1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Devices-amico.png"/><link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzcyNywicHVyIjoiYmxvYl9pZCJ9fQ==--2d5cbbf5c3b4a73ae4b2c50632305d78f5872e4d/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programmer-rafiki.png"/><link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAxOSwicHVyIjoiYmxvYl9pZCJ9fQ==--84efd2b6854b7000046e9ce06e6be85d38af5ab8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/JavaScript%20frameworks-cuate.png"/><link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzcwOSwicHVyIjoiYmxvYl9pZCJ9fQ==--03e50bbd408fef672ad099f7b2a258d80f54ad96/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Hand%20coding-bro.png"/><link rel="preload" as="image" href="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAzMSwicHVyIjoiYmxvYl9pZCJ9fQ==--442647b9b09e64febe5646427471c53eb6f80b32/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programming-pana.png"/><link rel="preload" as="image" href="/vite/assets/development-BVihs_d5.png"/><div id="app" data-page="{&quot;component&quot;:&quot;web/blog/posts/show&quot;,&quot;props&quot;:{&quot;errors&quot;:{},&quot;locale&quot;:&quot;ru&quot;,&quot;language&quot;:&quot;ru&quot;,&quot;httpsHost&quot;:&quot;https://ru.hexlet.io&quot;,&quot;host&quot;:&quot;ru.hexlet.io&quot;,&quot;colorScheme&quot;:&quot;light&quot;,&quot;auth&quot;:{&quot;user&quot;:{&quot;id&quot;:null,&quot;last_viewed_notification_id&quot;:null,&quot;email&quot;:null,&quot;state&quot;:null,&quot;first_name&quot;:&quot;&quot;,&quot;last_name&quot;:&quot;&quot;,&quot;created_at&quot;:&quot;2026-02-26T22:54:49.944Z&quot;,&quot;current_program&quot;:null,&quot;current_team&quot;:null,&quot;full_name&quot;:&quot;&quot;,&quot;guest&quot;:true,&quot;can_use_paid_features&quot;:false,&quot;is_hexlet_employee&quot;:false,&quot;sanitized_phone_number&quot;:&quot;&quot;,&quot;can_subscribe&quot;:true,&quot;can_renew_education&quot;:false}},&quot;cloudflareTurnstileSiteKey&quot;:&quot;0x4AAAAAAA15KmeFXzd2H0Xo&quot;,&quot;vkIdClientId&quot;:&quot;51586979&quot;,&quot;yandexIdClientId&quot;:&quot;88d071f1d3384eb4bd1deb37910235c7&quot;,&quot;formAuthToken&quot;:&quot;vUbiS6CCghHCX7MynEbNXTLN4gwKj3qiZpqS-kFQG_pSlyl8UvwvcXQcl6qQST0q8sTPpgK4hADbegiuE1f8lA&quot;,&quot;post&quot;:{&quot;model_name&quot;:&quot;BlogPost&quot;,&quot;category&quot;:{&quot;id&quot;:4,&quot;name&quot;:&quot;Код&quot;,&quot;slug&quot;:&quot;code&quot;,&quot;state&quot;:&quot;published&quot;,&quot;created_at&quot;:&quot;2016-08-23T13:33:44.258Z&quot;},&quot;creator&quot;:{&quot;public_name&quot;:&quot;Анастасия Уминская&quot;,&quot;id&quot;:694835,&quot;is_tutor&quot;:false},&quot;tags&quot;:[{&quot;id&quot;:633,&quot;slug&quot;:&quot;javascript&quot;,&quot;name&quot;:&quot;JavaScript&quot;}],&quot;id&quot;:926,&quot;title&quot;:&quot;Библиотека React: особенности, перспективы, ситуация на рынке труда&quot;,&quot;slug&quot;:&quot;biblioteka-react-review-article&quot;,&quot;state&quot;:&quot;published&quot;,&quot;summary&quot;:&quot;В объявлениях о поиске программистов часто встречается требование уметь работать с React. Иногда работодатели ожидают знания React не только от фронтендеров, но и от бэкенд-разработчиков. Почему эта библиотека настолько популярная, стоит ли изучать её сегодня, каковы её перспективы по мнению опытных программистов? Ответы на эти и другие вопросы читайте в обзорной статье.&quot;,&quot;votes_count&quot;:13,&quot;created_at&quot;:&quot;2020-07-08T15:15:00.191Z&quot;,&quot;published_at&quot;:&quot;2024-02-29T07:46:44.876Z&quot;,&quot;body&quot;:&quot;**React — одна из самых популярных библиотек для фронтендеров. Ее используют для создания современных интерфейсов. Расскажем подробнее, что такое React и как он работает.**\r\n\r\nReact — JavaScript-библиотека для работы с пользовательскими интерфейсами (UI), которую создали разработчики Facebook. Библиотеку начали использовать на сайте этой социальной сети в 2011 году. А в 2013 году Facebook открыл исходный код React.\r\n\r\nС помощью React разработчики создают веб-приложения, которые изменяют отображение без перезагрузки страницы. Благодаря этому сайты быстро реагируют на действия пользователя, например, заполнение форм, применение фильтров, добавление товаров в корзину и так далее.\r\n\r\nReact применяют для отрисовки компонентов пользовательского интерфейса. Также библиотека может полностью управлять фронтендом. В этом случае React используют с библиотеками для роутинга и управления состоянием, например, Redux и React Router.\r\n\r\n::programs\r\n\r\n## Содержание\n\n## Зачем нужен React\r\n\r\nФронтенд современных сайтов пишут на JavaScript. Этот язык программирования позволяет создавать интерактивные интерфейсы. То есть реагирующие на действия пользователей.\r\n\r\nНапример, вы можете написать комментарий к странице и опубликовать его одним нажатием кнопки. Он появится на сайте без обновления страницы. Все это благодаря JavaScript.\r\n\r\nКазалось бы, интерактивность уже обеспечивает сам язык программирования. Но разработчики постоянно трудятся над оптимизацией рутинных задач.\r\n\r\nС этой целью создают библиотеки и фреймворки. Первое — набор функций и компонентов, которые применяют для своего кода. Второе — готовые каркасы для приложений, которые можно использовать с небольшими видоизменениями.\r\n\r\nReact — самая популярная библиотека для JS, его применяют на многих проектах.\r\n\r\nРазработчики используют React, выбирая из его возможностей то, что может пригодиться для конкретной задачи.\r\n\r\nГде используют React:\r\n\r\n- Для разработки любых интерактивных интерфейсов у многостраничных и одностраничных сайтов;\r\n- Для создания сложных программных продуктов, за счет React их гораздо проще описывать;\r\n- Для программирования как целых страниц, так и отдельных компонентов, React позволяет многократно использовать одни и те же элементы;\r\n- Для создания мобильных приложений. Но в этом случае необходимо использовать технологии для адаптации.\r\n\r\n::posts\r\n\r\n## Как работает React\r\n\r\nРасскажем о ключевых особенностях библиотеки, которые обеспечили ей популярность.\r\n\r\n### Декларативный подход\r\n\r\nReact использует декларативный подход в программировании. Если в императивном программировании необходимо задать каждое действие, то в декларативном достаточно описания конечного результата и реакции на действия.\r\n\r\nПроще говоря, разработчик при создании кода указывает, как должен себя повести интерфейс при получении определенных данных или наступлении событий.\r\n\r\nБиблиотека позволяет оптимизировать процесс разработки за счет того, что программисту не нужно описывать подробности. React.js самостоятельно будет обновлять элементы, ориентируясь на условия. Задача программиста — грамотно описать их.\r\n\r\nИспользование этого подхода позволяет создавать приложения на React максимально быстро.\r\n\r\n\r\n\r\n### Компоненты\r\n\r\nГлавная сущность в этой библиотеке — компоненты. Они представляют собой отдельные элементы на странице. Каждый компонент в React — инкапсулированный, то есть содержит в себе весь комплект данных и методов, необходимых для работы.\r\n\r\nИнкапсуляция позволяет хранить состояние элементов в них самих. Это делает их изолированными и самостоятельными.\r\n\r\nЭта особенность React предусматривает постоянное переиспользование элементов. Один и тот же элемент можно применить на другой странице или в другом разделе сайта.\r\n\r\nПреимущества такого подхода очевидны — разработчику не нужно заново писать код для элемента. А отсутствие сложных зависимостей между ними упрощает отладку.\r\n\r\n### Рендеринг компонентов\r\n\r\nУ каждой страницы в интернете есть своя структура. Это так называемое DOM-дерево или объектная модель документа. Он состоит из тэгов HTML — языка разметки и каскадных таблиц стилей — CSS, а также подключенного к нему коду на JavaScript.\r\n\r\nУ библиотеки React есть специальный механизм для управления рендерингом всех компонентов на странице. То есть создания визуального представления элементов.\r\n\r\nДля этого React сохраняет в кэше копию DOM-дерева. Она изменяется быстрее оригинала, что позволяет приложению так же быстро обновлять страницу.\r\n\r\nНапример, если после какого-либо действия страница нуждается в перезагрузке, React будет работать не с реальной структурой, а с копией. Что позволит пользователю быстрее увидеть результат.\r\n\r\nЗа счет этого в приложениях, написанных на React, изменения вносятся практически мгновенно — ждать несколько секунд не нужно.\r\n\r\nЭтот процесс основан на обновлении DOM по частям. В памяти остаются две копии: старая и новая. При необходимости React сравнивает две версии и меняет только ту часть, в которой что-то изменилось, а не весь DOM целиком.\r\n\r\nЗа счет этого достигается оптимизация загрузки.\r\n\r\n### Передача свойств компонентов\r\n\r\nВ React реализовали нисходящий поток данных. Компоненты могут передавать данные и свойства только сверху вниз, от родительских к дочерним.\r\n\r\nТакая иерархия позволяет быстро понять, откуда поступила информация, упрощая нахождение ошибок.\r\n\r\nТакже в этой библиотеке нельзя изменять свойства напрямую. Такую возможность реализуют только через callback-функции. Это участки кода в виде параметра функции, которые передают от одного компонента другому.\r\n\r\nЗа счет этого все данные, свойства и события идут сверху вниз. Свойства не меняются после создания, а как бы пересоздаются. Это обеспечивает такой системе стабильность.\r\n\r\n\r\n\r\n\r\n### Hooks\r\n\r\nИзначально в React использовали классы — тип компонентов, включающих в себя методы управления состоянием. Сейчас вместо этого используют хуки. Это функции, которые как крючки можно прицепить к состоянию метода или элемента.\r\n\r\nЭто позволяет отказаться от применения классов. Вместо этого при изменении состояния автоматически выполняют заданные функции.\r\n\r\nВ библиотеке есть как готовые хуки, так и возможность для разработчика написать свои собственные.\r\n\r\n### JSX\r\n\r\nВ React реализовали собственное расширение для JavaScript. С его помощью можно описывать элементы HTML-кодом на этом языке программирования. В итоге разработчики получают возможность менять структуру DOM, используя привычный JavaScript.\r\n\r\nНа практике это выглядит так: программист пишет компонент с HTML, но тот становится объектом на JavaScript с соответствующими возможностями. Это не всегда просто для новичков, но удобно для опытных разработчиков.\r\n\r\n### Developer Tools\r\n\r\nЭто специальный набор инструментов в виде расширения для браузера. Developer Tools в React помогают в деле проверки и отладки написанного кода.\r\n\r\nПо сути, это аналог привычной панели разработчика в браузере, но с дополнительными возможностями.\r\n\r\n## Преимущества и недостатки React\r\n\r\nРазберемся в преимуществах и недостатках этой библиотеки — как технических, так и с точки зрения обучения.\r\n\r\nТехнические достоинства:\r\n\r\n- Скорость загрузки\r\n\r\nВиртуальный DOM позволяет приложениям на React загружаться гораздо быстрее аналогов. Такие сайты становится более отзывчивыми и хорошо реагируют на изменения.\r\n\r\n- Быстрая разработка\r\n\r\nПриложения на React состоят из компонентов. Их легко создавать в рамках этой экосистемы. Программистам не нужно с нуля продумывать логику, достаточно только описать состояние. Один раз созданный компонент можно использовать во многих частях проекта. Все это ускоряет разработку и оптимизирует затраты труда разработчика.\r\n\r\n- Минимизация ошибок\r\n\r\nИспользование этой библиотеки позволяет забыть о многих рутинных операциях. Это уменьшает влияние «человеческого фактора»: в готовых решениях сложнее ошибиться. За счет этого использование React на проекте упрощается отладка и уменьшается количество багов.\r\n\r\nЕсли рассматривать React как технологию для изучения, его плюсы:\r\n\r\n- Распространенность\r\n\r\nСейчас он занимает первое место среди самых популярных инструментов для разработки интерфейсов. Из ближайших конкурентов — фреймворки Vue.js и Angular. Но о них мы поговорим ниже. В настоящее время библиотеку активно используют на проектах в крупных компаниях и найти работу со знанием React относительно легко.\r\n\r\n- Крупное комьюнити\r\n\r\nИзучать React удобно в силу хорошей задокументированности и большого сообщества. Эту библиотеку используют тысячи опытных разработчиков, поэтому начинающим будет легко найти ответ на вопрос или попросить о помощи.\r\n\r\n- Большая экосистема\r\n\r\nБиблиотека React регулярно обновляется. А за счет крупного комьюнити есть множество энтузиастов, которые создают свои собственные решения. Их можно применять совместно с React. Речь идет и о дополнительных библиотеках, и об инструментах.\r\n\r\nНедостатки у этой библиотеки тоже есть:\r\n\r\n- Сложность изучения\r\n\r\nReact отличается собственной архитектурой на основе компонентов. Новичкам бывает сложно овладеть всеми концепциями этой библиотеки. Большое внимание при разработке на React уделяют улучшению производительности при помощи виртуального DOM. А это потребует перестройки мышления.\r\n\r\nТехнология JSX также часто вызывает затруднение: разработчикам бывает тяжело собирать воедино язык разметки и JavaScript.\r\n\r\n- Высокий порог входа\r\n\r\nВ отличие от большинства ближайших конкурентов, React — библиотека, а не фреймворк. Он оставляет разработчику куда больше простора для приложения усилий.\r\n\r\nИспользуя фреймворк, можно брать готовую структуру и изменять ее под нужды проекта, а библиотека предполагает собственную структуру и меньший объем готовых решений.\r\n\r\nТаким образом, от программиста с React требуется больше квалификации.\r\n\r\n\r\n\r\n## Конкуренты React.js\r\n\r\nБлижайшие по популярности конкуренты React — фреймворки Angular и Vue. Вместе они составляют большую тройку технологий для фронтенда, одну из которых обычно выбирают при реализации проектов. Расскажем о них подробнее.\r\n\r\n### Angular\r\n\r\nЭтот фреймворк выпустила компания Google. Его основная цель — создание одностраничных приложений на JavaScript и TypeScript. Angular — наследник AngularJS, разработанного в 2009 году. Но это другой фреймворк и обратной совместимости у них нет.\r\n\r\nОн обладает принципиально другой архитектурой и даже написан на другом языке — TypeScript, а не на JavaScript.\r\n\r\nГлавное преимущество Angular — модульность. Этот фреймворк позволяет собирать приложения на основе готовых компонентов — модулей. Их пишут и тестируют изолированно, что добавляет надежности.\r\n\r\nВ состав Angular входит огромное количество библиотек, инструментов и дополнительных возможностей. Фактически в рамках его инфраструктуры можно реализовать любое решение.\r\n\r\nAngular применяют для создания крупных корпоративных приложений. Его преимущество в обилии инструментов для стандартных задач. Однако это может быть и ограничением. В Angular много «навязанных» решений и меньше гибкости по сравнению с React.js. Его редко используют для MVP и небольших проектов.\r\n\r\nК тому же Angular как технология гораздо объемнее и для его изучения потребуется больше времени.\r\n\r\n### Vue\r\n\r\nVue.js — относительно молодой фреймворк для создания пользовательских интерфейсов. Его отличительная особенность — представление, которое изменяется по мере изменения модели.\r\n\r\nVue используют для создания быстрых сайтов, небольших блогов и нагруженных веб-приложений. Этот фреймворк подходит для внедрения в уже существующие проекты. На нем часто переписывают отдельные модули, а не всю структуру целиком.\r\n\r\nVue, по сравнению с аналогами, отличается простотой и низким порогом входа. Его сможет без труда освоить даже начинающий веб-разработчик. Vue применяют для MVP и средних приложений.\r\n\r\nЭтот фреймворк обеспечивает высокую скорость разработки и масштабируемость. Пока что он распространен меньше, чем Angular и React, но развивается более динамично.\r\n\r\nМногие предпочитают делать проекты на этом фреймворке из-за более простого найма разработчиков. Освоить Vue несколько проще.\r\n\r\n\r\n\r\n## Востребованность React.js\r\n\r\nСогласно [исследованию](https://survey.stackoverflow.co/2023/#technology-most-popular-technologies) портала Stackoverflow, React занимает второе место в списке самых популярных фреймворков и технологий. Немногим превосходит его только Node.js, который адаптирует JavaScript для серверной разработки.\r\n\r\nА в технологиях для фронтенда React уверенно побеждает всех конкурентов.\r\n\r\nЕсли посмотреть по [статистике загрузок](https://npmtrends.com/@angular/core-vs-react-vs-vue), то эта библиотека также уверенно лидирует, оставляя позади двух самых сильных конкурентов: Vue и Angular.\r\n\r\nЧто касается статистики hh.ru, на момент написания статьи:\r\n\r\n- React фигурировал в 3473 вакансиях.\r\n- Angular — в 1339.\r\n- Vue — 1977.\r\n\r\n## Стоит ли учить React: мнение экспертов о развитии и перспективах библиотеки\r\n\r\nСпециально для этой статьи опытные разработчики поделились мыслями о перспективах React, целесообразности изучения этой библиотеки и инструментах для управления состоянием и альтернативных библиотеках и фреймворках. Эксперты ответили на такие вопросы:\r\n\r\n1. [По данным LogRocket](https://blog.logrocket.com/making-the-business-case-for-react-in-2019-74463bbb22de/), доля React на рынке UI-фреймворков и библиотек составляет около 60%. Как вы считаете, в обозримом будущем эта ситуация может существенно измениться?\r\n2. Провокационный вопрос: фреймворк или библиотека, который обойдёт React в будущем, уже существует или он только должен появиться?\r\n3. Какие новые возможности React лично вы ждёте больше всего? Когда они могут появиться?\r\n4. Для управления состоянием в более или менее сложных React-приложениях чаще всего используется Redux. Появятся ли альтернативы Redux, которые станут популярными и общепринятыми способами управления состоянием?\r\n5. Вопрос, ответ на который заинтересует новичков: стоит ли изучать React, чтобы устроиться на работу фронтенд-разработчиком в 2020 или 2021 году?\r\n\r\n### Сергей Сова: React далеко не простой, но изучив его, можно не бояться фронтенд-разработки\r\n\r\n![Сергей Сова](https://imgur.com/B5A9PAo.jpg)\r\n\r\n___\r\n\r\n**О популярности**\r\n\r\nСейчас появляется все больше фреймворков на рынке, и этот факт сам по себе снижает долю React. Думаю, что эта библиотека будет постепенно уходить из предпочтений разработчиков. Хоть и на данный момент это самое лучшее и популярное решение.\r\n\r\n**О библиотеке или фреймворке, который обойдёт React в будущем**\r\n\r\nДа, я думаю, что такой инструмент уже есть, хоть и в очень зачаточном состоянии. При должном развитии, популяризации и организации обучения, этот новый инструмент заменит React в привычных сферах. Это решение построено на основе стейт-менеджера Effector. Автор Effector пришел к выводу, что управление состоянием неотделимо от отображения. Пока что рано рассказывать об этом решении на большую аудиторию. Но желающие смогут легко найти информацию об Effector в поиске.\r\n\r\n**О новых возможностях**\r\n\r\nЯ жду, когда React научится батчить апдейты от сторонних событий. Например, от событий браузера, вроде клика по кнопке, двойной вызов хука setState или аналогичного, вызовет только один рендер. Но если двойной setState будет вызван по таймауту, то будет два рендера. Это не круто.\r\n\r\nПомимо этого, хочется tree-shaking. Слишком уж много весит react-dom. Я не хочу «платить» за то, чего не использую.\r\n\r\n**О Redux и других инструментах управления состоянием**\r\n\r\nRedux изжил себя. Насчёт общепринятых или популярных — не знаю. Но я сам, а также в рабочих проектах с командой, полностью перешёл на управление состоянием с помощью Effector. Он поддерживает SSR, TypeScript, не привязан к фреймворку. Обеспечивает декларативные связи между сущностями, что помогает визуально отсматривать логику.\r\n\r\nЯ уже очень давно хотел отделить логику от вью. То есть ровно так, чтобы логика жила своей жизнью, независимо от вью. Компонент просто отправляет события в логику, а та сама решает, что делать с событиями, а вью лишь рендерится от стейта. Получаем React — та самая функция от состояния.\r\n\r\nEffector позволяет мне реализовать это все без бойлерплейта, десятков различных методов, классов и декораторов. Лишь обычный JS/TS.\r\n\r\n**О целесообразности изучения**\r\n\r\nДа, стоит. Это самое популярное и гибкое решение на данный момент. Да, React далеко не простой, но изучив его, можно не бояться фронтенд-разработки. В отличие от фреймворков, React использует экосистему JavaScript, а не выдумывает полностью свою. Хоть и очень похож на фреймворк.\r\n\r\n\r\n\r\n\r\n**Об эксперте**\r\n\r\n[Сергей Сова](https://sova.dev), Frontend Team-Lead at REDMADROBOT. Frontender, Podcaster, Rustacean. [Telegram](https://t.me/sergeysova), [«ВКонтакте»](https://vk.com/sovadev).\r\n\r\n### Анна Селезнёва: начинать обучение надо не с фреймворка, а с чистого JavaScript\r\n\r\n![Анна Селезнёва](https://imgur.com/4AGqESk.jpg)\r\n\r\n___\r\n\r\n**О популярности**\r\n\r\nНа мой взгляд, ситуация будет меняться, но несущественно, если говорить о цифрах. [State of JavaScript](https://2019.stateofjs.com/front-end-frameworks/) наглядно показывает, что лидеры на рынке фреймворков постоянно меняются, и в любой момент могут появиться конкурентоспособные новички.\r\n\r\nИстория успеха Svelte говорит о том, что в ближайшем будущем может появиться что-то новое, что заберет часть аудитории у React. Скорее всего, React еще долгое время будет если не на первом месте, то определенно в топе фреймворков.\r\n\r\nСтоит отметить также, что существующие фреймворки различаются концептуально и используются для разных типов проектов. Поэтому популярность можно предсказывать, основываясь также на развитии технологий и подходов. На фоне развития мобильной разработки наличие React Native также играет в пользу фреймворка.\r\n\r\n**О библиотеке или фреймворке, который обойдёт React в будущем**\r\n\r\nВо фронтенде популярность и востребованность крайне переменчива. Возможно, какой-то из существующих фреймворков в будущем станет популярнее React, а спустя год выйдет новый, который обойдет обоих, но тоже ненадолго. При этом разница в популярности может быть минимальной.\r\n\r\nНе стоит забывать о том, что за любым фреймворком стоит комьюнити, и пока оно растет и развивается, развиваться будет и фреймворк. А если кто-то из главных игроков прекратит поддержку, это может привести к плачевным результатам.\r\n\r\n**О новых возможностях**\r\n\r\nЧестно говоря, мне пока хватает возможностей для разработки текущих проектов. Все же React изначально преподносился как библиотека, и основная ставка делалась на комьюнити, которое постоянно предлагает новые и интересные решения типовых задач. При этом и само ядро React также постоянно развивается с учетом требований разработчиков, что не может не радовать.\r\n\r\nУчитывая эти факторы, уже завтра может появиться что-то новое, что позволит улучшить проект. Но, честно говоря, это даже пугает. Ведь мне тут же захочется отрефакторить код и использовать возможности, а на это требуется время, которого у фронтенд-разработчика обычно не хватает.\r\n\r\n**О Redux и других инструментах управления состоянием**\r\n\r\nНовые инструменты появятся. Я бы даже сказала, что уже сейчас они есть. С одной стороны, появление хуков заставило взглянуть на управление состоянием под другим углом. С другой стороны, клиентские [реализации для GraphQL](https://ru.hexlet.io/blog/posts/chto-takoe-graphql-s-osnov-do-pervyh-zaprosov) (например, Apollo) позволяют некоторым проектам обходиться без Redux. Также не стоит недооценивать MobX, который развивается и в будущем может предложить неплохую альтернативу.\r\n\r\n**О целесообразности изучения**\r\n\r\nВот этот вопрос мне кажется более провокационным. Потому что нужно начинать изучение не с фреймворка, тем более, такого специфического, как React, а с чистого JavaScript. А потом уже можно попробовать разные фреймворки, чтобы понимать, как они устроены, и различать подходы к разработке проектов.\r\n\r\nКак раз недавно на митапе MinskJS, который я помогаю организовывать, соорганизатор митапов MinskCSS и MinskJS Саша Шинкевич рассказывала доклад на тему [«Как перестать выбирать фреймворки и начать жить»](https://youtu.be/JHiQVS5ZXJI?t=2766). Мне кажется, это хорошая иллюстрация современного фронтенда. Выбирайте фреймворк не ради фреймворка, а для достижения хорошего результата.\r\n\r\n**Об эксперте**\r\n\r\n[Анна Селезнёва](https://twitter.com/asktwi), Lead Frontend Developer @ [Spiral Scout](https://spiralscout.com/).\r\n\r\n### Артём Арутюнян: на React уже написано слишком много, глобально бизнесу не выгодна его депопуляризация\r\n\r\n![Артём Арутюнян](https://imgur.com/lWDkLCq.jpg)\r\n\r\n___\r\n\r\n**О популярности**\r\n\r\nВ обозримом по меркам фронтент-разработки будущем доля React существенно не упадёт. На нём уже написано слишком много, глобально бизнесу не выгодно его депопуляризация.\r\n\r\n**О библиотеке или фреймворке, который обойдёт React в будущем**\r\n\r\nДумаю, такого инструмента ещё нет. Но это мне как идеалисту хочется чего-то принципиально нового. Опыт Vue показывает, что может быть иначе.\r\n\r\n**О новых возможностях**\r\n\r\nЯ знаю много приложений, которые реально станут быстрее при включении конкурентного режима. Хочется, чтобы это случилось быстрее, эта задача не такая сложная, как может показаться. Также хочется, чтобы в React появилась более явная система реактивности, хуки мне не нравятся.\r\n\r\n**О Redux и других инструментах управления состоянием**\r\n\r\nЭто сложный вопрос, но серебряной пули, думаю, не будет. Redux Toolkit может ещё продлить жизнь Redux, но, честно говоря, это выглядит как серьезный костыль, и часть очень важных проблем он все ещё не решает. Reatom выглядит логичной эволюцией и я, конечно, надеюсь, что он отнимет часть рынка. При этом интересными выглядят и альтернативные подходы вроде graphQL-driven или grammarly/focal, думаю, они тоже будут развиваться.\r\n\r\nRecoil также займет часть рынка, скорее всего в приложениях с небольшим сроком жизни (на пару лет). В чем-то крупном — не думаю.\r\n\r\nВозможно будет ещё оптимизирован в плане DX и обезмагивания MobX, и его будут ждать новые высоты — автор все ещё активно им занимается.\r\n\r\nXState мне кажется очень нишевым, как Rx и Effector.\r\n\r\nВ общем, подходов много, каждому своё, при этом я смогу точно сказать, что нам ещё предстоит встретить что-то новое и, возможно, нас ждёт более выраженная дисперсия, а не появление стандарта такой же популярности, как сейчас/раньше Redux.\r\n\r\n**О целесообразности изучения**\r\n\r\nТочно стоит, индустрия в лице бизнеса ещё долго будет нуждаться в разработчиках на React.\r\n\r\n\r\n\r\n**Об эксперте**\r\n\r\n[Артём Арутюнян](https://twitter.com/artalar_dev), автор библиотеки [Reatom](https://github.com/artalar/reatom).\r\n\r\n### Роман Макаров: важно не забывать, что React — всего лишь инструмент, а по-настоящему ценно знание фундаментальных вещей\r\n\r\n![Роман Макаров](https://imgur.com/uGq5p6W.jpg)\r\n\r\n**О популярности**\r\n\r\nВ обозримом будущем, кажется, крупных изменений не стоит ждать. Во-первых, из-за инертности — очень уж много написано на React и вокруг него. Во-вторых, инструмент объективно удобный.\r\n\r\n**О библиотеке или фреймворке, который обойдёт React в будущем**\r\n\r\nМне кажется, это будет инструмент на базе React, но с большим количеством возможностей из коробки, то есть полноценный фреймворк: со встроенным стейт-менеджментом, роутингом, стандартизированным подходом к работе с формами, переводами и тому подобное.\r\n\r\n**О новых возможностях**\r\n\r\nЛично мне хочется дальнейшего развития create-react-app как инструмента для быстрого старта. Разработчики пошли по пути кастомных темплейтов вместо конфигурирования через cli при создании приложения. Это, конечно, уже лучше, чем создавать и поддерживать собственные бойлерплейты, но всё ещё недостаточно для того, чтобы считать CRA промышленным стандартом. \r\n\r\nКроме того, API хуков пока кажется неким промежуточным решением, поверх которого должна быть построена более удобная система работы с состоянием и методами жизненного цикла.\r\n\r\n**О Redux и других инструментах управления состоянием**\r\n\r\nRedux в чистом виде — это скорее концепция, чем инструмент для промышленной разработки. Сейчас, кажется, он вообще не используется в приложениях уровнем выше учебных. \r\n\r\nЗа последние годы вокруг Redux возникла целая экосистема библиотек с мидлварами и хэлперами для удобной работы, а квинтэссенцией стала библиотека redux-toolkit. Из существующих альтернатив лично мне нравится библиотека mobx-state-tree, построенная поверх Mobx. И если для небольших приложений эта библиотека выглядит избыточной, то на проектах с большим количеством логики в тандеме с хуками она прекрасна.\r\n\r\n**О целесообразности изучения**\r\n\r\nЯ думаю, что эта библиотека еще долгое время будет присутствовать в большинстве объявлений о поиске фронтенд-разработчиков, поэтому мой ответ — да, её стоит изучать. Но важно не забывать, что это всего лишь инструмент, а по-настоящему ценно знание фундаментальных вещей — операционных систем, сетей, структур данных, алгоритмов, концепций и парадигм.\r\n\r\n**Об эксперте**\r\n\r\n[Роман Макаров](https://github.com/frontstall), фронтенд-разработчик в Хекслете.\r\n\r\n### Сергей Головин: чем опытнее разработчик, тем менее важной для него становится конкретная библиотека, фреймворк и даже язык программирования\r\n\r\n![Сергей Головин](https://imgur.com/AIew9L8.jpg)\r\n\r\n___\r\n\r\n**О популярности**\r\n\r\nКак мне кажется, сейчас нет совершенно никаких предпосылок к радикальному изменению положения дел на рынке разработки веб-приложений. Все лидирующие фреймворки и библиотеки поделили между собой сообщество разработчиков, заняли определенные ниши и год от года лишь незначительно меняют соотношение долей на «графике популярности». Тем не менее, есть несколько факторов, которые действительно могли бы что-то изменить.\r\n\r\nПервый и основной — очередной технологический сдвиг. Так было, когда «эпоха jQuery» закончилась в связи с переносом бизнес-логики с сервера на клиент, что, в свою очередь, закономерно произошло из-за значительного увеличения производительности, как компьютеров в целом, так и браузеров в частности, существенного роста скорости доступа к сети интернет, а также из-за запроса со стороны бизнеса на перенос сложных технических решений в веб без потери отзывчивости, присущей десктоп-приложениям. \r\n\r\nВ ближайшее время чего-то подобного не предвидится, но, безусловно, нельзя полностью исключать возможность внезапного появления принципиально новой технологии, которая повлечет за собой очередной эволюционный виток или даже техническую революцию. Например, всё чаще и чаще подход SPA подвергается критике, звучат призывы к возврату бизнес-логики на сервер с сохранением отзывчивости, присущей SPA-приложениям. Одним из наиболее интересных и стабильных решений подобного плана является [Phoenix Framework](https://www.phoenixframework.org/), который, тем не менее, пока не стал популярным и остается [довольно нишевым продуктом](https://ru.hexlet.io/blog/posts/codebattle-ili-kak-opensors-proekt-dayot-opyt-programmirovaniya-i-pomogaet-stroit-karieru).\r\n\r\nВторой фактор — маркетинговый. Facebook может прекратить существенную поддержку и продвижение React, параллельно с этим другая компания начнет вкладывать огромные суммы денег в другую библиотеку или фреймворк, и это может привести к значительному изменению статистики. Но даже такие изменения вряд ли произойдут быстро.\r\n\r\n**О библиотеке или фреймворке, который обойдёт React в будущем**\r\n\r\nОба варианта возможны. Но мне кажется, что второй вариант более правдоподобен. При этом нельзя исключать, что библиотекой, которая обойдет React в будущем, может стать условный React 2. Так или иначе, прогнозы по этому поводу делать очень сложно, но хотелось бы верить, что решение, которое станет популярнее React, будет чем-то принципиально новым, иначе это просто очередная смена шила на мыло.\r\n\r\n**О новых возможностях**\r\n\r\nНа мой взгляд, вместо добавления чего-то нового команде React стоит сфокусироваться на доработке и стабилизации старого. Переработка методов жизненного цикла и добавление хуков привели к тому, что сейчас есть несколько разных способов делать похожие вещи, при этом best practices на этот счет в сообществе пока еще не сложились. Соответственно, мы имеем два параллельных мира: мир разработчиков, предпочитающих классы, где все еще есть неоднозначная замена `componentWillReceiveProps` на `getDerivedStateFromProps`, и мир разработчиков, предпочитающих функциональные компоненты и хуки, имеющие перегруженный и местами запутанный API. \r\n\r\nДобавление каких-то нововведений в библиотеку может фрагментировать сообщество ещё сильнее и повысить порог входа в React. Это сложно считать движением в правильном направлении, поэтому, как мне кажется, стоит сначала довести до ума всё, что еще не доведено, а уже потом только думать над добавлением чего-то нового.\r\n\r\n**О Redux и других инструментах управления состоянием**\r\n\r\nТакие решения уже появились. Например, те же MobX и Effector являются отличными production-ready альтернативами. Конечно, нельзя сказать, что они настолько же популярны, как Redux, и это, возможно, является сейчас их основным недостатком, из которого уже вытекают более конкретные. Например, сообщество этих библиотек значительно меньше, чем у Redux, из-за чего может быть сложнее найти готовые решения или ответы на возникшие вопросы. Банальное, но существенное преимущество Redux — огромное количество статей и гайдов по связке React + Redux. \r\n\r\nБезусловно, есть много опытных разработчиков, для которых отсутствие готовых решений и малочисленное сообщество не являются минусом, так как они вполне могут сами написать необходимые библиотеки или дописать недостающую этим state-менеджерам функциональность, а также найти ответ на свой вопрос, прочитав исходники этих библиотек. Но не стоит забывать, что есть очень много разработчиков, которые просто не видят смысла переходить на другие библиотеки, понимая, что те недостатки, которые, безусловно, есть в Redux, не перевешивают для них его достоинств. Так или иначе монополии Redux уже не существует, разные команды по разным причинам выбирают разные решения, и выбор у них, безусловно, есть.\r\n\r\n**О целесообразности изучения**\r\n\r\nЕсли отвечать коротко, то да, стоит. React сейчас очень популярен, соответственно, вакансий, где требуются его знания, очень много. Но стоит отметить, что само по себе изучение React не должно являться самоцелью, важнее изучать принципы и основные концепции, лежащие в его основе. Чем опытнее разработчик, тем менее важной для него становится конкретная библиотека, фреймворк и даже язык программирования. \r\n\r\nОпытный разработчик, который много лет работал с Vue, довольно быстро может переключиться на проект, где используется React. Это возможно, потому что он понимает, на каких принципах базируются данные библиотеки, видит похожие абстракции и пересечение концепций этих библиотек. Поэтому на самом деле, хоть React и вполне хорош для старта карьеры, выбор любой другой современной библиотеки или фреймворка будет не менее хорошим.\r\n\r\n**Об эксперте**\r\n\r\nСергей Головин — ведущий разработчик/технический руководитель [CSSSR](https://csssr.com/ru).\r\n\r\n### Анна Волкова: много компаний с современным стеком технологий используют React, поэтому эту библиотеку стоит учить\r\n\r\n![Анна Волкова](https://imgur.com/sIvs7DE.jpg)\r\n\r\n**О популярности**\r\n\r\nДа, думаю, что в какой-то момент ситуация может измениться, но это будет не очень быстро, как с jQuery. Когда появилась эта библиотека, она заняла большую нишу. Но ведь jQuery еще используют где-то, также будет и с React.\r\n\r\n**О библиотеке или фреймворке, который обойдёт React в будущем**\r\n\r\nПока, наверное, реальной альтернативы не существует. Я думаю, что если бы уже существовала такая библиотека или фреймворк, то она бы также быстро и много стала использоваться, как React.\r\n\r\n**О новых возможностях**\r\n\r\nЖду от React стабильности и совместимости.\r\n\r\n**О Redux и других инструментах управления состоянием**\r\n\r\nОтветила бы тут также, как и на второй вопрос. Очень много проектов написано с использованием связки React/Redux, поэтому пока Redux вне конкуренции.\r\n\r\n**О целесообразности изучения**\r\n\r\nДа, безусловно стоит, так как много компаний с современным стеком технологий используют React.\r\n\r\n**Об эксперте**\r\n\r\n[Анна Волкова](https://twitter.com/volkova_annie), фронтенд-разработчик в [«Альфа-банке»](https://alfabank.ru/).\r\n\r\n### Максим Лебедев: такой же крутой экосистемы, как у React, на горизонте не видно\r\n\r\n![Максим Лебедев](https://imgur.com/UjgoUpC.jpg)\r\n\r\n___\r\n\r\n**О популярности**\r\n\r\nПо-моему мнению, в IT, а тем более в такой динамичной развивающейся его части, как технологии для веба и всё, что с ним связано, «обозримым будущим» можно называть период времени максимум в 2-3 года. React дает действительно неплохое видение, как нужно делать интерфейсы и веб в целом (с учетом всей той экосистемы, которая образовалась вокруг него). И то, что он предлагает, в достаточной степени гибко, производительно и совместимо с браузерами. Да есть интересные вещи типа [Polymer Project](https://www.polymer-project.org/), да и много чего ещё, что может давать какие-то плюсы, например, в производительность, но это требует каких-то дополнительных усилий, чтобы понять, как это правильно готовить. Такой же крутой экосистемы, как у React, именно с точки зрения порога вхождения, гибкости, производительности на горизонте «обозримого будущего» пока не видно, по-моему.\r\n\r\n**О библиотеке или фреймворке, который обойдёт React в будущем**\r\n\r\nЧестно говоря, для меня это не является провокационным вопросом :-) Сами создатели React считают его библиотекой, и я склонен с ними согласиться. Да, React с легкостью можно назвать MV-фреймворком, который берет на себя довольно большую часть ответственности за архитектуру вашего приложения. Но степень этого охвата в то же время не такая всеобъемлющая, как у Angular, Vue, Ext — они в своей официальной документации дают вам полное видение того, как должна выглядеть ваша архитектура, и вполне обоснованно называют себя фреймворками. С другой стороны, вокруг React образовалась существенная экосистема, которая в большинстве случаев говорит вам, как нужно делать React-приложение. И вот если взять React + экосистема, то можно увидеть уже кучку фреймворков. Вы сами можете сделать еще один фреймворк на React, если вам это нужно.\r\n\r\n**О новых возможностях**\r\n\r\nМне нравится их [идея](https://reactjs.org/docs/concurrent-mode-suspense.html) сделать в React 17 механизм, позволяющий из коробки рендерить некие заглушки в момент асинхронной загрузки данных.\r\n\r\n**О Redux и других инструментах управления состоянием**\r\n\r\nПо-моему, этих конкурентов уже и так полно, вы не находите? Да, все они — некая вариация на тему Flux(читай MVC)-подобных архитектур c однонаправленным потоком данных, но их действительно много. Redux, MobX, Cerebral, xstate, и я думаю, это даже не половина всего, что есть в современной экосистеме. Да, Redux наиболее популярен, наверное, но совсем не значит, что он общепринят и безальтернативен на данный момент. Если же имеется в виду что-то принципиально новое, то я даже не знаю, скорее всего ничего лучше вариаций на тему MVC всё-равно не придумаешь, особенно если в качестве View у тебя «реакт головного мозга».\r\n\r\n**О целесообразности изучения**\r\n\r\nОднозначно стоит. Но нужно понимать, что самое важное — не знать все тонкости React, а понимать принципы, на которых он построен, что лежит в основе его архитектуры. Также не стоит забывать про базовые знания касательно JS и веба в целом. То есть если вы научились в хуки на React, но не понимаете, зачем в JS нужны прототипы, что такое замыкание, не представляете same origin policy и для чего оно нужно — это повод задуматься и изучить вопрос.\r\n\r\n**Об эксперте**\r\n\r\nМаксим Лебедев, тимлид команды интеграций в [Miro](https://miro.com/).\r\n\r\n### Алексей Резвов: знание React делает любое резюме весомее\r\n\r\n![Алексей Резвов](https://imgur.com/twPksMG.jpg)\r\n\r\n___\r\n\r\n**О популярности**\r\n\r\nМои личные наблюдения подтверждают тренд на снижение доли React на рынке. В первую очередь за счет увеличения доли Vue, к тому же растут и другие фреймворки вроде Aurelia, Svelte. Существенного изменения ждать не стоит, скорее всего React продолжит, постепенно замедляясь, терять долю рынка.\r\n\r\n**О библиотеке или фреймворке, который обойдёт React в будущем**\r\n\r\nЭто вполне возможно, однако рынок разработки фронтенд-приложений ещё довольно непредсказуем, я бы не стал загадывать.\r\n\r\n**О Redux и других инструментах управления состоянием**\r\n\r\nRedux ещё долго будет существовать на рынке просто в силу размера уже разработанной базы кода и количества освоивших его разработчиков. Далеко не все любят учиться, поэтому используют однажды освоенные технологии от проекта к проекту.\r\n\r\n**О целесообразности изучения**\r\n\r\nРади востребованности на рынке труда, безусловно, эту библиотеку учить стоит. Шансы на то, что в интересующей вас компании будут применять React, очень высоки. По моему мнению, React чаще выбирают в компаниях, где он уже используется в качестве основного инструмента в одном или нескольких проектах. \r\n\r\nВ новых проектах несколько чаще выбирают Vue. Но это лишь мои наблюдения, не подтвержденные какой-то статистикой. Но даже если не работать с React, понимание принципов работы явно пригодится в проектах, а освоить другой фреймворк, зная React, будет уже значительно проще. \r\n\r\nСложно вообще представить специалиста, который освоил какие-то альтернативные фреймворки, при этом не применив ни разу что-нибудь из большой тройки — React, Vue, Angular. Определенно можно сказать, что знание React делает любое резюме весомее, даже если работать с React не предполагается вовсе. \r\n\r\nЕщё хочу акцентировать внимание на усилении тенденции использования TypeScript. Она есть как на фронтенде, так и на бэкенде, чему лично я рад. Таким образом, стоит уделить внимание изучению фреймворков именно в связке с TypeScript.\r\n\r\n**Об эксперте**\r\n\r\n[Алексей Резвов](https://www.linkedin.com/in/arezvov/), организатор [разработки программного обеспечения](https://rezvov.com/ru/).\r\n\r\n\r\n&quot;,&quot;reading_time&quot;:19,&quot;url&quot;:&quot;https://ru.hexlet.io/blog/posts/biblioteka-react-review-article&quot;,&quot;cover_thumb_variant&quot;:&quot;https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTYyOCwicHVyIjoiYmxvYl9pZCJ9fQ==--6bac7610f325471938a0e33f58eaa4c52527d66f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbMTAwLDUwXSwic2F2ZXIiOnsicXVhbGl0eSI6ODV9fSwicHVyIjoidmFyaWF0aW9uIn19--f0d4342fcdbdffa15c37fb02bfb423ac88d5c0c9/%D1%87%D1%82%D0%BE%D1%82%D0%B0%D0%BA%D0%BE%D0%B5react-01.png&quot;,&quot;cover_list_variant&quot;:&quot;https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTYyOCwicHVyIjoiYmxvYl9pZCJ9fQ==--6bac7610f325471938a0e33f58eaa4c52527d66f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX2FuZF9wYWQiOls3MDgsMzU0XSwic2F2ZXIiOnsicXVhbGl0eSI6ODV9fSwicHVyIjoidmFyaWF0aW9uIn19--324dc52aa55ebe818c2a887ebcb832b9ad1c0381/%D1%87%D1%82%D0%BE%D1%82%D0%B0%D0%BA%D0%BE%D0%B5react-01.png&quot;,&quot;cover_main_variant&quot;:&quot;https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTYyOCwicHVyIjoiYmxvYl9pZCJ9fQ==--6bac7610f325471938a0e33f58eaa4c52527d66f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX2FuZF9wYWQiOlsxNDU2LDcyOF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--b2ecf6121248a24883cda19469732b47b57f4e80/%D1%87%D1%82%D0%BE%D1%82%D0%B0%D0%BA%D0%BE%D0%B5react-01.png&quot;,&quot;related_stacks_count&quot;:5},&quot;relatedPosts&quot;:[{&quot;model_name&quot;:&quot;BlogPost&quot;,&quot;id&quot;:416,&quot;title&quot;:&quot;Язык программирования JavaScript: где его используют и почему он популярен&quot;,&quot;slug&quot;:&quot;stoit-li-uchit-javascript-perspektivy-situatsiya-na-rynke-truda-mneniya-ekspertov&quot;,&quot;summary&quot;:&quot;Рассказываем, что это за язык программирования — JavaScript, где его используют, насколько он популярен и с чего начать изучение JavaScript.&quot;,&quot;created_at&quot;:&quot;2019-07-26T08:17:06.287Z&quot;,&quot;published_at&quot;:&quot;2023-10-04T08:41:58.734Z&quot;,&quot;cover_list_variant&quot;:&quot;https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTcwMywicHVyIjoiYmxvYl9pZCJ9fQ==--aa69869c906a992728ba7c26886fa1b715024424/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX2FuZF9wYWQiOls3MDgsMzU0XSwic2F2ZXIiOnsicXVhbGl0eSI6ODV9fSwicHVyIjoidmFyaWF0aW9uIn19--324dc52aa55ebe818c2a887ebcb832b9ad1c0381/%D1%8F%D0%B7%D1%8B%D0%BA%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8Fjavascript-01.png&quot;},{&quot;model_name&quot;:&quot;BlogPost&quot;,&quot;id&quot;:480,&quot;title&quot;:&quot;Все про Node.js: зачем писать бэкенд на JavaScript и сколько за это платят&quot;,&quot;slug&quot;:&quot;zachem-izuchat-node-js-ili-o-perspektivah-bekenda-na-javascript&quot;,&quot;summary&quot;:&quot;Рассказываем, как устроен бэкенд на JavaScript, стоит ли изучать Node.js, когда есть PHP и Python, какое будущее у этой технологии и сколько платят программистам на Node.js.&quot;,&quot;created_at&quot;:&quot;2019-09-27T08:33:36.150Z&quot;,&quot;published_at&quot;:&quot;2023-07-28T13:31:55.753Z&quot;,&quot;cover_list_variant&quot;:&quot;https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTY4MywicHVyIjoiYmxvYl9pZCJ9fQ==--8e5dd13a34bb6d61f1c0db87a25e6e64d0e237fb/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX2FuZF9wYWQiOls3MDgsMzU0XSwic2F2ZXIiOnsicXVhbGl0eSI6ODV9fSwicHVyIjoidmFyaWF0aW9uIn19--324dc52aa55ebe818c2a887ebcb832b9ad1c0381/node%20_new-01.png&quot;},{&quot;model_name&quot;:&quot;BlogPost&quot;,&quot;id&quot;:558,&quot;title&quot;:&quot;Язык программирования Java: что нужно знать новичку&quot;,&quot;slug&quot;:&quot;yazyk-programmirovaniya-java-osobennosti-populyarnost-situatsiya-na-rynke-truda&quot;,&quot;summary&quot;:&quot;Рассказываем, что это за язык — Java, где его применяют, сколько зарабатывают Java-разработчики и как новичку научиться писать на нем код.&quot;,&quot;created_at&quot;:&quot;2019-11-15T15:35:07.300Z&quot;,&quot;published_at&quot;:&quot;2023-07-04T12:16:16.925Z&quot;,&quot;cover_list_variant&quot;:&quot;https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTY2OSwicHVyIjoiYmxvYl9pZCJ9fQ==--052723c2dabf5e97dd0b8eeaa33f767e5debc598/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX2FuZF9wYWQiOls3MDgsMzU0XSwic2F2ZXIiOnsicXVhbGl0eSI6ODV9fSwicHVyIjoidmFyaWF0aW9uIn19--324dc52aa55ebe818c2a887ebcb832b9ad1c0381/%D1%8F%D0%B7%D1%8B%D0%BA%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F%20java-01.png&quot;}],&quot;category&quot;:{&quot;id&quot;:4,&quot;name&quot;:&quot;Код&quot;,&quot;slug&quot;:&quot;code&quot;,&quot;state&quot;:&quot;published&quot;,&quot;created_at&quot;:&quot;2016-08-23T13:33:44.258Z&quot;},&quot;mainStackCategory&quot;:{&quot;id&quot;:2,&quot;name&quot;:&quot;Курсы по веб-разработке&quot;,&quot;slug&quot;:&quot;web_development&quot;,&quot;short_name&quot;:&quot;Веб-разработка&quot;,&quot;order&quot;:190,&quot;state&quot;:&quot;published&quot;,&quot;category_slug&quot;:&quot;courses_web_development&quot;},&quot;categories&quot;:[{&quot;id&quot;:6,&quot;name&quot;:&quot;Мотивация&quot;,&quot;slug&quot;:&quot;motivation&quot;,&quot;state&quot;:&quot;published&quot;,&quot;created_at&quot;:&quot;2016-10-06T18:31:38.903Z&quot;},{&quot;id&quot;:3,&quot;name&quot;:&quot;Истории успеха&quot;,&quot;slug&quot;:&quot;success&quot;,&quot;state&quot;:&quot;published&quot;,&quot;created_at&quot;:&quot;2016-07-30T12:57:18.308Z&quot;},{&quot;id&quot;:14,&quot;name&quot;:&quot;Дневник студента&quot;,&quot;slug&quot;:&quot;student-diary&quot;,&quot;state&quot;:&quot;published&quot;,&quot;created_at&quot;:&quot;2019-02-25T13:27:09.471Z&quot;},{&quot;id&quot;:4,&quot;name&quot;:&quot;Код&quot;,&quot;slug&quot;:&quot;code&quot;,&quot;state&quot;:&quot;published&quot;,&quot;created_at&quot;:&quot;2016-08-23T13:33:44.258Z&quot;},{&quot;id&quot;:12,&quot;name&quot;:&quot;Карьера&quot;,&quot;slug&quot;:&quot;career&quot;,&quot;state&quot;:&quot;published&quot;,&quot;created_at&quot;:&quot;2017-07-21T15:42:21.481Z&quot;}],&quot;relatedLandings&quot;:[{&quot;stack&quot;:{&quot;id&quot;:23,&quot;slug&quot;:&quot;js-react-development&quot;,&quot;title&quot;:&quot;React&quot;,&quot;audience&quot;:&quot;for_programmers&quot;,&quot;start_type&quot;:&quot;anytime&quot;,&quot;pricing_model&quot;:&quot;subscription&quot;,&quot;priority&quot;:&quot;medium&quot;,&quot;kind&quot;:&quot;track&quot;,&quot;state&quot;:&quot;published&quot;,&quot;stack_state&quot;:&quot;finished&quot;,&quot;order&quot;:350,&quot;duration_in_months&quot;:2},&quot;id&quot;:34,&quot;slug&quot;:&quot;js-react-developer&quot;,&quot;title&quot;:&quot;React&quot;,&quot;subtitle&quot;:&quot;Навык разрабатывать быстрые и удобные интерфейсы, открывающий доступ к интересным вакансиям в крупных компаниях&quot;,&quot;subtitle_for_lists&quot;:&quot;Освоите React и создание быстрых интерфейсов&quot;,&quot;locale&quot;:&quot;ru&quot;,&quot;current&quot;:true,&quot;duration_in_months_text&quot;:&quot;2 месяца&quot;,&quot;stack_slug&quot;:&quot;js-react-development&quot;,&quot;price_text&quot;:&quot;от 3 900 ₽&quot;,&quot;duration_text&quot;:&quot;2 месяца&quot;,&quot;cover_list_variant&quot;:&quot;https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDA0OSwicHVyIjoiYmxvYl9pZCJ9fQ==--a6531362dd1f3afb65f5b269e1a23113df7171b1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Devices-amico.png&quot;},{&quot;stack&quot;:{&quot;id&quot;:12,&quot;slug&quot;:&quot;frontend&quot;,&quot;title&quot;:&quot;Фронтенд-разработчик&quot;,&quot;audience&quot;:&quot;for_beginners&quot;,&quot;start_type&quot;:&quot;weekly&quot;,&quot;pricing_model&quot;:&quot;purchase&quot;,&quot;priority&quot;:&quot;high&quot;,&quot;kind&quot;:&quot;profession&quot;,&quot;state&quot;:&quot;published&quot;,&quot;stack_state&quot;:&quot;finished&quot;,&quot;order&quot;:20,&quot;duration_in_months&quot;:10},&quot;id&quot;:17,&quot;slug&quot;:&quot;frontend&quot;,&quot;title&quot;:&quot;Фронтенд-разработчик&quot;,&quot;subtitle&quot;:&quot;Изучите HTML, CSS, JavaScript и React&quot;,&quot;subtitle_for_lists&quot;:&quot;Изучите HTML, CSS, JavaScript и React&quot;,&quot;locale&quot;:&quot;ru&quot;,&quot;current&quot;:true,&quot;duration_in_months_text&quot;:&quot;10 месяцев&quot;,&quot;stack_slug&quot;:&quot;frontend&quot;,&quot;price_text&quot;:&quot;от 6 792 ₽&quot;,&quot;duration_text&quot;:&quot;10 месяцев&quot;,&quot;cover_list_variant&quot;:&quot;https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzcyNywicHVyIjoiYmxvYl9pZCJ9fQ==--2d5cbbf5c3b4a73ae4b2c50632305d78f5872e4d/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programmer-rafiki.png&quot;},{&quot;stack&quot;:{&quot;id&quot;:29,&quot;slug&quot;:&quot;js-oop&quot;,&quot;title&quot;:&quot;ООП на Javascript&quot;,&quot;audience&quot;:&quot;for_programmers&quot;,&quot;start_type&quot;:&quot;anytime&quot;,&quot;pricing_model&quot;:&quot;subscription&quot;,&quot;priority&quot;:&quot;medium&quot;,&quot;kind&quot;:&quot;track&quot;,&quot;state&quot;:&quot;published&quot;,&quot;stack_state&quot;:&quot;finished&quot;,&quot;order&quot;:4250,&quot;duration_in_months&quot;:2},&quot;id&quot;:46,&quot;slug&quot;:&quot;js-oop&quot;,&quot;title&quot;:&quot;ООП на Javascript&quot;,&quot;subtitle&quot;:&quot;Навык глубокого понимания архитектуры и написания чистого кода, позволяющий решать сложные задачи&quot;,&quot;subtitle_for_lists&quot;:&quot;Изучите архитектуру и принципы чистого кода на JS&quot;,&quot;locale&quot;:&quot;ru&quot;,&quot;current&quot;:true,&quot;duration_in_months_text&quot;:&quot;2 месяца&quot;,&quot;stack_slug&quot;:&quot;js-oop&quot;,&quot;price_text&quot;:&quot;от 3 900 ₽&quot;,&quot;duration_text&quot;:&quot;2 месяца&quot;,&quot;cover_list_variant&quot;:&quot;https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAxOSwicHVyIjoiYmxvYl9pZCJ9fQ==--84efd2b6854b7000046e9ce06e6be85d38af5ab8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/JavaScript%20frameworks-cuate.png&quot;},{&quot;stack&quot;:{&quot;id&quot;:52,&quot;slug&quot;:&quot;typescript&quot;,&quot;title&quot;:&quot;Typescript&quot;,&quot;audience&quot;:&quot;for_programmers&quot;,&quot;start_type&quot;:&quot;anytime&quot;,&quot;pricing_model&quot;:&quot;subscription&quot;,&quot;priority&quot;:&quot;medium&quot;,&quot;kind&quot;:&quot;track&quot;,&quot;state&quot;:&quot;published&quot;,&quot;stack_state&quot;:&quot;finished&quot;,&quot;order&quot;:200,&quot;duration_in_months&quot;:2},&quot;id&quot;:92,&quot;slug&quot;:&quot;typescript&quot;,&quot;title&quot;:&quot;Typescript&quot;,&quot;subtitle&quot;:&quot;Навык снижать ошибки, упрощать отладку, повышать качество кода и ускорять разработку с автодополнением и типизацией&quot;,&quot;subtitle_for_lists&quot;:&quot;Изучите Typescript и получите навык снижать ошибки, упрощать отладку&quot;,&quot;locale&quot;:&quot;ru&quot;,&quot;current&quot;:true,&quot;duration_in_months_text&quot;:&quot;2 месяца&quot;,&quot;stack_slug&quot;:&quot;typescript&quot;,&quot;price_text&quot;:&quot;от 3 900 ₽&quot;,&quot;duration_text&quot;:&quot;2 месяца&quot;,&quot;cover_list_variant&quot;:&quot;https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzcwOSwicHVyIjoiYmxvYl9pZCJ9fQ==--03e50bbd408fef672ad099f7b2a258d80f54ad96/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Hand%20coding-bro.png&quot;},{&quot;stack&quot;:{&quot;id&quot;:21,&quot;slug&quot;:&quot;js-async&quot;,&quot;title&quot;:&quot;Асинхронное программирование на JS&quot;,&quot;audience&quot;:&quot;for_programmers&quot;,&quot;start_type&quot;:&quot;anytime&quot;,&quot;pricing_model&quot;:&quot;subscription&quot;,&quot;priority&quot;:&quot;medium&quot;,&quot;kind&quot;:&quot;track&quot;,&quot;state&quot;:&quot;published&quot;,&quot;stack_state&quot;:&quot;finished&quot;,&quot;order&quot;:1650,&quot;duration_in_months&quot;:1},&quot;id&quot;:30,&quot;slug&quot;:&quot;js-async&quot;,&quot;title&quot;:&quot;Асинхронное программирование на JS&quot;,&quot;subtitle&quot;:&quot;Навык асинхронного программирования в JavaScript: писать быстрый код, расти в грейде и успешно проходить собеседования&quot;,&quot;subtitle_for_lists&quot;:&quot;Навык работы с асинхронностью в JS&quot;,&quot;locale&quot;:&quot;ru&quot;,&quot;current&quot;:true,&quot;duration_in_months_text&quot;:&quot;1 месяц&quot;,&quot;stack_slug&quot;:&quot;js-async&quot;,&quot;price_text&quot;:&quot;от 3 900 ₽&quot;,&quot;duration_text&quot;:&quot;1 месяц&quot;,&quot;cover_list_variant&quot;:&quot;https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAzMSwicHVyIjoiYmxvYl9pZCJ9fQ==--442647b9b09e64febe5646427471c53eb6f80b32/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programming-pana.png&quot;}]},&quot;url&quot;:&quot;/blog/posts/biblioteka-react-review-article&quot;,&quot;version&quot;:&quot;8f286f6358a90a7bef2263b3a6edf5a90a94fa42&quot;,&quot;encryptHistory&quot;:false,&quot;clearHistory&quot;:false}"><style data-mantine-styles="true">:root, :host{--mantine-font-family: Arial, sans-serif;--mantine-font-family-headings: Arial, sans-serif;--mantine-heading-font-weight: normal;--mantine-radius-default: 0rem;--mantine-primary-color-filled: var(--mantine-color-indigo-filled);--mantine-primary-color-filled-hover: var(--mantine-color-indigo-filled-hover);--mantine-primary-color-light: var(--mantine-color-indigo-light);--mantine-primary-color-light-hover: var(--mantine-color-indigo-light-hover);--mantine-primary-color-light-color: var(--mantine-color-indigo-light-color);--mantine-spacing-xxl: calc(4rem * var(--mantine-scale));--mantine-font-size-xs: 12px;--mantine-font-size-sm: 14px;--mantine-font-size-md: 16px;--mantine-font-size-lg: clamp(16.0000px, calc(15.2727px + 0.2273vw), 18.0000px);--mantine-font-size-xl: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-display-3: clamp(32.0000px, calc(26.1818px + 1.8182vw), 48.0000px);--mantine-font-size-display-2: clamp(36.0000px, calc(25.8182px + 3.1818vw), 64.0000px);--mantine-font-size-display-1: clamp(40.0000px, calc(25.4545px + 4.5455vw), 80.0000px);--mantine-font-size-h1: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-font-size-h2: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-font-size-h3: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-font-size-h4: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-font-size-h5: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-font-size-h6: 1rem;--mantine-primary-color-0: var(--mantine-color-indigo-0);--mantine-primary-color-1: var(--mantine-color-indigo-1);--mantine-primary-color-2: var(--mantine-color-indigo-2);--mantine-primary-color-3: var(--mantine-color-indigo-3);--mantine-primary-color-4: var(--mantine-color-indigo-4);--mantine-primary-color-5: var(--mantine-color-indigo-5);--mantine-primary-color-6: var(--mantine-color-indigo-6);--mantine-primary-color-7: var(--mantine-color-indigo-7);--mantine-primary-color-8: var(--mantine-color-indigo-8);--mantine-primary-color-9: var(--mantine-color-indigo-9);--mantine-color-red-0: #ffeaea;--mantine-color-red-1: #fed4d4;--mantine-color-red-2: #f4a7a8;--mantine-color-red-3: #ec7878;--mantine-color-red-4: #e55050;--mantine-color-red-5: #e03131;--mantine-color-red-6: #e02829;--mantine-color-red-7: #c71a1c;--mantine-color-red-8: #b21218;--mantine-color-red-9: #9c0411;--mantine-color-violet-0: #fce9ff;--mantine-color-violet-1: #f1cfff;--mantine-color-violet-2: #e09bff;--mantine-color-violet-3: #d16fff;--mantine-color-violet-4: #be37fe;--mantine-color-violet-5: #b51afe;--mantine-color-violet-6: #b009ff;--mantine-color-violet-7: #9b00e4;--mantine-color-violet-8: #8a00cc;--mantine-color-violet-9: #7800b3;--mantine-color-indigo-0: #edecff;--mantine-color-indigo-1: #d6d5fe;--mantine-color-indigo-2: #aaa9f4;--mantine-color-indigo-3: #7b79eb;--mantine-color-indigo-4: #5451e4;--mantine-color-indigo-5: #3b37e0;--mantine-color-indigo-6: #2d2adf;--mantine-color-indigo-7: #1f1ec7;--mantine-color-indigo-8: #1819b2;--mantine-color-indigo-9: #0c149e;--mantine-color-cyan-0: #dffdff;--mantine-color-cyan-1: #caf5ff;--mantine-color-cyan-2: #99e8ff;--mantine-color-cyan-3: #64daff;--mantine-color-cyan-4: #3ccffe;--mantine-color-cyan-5: #24c8fe;--mantine-color-cyan-6: #00c2ff;--mantine-color-cyan-7: #00ade4;--mantine-color-cyan-8: #009acd;--mantine-color-cyan-9: #0085b5;--mantine-color-green-0: #e9fdec;--mantine-color-green-1: #d7f6dc;--mantine-color-green-2: #b0eab9;--mantine-color-green-3: #86df94;--mantine-color-green-4: #62d574;--mantine-color-green-5: #4ccf5f;--mantine-color-green-6: #3fcc54;--mantine-color-green-7: #2fb344;--mantine-color-green-8: #25a03b;--mantine-color-green-9: #138a2e;--mantine-color-yellow-0: #fff7e2;--mantine-color-yellow-1: #ffeecd;--mantine-color-yellow-2: #ffdc9c;--mantine-color-yellow-3: #ffc966;--mantine-color-yellow-4: #feb93a;--mantine-color-yellow-5: #feae1e;--mantine-color-yellow-6: #ffa90f;--mantine-color-yellow-8: #ca8200;--mantine-color-yellow-9: #af7000;--mantine-h1-font-size: clamp(28.0000px, calc(23.6364px + 1.3636vw), 40.0000px);--mantine-h1-font-weight: normal;--mantine-h2-font-size: clamp(24.0000px, calc(21.0909px + 0.9091vw), 32.0000px);--mantine-h2-font-weight: normal;--mantine-h3-font-size: clamp(20.0000px, calc(17.0909px + 0.9091vw), 28.0000px);--mantine-h3-font-weight: normal;--mantine-h4-font-size: clamp(16.0000px, calc(13.0909px + 0.9091vw), 24.0000px);--mantine-h4-font-weight: normal;--mantine-h5-font-size: clamp(16.0000px, calc(14.5455px + 0.4545vw), 20.0000px);--mantine-h5-font-weight: normal;--mantine-h6-font-size: 1rem;--mantine-h6-font-weight: normal;}

:root[data-mantine-color-scheme="dark"], :host([data-mantine-color-scheme="dark"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-dark-filled: var(--mantine-color-dark-5);--mantine-color-dark-filled-hover: var(--mantine-color-dark-6);--mantine-color-dark-light: rgba(105, 105, 105, 0.15);--mantine-color-dark-light-hover: rgba(105, 105, 105, 0.2);--mantine-color-dark-light-color: var(--mantine-color-dark-0);--mantine-color-dark-outline: var(--mantine-color-dark-1);--mantine-color-dark-outline-hover: rgba(184, 184, 184, 0.05);--mantine-color-gray-filled: var(--mantine-color-gray-5);--mantine-color-gray-filled-hover: var(--mantine-color-gray-6);--mantine-color-gray-light: rgba(222, 226, 230, 0.15);--mantine-color-gray-light-hover: rgba(222, 226, 230, 0.2);--mantine-color-gray-light-color: var(--mantine-color-gray-0);--mantine-color-gray-outline: var(--mantine-color-gray-1);--mantine-color-gray-outline-hover: rgba(241, 243, 245, 0.05);--mantine-color-red-filled: var(--mantine-color-red-5);--mantine-color-red-filled-hover: var(--mantine-color-red-6);--mantine-color-red-light: rgba(236, 120, 120, 0.15);--mantine-color-red-light-hover: rgba(236, 120, 120, 0.2);--mantine-color-red-light-color: var(--mantine-color-red-0);--mantine-color-red-outline: var(--mantine-color-red-1);--mantine-color-red-outline-hover: rgba(254, 212, 212, 0.05);--mantine-color-pink-filled: var(--mantine-color-pink-5);--mantine-color-pink-filled-hover: var(--mantine-color-pink-6);--mantine-color-pink-light: rgba(250, 162, 193, 0.15);--mantine-color-pink-light-hover: rgba(250, 162, 193, 0.2);--mantine-color-pink-light-color: var(--mantine-color-pink-0);--mantine-color-pink-outline: var(--mantine-color-pink-1);--mantine-color-pink-outline-hover: rgba(255, 222, 235, 0.05);--mantine-color-grape-filled: var(--mantine-color-grape-5);--mantine-color-grape-filled-hover: var(--mantine-color-grape-6);--mantine-color-grape-light: rgba(229, 153, 247, 0.15);--mantine-color-grape-light-hover: rgba(229, 153, 247, 0.2);--mantine-color-grape-light-color: var(--mantine-color-grape-0);--mantine-color-grape-outline: var(--mantine-color-grape-1);--mantine-color-grape-outline-hover: rgba(243, 217, 250, 0.05);--mantine-color-violet-filled: var(--mantine-color-violet-5);--mantine-color-violet-filled-hover: var(--mantine-color-violet-6);--mantine-color-violet-light: rgba(209, 111, 255, 0.15);--mantine-color-violet-light-hover: rgba(209, 111, 255, 0.2);--mantine-color-violet-light-color: var(--mantine-color-violet-0);--mantine-color-violet-outline: var(--mantine-color-violet-1);--mantine-color-violet-outline-hover: rgba(241, 207, 255, 0.05);--mantine-color-indigo-filled: var(--mantine-color-indigo-5);--mantine-color-indigo-filled-hover: var(--mantine-color-indigo-6);--mantine-color-indigo-light: rgba(123, 121, 235, 0.15);--mantine-color-indigo-light-hover: rgba(123, 121, 235, 0.2);--mantine-color-indigo-light-color: var(--mantine-color-indigo-0);--mantine-color-indigo-outline: var(--mantine-color-indigo-1);--mantine-color-indigo-outline-hover: rgba(214, 213, 254, 0.05);--mantine-color-blue-filled: var(--mantine-color-blue-5);--mantine-color-blue-filled-hover: var(--mantine-color-blue-6);--mantine-color-blue-light: rgba(116, 192, 252, 0.15);--mantine-color-blue-light-hover: rgba(116, 192, 252, 0.2);--mantine-color-blue-light-color: var(--mantine-color-blue-0);--mantine-color-blue-outline: var(--mantine-color-blue-1);--mantine-color-blue-outline-hover: rgba(208, 235, 255, 0.05);--mantine-color-cyan-filled: var(--mantine-color-cyan-5);--mantine-color-cyan-filled-hover: var(--mantine-color-cyan-6);--mantine-color-cyan-light: rgba(100, 218, 255, 0.15);--mantine-color-cyan-light-hover: rgba(100, 218, 255, 0.2);--mantine-color-cyan-light-color: var(--mantine-color-cyan-0);--mantine-color-cyan-outline: var(--mantine-color-cyan-1);--mantine-color-cyan-outline-hover: rgba(202, 245, 255, 0.05);--mantine-color-teal-filled: var(--mantine-color-teal-5);--mantine-color-teal-filled-hover: var(--mantine-color-teal-6);--mantine-color-teal-light: rgba(99, 230, 190, 0.15);--mantine-color-teal-light-hover: rgba(99, 230, 190, 0.2);--mantine-color-teal-light-color: var(--mantine-color-teal-0);--mantine-color-teal-outline: var(--mantine-color-teal-1);--mantine-color-teal-outline-hover: rgba(195, 250, 232, 0.05);--mantine-color-green-filled: var(--mantine-color-green-5);--mantine-color-green-filled-hover: var(--mantine-color-green-6);--mantine-color-green-light: rgba(134, 223, 148, 0.15);--mantine-color-green-light-hover: rgba(134, 223, 148, 0.2);--mantine-color-green-light-color: var(--mantine-color-green-0);--mantine-color-green-outline: var(--mantine-color-green-1);--mantine-color-green-outline-hover: rgba(215, 246, 220, 0.05);--mantine-color-lime-filled: var(--mantine-color-lime-5);--mantine-color-lime-filled-hover: var(--mantine-color-lime-6);--mantine-color-lime-light: rgba(192, 235, 117, 0.15);--mantine-color-lime-light-hover: rgba(192, 235, 117, 0.2);--mantine-color-lime-light-color: var(--mantine-color-lime-0);--mantine-color-lime-outline: var(--mantine-color-lime-1);--mantine-color-lime-outline-hover: rgba(233, 250, 200, 0.05);--mantine-color-yellow-filled: var(--mantine-color-yellow-5);--mantine-color-yellow-filled-hover: var(--mantine-color-yellow-6);--mantine-color-yellow-light: rgba(255, 201, 102, 0.15);--mantine-color-yellow-light-hover: rgba(255, 201, 102, 0.2);--mantine-color-yellow-light-color: var(--mantine-color-yellow-0);--mantine-color-yellow-outline: var(--mantine-color-yellow-1);--mantine-color-yellow-outline-hover: rgba(255, 238, 205, 0.05);--mantine-color-orange-filled: var(--mantine-color-orange-5);--mantine-color-orange-filled-hover: var(--mantine-color-orange-6);--mantine-color-orange-light: rgba(255, 192, 120, 0.15);--mantine-color-orange-light-hover: rgba(255, 192, 120, 0.2);--mantine-color-orange-light-color: var(--mantine-color-orange-0);--mantine-color-orange-outline: var(--mantine-color-orange-1);--mantine-color-orange-outline-hover: rgba(255, 232, 204, 0.05);--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-9) 0%, var(--mantine-color-cyan-7) 100%);--app-color-surface: #2e2e2e;}

:root[data-mantine-color-scheme="light"], :host([data-mantine-color-scheme="light"]){--mantine-color-anchor: var(--mantine-color-text);--mantine-color-dimmed: #495057;--mantine-color-red-light: rgba(224, 40, 41, 0.1);--mantine-color-red-light-hover: rgba(224, 40, 41, 0.12);--mantine-color-red-outline-hover: rgba(224, 40, 41, 0.05);--mantine-color-violet-light: rgba(176, 9, 255, 0.1);--mantine-color-violet-light-hover: rgba(176, 9, 255, 0.12);--mantine-color-violet-outline-hover: rgba(176, 9, 255, 0.05);--mantine-color-indigo-light: rgba(45, 42, 223, 0.1);--mantine-color-indigo-light-hover: rgba(45, 42, 223, 0.12);--mantine-color-indigo-outline-hover: rgba(45, 42, 223, 0.05);--mantine-color-cyan-light: rgba(0, 194, 255, 0.1);--mantine-color-cyan-light-hover: rgba(0, 194, 255, 0.12);--mantine-color-cyan-outline-hover: rgba(0, 194, 255, 0.05);--mantine-color-green-light: rgba(63, 204, 84, 0.1);--mantine-color-green-light-hover: rgba(63, 204, 84, 0.12);--mantine-color-green-outline-hover: rgba(63, 204, 84, 0.05);--mantine-color-yellow-light: rgba(255, 169, 15, 0.1);--mantine-color-yellow-light-hover: rgba(255, 169, 15, 0.12);--mantine-color-yellow-outline-hover: rgba(255, 169, 15, 0.05);--app-color-surface: #f1f3f5;--app-cta-gradient: linear-gradient(90deg, var(--mantine-color-blue-filled) 0%, var(--mantine-color-cyan-5) 100%);}</style><style data-mantine-styles="classes">@media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}</style><script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","author":"Анастасия Уминская","name":"Библиотека React: особенности, перспективы, ситуация на рынке труда","datePublished":"2024-02-29T07:46:44.876Z","headline":"В объявлениях о поиске программистов часто встречается требование уметь работать с React. Иногда работодатели ожидают знания React не только от фронтендеров, но и от бэкенд-разработчиков. Почему эта библиотека настолько популярная, стоит ли изучать её сегодня, каковы её перспективы по мнению опытных программистов? Ответы на эти и другие вопросы читайте в обзорной статье.","image":"https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTYyOCwicHVyIjoiYmxvYl9pZCJ9fQ==--6bac7610f325471938a0e33f58eaa4c52527d66f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX2FuZF9wYWQiOlsxNDU2LDcyOF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--b2ecf6121248a24883cda19469732b47b57f4e80/%D1%87%D1%82%D0%BE%D1%82%D0%B0%D0%BA%D0%BE%D0%B5react-01.png","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":13}]}</script><div style="--container-size:var(--container-size-lg);margin-top:var(--mantine-spacing-xl);height:100%" class="m_7485cace mantine-Container-root" data-size="lg" data-strategy="block"><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"position":1,"@type":"ListItem","item":{"@id":"/blog","name":"Блог Хекслета"}},{"position":2,"@type":"ListItem","item":{"@id":"/blog/categories/code","name":"Код"}},{"position":3,"@type":"ListItem","item":{"@id":"/blog/posts/biblioteka-react-review-article","name":"Библиотека React: особенности, перспективы, ситуация на рынке труда"}}]}</script><div style="margin-bottom:var(--mantine-spacing-xs)" class="m_8b3717df mantine-Breadcrumbs-root"><a style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);white-space:normal;color:inherit" class="mantine-focus-auto m_849cf0da m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-size="sm" data-underline="hover" href="/"><div style="color:inherit" class="m_4451eb3a mantine-Center-root"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-home-link "><path d="M20.085 11.085l-8.085 -8.085l-9 9h2v7a2 2 0 0 0 2 2h4.5"></path><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 1.807 1.143"></path><path d="M20 21a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M20 16a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M15 19a1 1 0 1 0 2 0a1 1 0 1 0 -2 0"></path><path d="M21 16l-5 3l5 2"></path></svg></div></a><div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div><a style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);white-space:normal;color:inherit" class="mantine-focus-auto m_849cf0da m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-size="sm" data-underline="hover" href="/blog">Блог Хекслета</a><div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div><a style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);white-space:normal;color:inherit" class="mantine-focus-auto m_849cf0da m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-size="sm" data-underline="hover" href="/blog/categories/code">Код</a><div class="m_3b8f2208 mantine-Breadcrumbs-separator">/</div><p style="--text-fz:var(--mantine-font-size-sm);--text-lh:var(--mantine-line-height-sm);white-space:normal;color:var(--mantine-color-dimmed)" class="mantine-focus-auto m_f678d540 mantine-Breadcrumbs-breadcrumb m_b6d8b162 mantine-Text-root" data-size="sm">Библиотека React: особенности, перспективы, ситуация на рынке труда</p></div><style data-mantine-styles="inline">.__m__-_R_eub_{margin-bottom:var(--mantine-spacing-xs);}@media(min-width: 36em){.__m__-_R_eub_{margin-bottom:var(--mantine-spacing-xs);}}</style><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root __m__-_R_eub_"><style data-mantine-styles="inline">.__m__-_R_deub_{width:100%;}@media(min-width: 36em){.__m__-_R_deub_{width:70%;}}@media(min-width: 75em){.__m__-_R_deub_{width:75%;}}</style><div class="__m__-_R_deub_"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><h1 style="--title-fw:var(--mantine-h1-font-weight);--title-lh:var(--mantine-h1-line-height);--title-fz:var(--mantine-h1-font-size)" class="m_8a5d1357 mantine-Title-root" data-order="1">Библиотека React: особенности, перспективы, ситуация на рынке труда</h1></div></div></div><div style="position:absolute;top:calc(18.75rem * var(--mantine-scale))" class=""></div><style data-mantine-styles="inline">.__m__-_R_2iub_{--grid-gutter:var(--mantine-spacing-xl);}</style><div class="m_410352e9 mantine-Grid-root __m__-_R_2iub_"><div class="m_dee7bd2f mantine-Grid-inner"><style data-mantine-styles="inline">.__m__-_R_dmiub_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 48em){.__m__-_R_dmiub_{--col-flex-grow:auto;--col-flex-basis:83.33333333333334%;--col-max-width:83.33333333333334%;}}@media(min-width: 62em){.__m__-_R_dmiub_{--col-flex-grow:auto;--col-flex-basis:66.66666666666667%;--col-max-width:66.66666666666667%;}}</style><div class="m_96bdd299 mantine-Grid-col __m__-_R_dmiub_"><div style="--stack-gap:var(--mantine-spacing-md);--stack-align:stretch;--stack-justify:flex-start;margin-bottom:var(--mantine-spacing-xl)" class="m_6d731127 mantine-Stack-root"><div class=""><div style="--group-gap:var(--mantine-spacing-xs);--group-align:center;--group-justify:flex-start;--group-wrap:wrap;margin-bottom:var(--mantine-spacing-xl)" class="m_4081bf90 mantine-Group-root"><button style="--badge-height:var(--badge-height-sm);--badge-padding-x:var(--badge-padding-x-sm);--badge-fz:var(--badge-fz-sm);--badge-bg:var(--mantine-color-default);--badge-color:var(--mantine-color-default-color);--badge-bd:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);cursor:pointer;color:inherit" class="m_347db0ec mantine-Badge-root" data-variant="default" data-size="sm" type="button" aria-label="JavaScript"><span class="m_5add502a mantine-Badge-label">JavaScript</span></button></div><div style="--group-gap:calc(0.625rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap;margin-bottom:var(--mantine-spacing-sm);color:var(--mantine-color-gray-text)" class="m_4081bf90 mantine-Group-root"><div style="--group-gap:calc(0.1875rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap;margin-inline-end:var(--mantine-spacing-lg)" class="m_4081bf90 mantine-Group-root">29 февраля 2024 г.</div><div style="--group-gap:calc(0.1875rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-clock "><path d="M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0"></path><path d="M12 7v5l3 3"></path></svg></div>19 минут</div><div style="--group-gap:calc(0.1875rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-thumb-up "><path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"></path></svg></div>13</div></div><div style="--ar-ratio:2" class="m_71ac47fc mantine-AspectRatio-root"><img style="--image-radius:var(--mantine-radius-md);--image-object-fit:cover;width:100%;height:100%" class="m_9e117634 mantine-Image-root" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTYyOCwicHVyIjoiYmxvYl9pZCJ9fQ==--6bac7610f325471938a0e33f58eaa4c52527d66f/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX2FuZF9wYWQiOlsxNDU2LDcyOF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--b2ecf6121248a24883cda19469732b47b57f4e80/%D1%87%D1%82%D0%BE%D1%82%D0%B0%D0%BA%D0%BE%D0%B5react-01.png" alt="Библиотека React: особенности, перспективы, ситуация на рынке труда"/></div></div><div role="link" tabindex="0" style="cursor:pointer"><button style="display:block;width:100%" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Присоединяйтесь к нашему Telegram-сообществу"><div style="background-color:light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-6))" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:flex-start;--group-wrap:wrap" class="m_4081bf90 mantine-Group-root"><div style="--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:auto;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-brand-telegram "><path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4"></path></svg></div>Присоединяйтесь к нашему Telegram-сообществу</div></div></button></div><div style="margin-bottom:var(--mantine-spacing-xl)" class="m_d08caa0 mantine-Typography-root"><p><strong>React — одна из самых популярных библиотек для фронтендеров. Ее используют для создания современных интерфейсов. Расскажем подробнее, что такое React и как он работает.</strong></p>
<p>React — JavaScript-библиотека для работы с пользовательскими интерфейсами (UI), которую создали разработчики Facebook. Библиотеку начали использовать на сайте этой социальной сети в 2011 году. А в 2013 году Facebook открыл исходный код React.</p>
<p>С помощью React разработчики создают веб-приложения, которые изменяют отображение без перезагрузки страницы. Благодаря этому сайты быстро реагируют на действия пользователя, например, заполнение форм, применение фильтров, добавление товаров в корзину и так далее.</p>
<p>React применяют для отрисовки компонентов пользовательского интерфейса. Также библиотека может полностью управлять фронтендом. В этом случае React используют с библиотеками для роутинга и управления состоянием, например, Redux и React Router.</p>
<style data-mantine-styles="inline">.__m__-_R_9derddmiub_{--carousel-slide-gap:var(--mantine-spacing-xs);--carousel-slide-size:70%;}@media(min-width: 36em){.__m__-_R_9derddmiub_{--carousel-slide-gap:var(--mantine-spacing-xl);--carousel-slide-size:50%;}}</style><div style="--carousel-control-size:calc(2.5rem * var(--mantine-scale));--carousel-controls-offset:var(--mantine-spacing-sm);margin-bottom:var(--mantine-spacing-lg);padding-block:var(--mantine-spacing-sm);background:var(--app-color-surface)" class="m_17884d0f mantine-Carousel-root responsiveClassName" data-orientation="horizontal" data-include-gap-in-size="true"><div class="m_39bc3463 mantine-Carousel-controls" data-orientation="horizontal"><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="previous" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="next" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><div class="m_a2dae653 mantine-Carousel-viewport" data-type="media"><div class="m_fcd81474 mantine-Carousel-container __m__-_R_9derddmiub_" data-orientation="horizontal"><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/js-react-developer?promo_name=programs_list&amp;promo_position=blog_post&amp;promo_creative=catalog_card&amp;promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">2 месяца</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Для продвинутых</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">React</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Освоите React и создание быстрых интерфейсов</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDA0OSwicHVyIjoiYmxvYl9pZCJ9fQ==--a6531362dd1f3afb65f5b269e1a23113df7171b1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Devices-amico.png" alt="React" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">от 3 900 ₽</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/frontend?promo_name=programs_list&amp;promo_position=blog_post&amp;promo_creative=catalog_card&amp;promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">10 месяцев</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">С нуля</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Фронтенд-разработчик</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Изучите HTML, CSS, JavaScript и React</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzcyNywicHVyIjoiYmxvYl9pZCJ9fQ==--2d5cbbf5c3b4a73ae4b2c50632305d78f5872e4d/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programmer-rafiki.png" alt="Фронтенд-разработчик" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">от 6 792 ₽</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/js-oop?promo_name=programs_list&amp;promo_position=blog_post&amp;promo_creative=catalog_card&amp;promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">2 месяца</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Для продвинутых</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">ООП на Javascript</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Изучите архитектуру и принципы чистого кода на JS</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAxOSwicHVyIjoiYmxvYl9pZCJ9fQ==--84efd2b6854b7000046e9ce06e6be85d38af5ab8/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/JavaScript%20frameworks-cuate.png" alt="ООП на Javascript" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">от 3 900 ₽</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/typescript?promo_name=programs_list&amp;promo_position=blog_post&amp;promo_creative=catalog_card&amp;promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">2 месяца</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Для продвинутых</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Typescript</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Изучите Typescript и получите навык снижать ошибки, упрощать отладку</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MzcwOSwicHVyIjoiYmxvYl9pZCJ9fQ==--03e50bbd408fef672ad099f7b2a258d80f54ad96/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Hand%20coding-bro.png" alt="Typescript" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">от 3 900 ₽</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/programs/js-async?promo_name=programs_list&amp;promo_position=blog_post&amp;promo_creative=catalog_card&amp;promo_type=card" target="_blank"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="--group-gap:calc(0.25rem * var(--mantine-scale));--group-align:center;--group-justify:flex-start;--group-wrap:nowrap" class="m_4081bf90 mantine-Group-root"><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">1 месяц</span><span class="mantine-focus-auto m_b6d8b162 mantine-Text-root">·</span><span style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Для продвинутых</span></div><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h5);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Асинхронное программирование на JS</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Навык работы с асинхронностью в JS</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6NDAzMSwicHVyIjoiYmxvYl9pZCJ9fQ==--442647b9b09e64febe5646427471c53eb6f80b32/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX3RvX2xpbWl0IjpbNDAwLDQwMF0sInNhdmVyIjp7InF1YWxpdHkiOjg1fX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--5b6f46dacd1af664f27558553a58076185091823/Programming-pana.png" alt="Асинхронное программирование на JS" loading="eager"/></div><div style="--group-gap:var(--mantine-spacing-md);--group-align:end;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-xs)" class="m_4081bf90 mantine-Group-root"><p style="font-size:var(--mantine-font-size-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">от 3 900 ₽</p><p style="font-size:var(--mantine-font-size-sm)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses?promo_name=programs_list&amp;promo_position=blog_post&amp;promo_creative=catalog_card&amp;promo_type=card"><div style="height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><h2 style="--title-fw:var(--mantine-h2-font-weight);--title-lh:var(--mantine-h2-line-height);--title-fz:var(--mantine-h2-font-size);margin-bottom:var(--mantine-spacing-md);font-size:var(--mantine-font-size-h3)" class="m_8a5d1357 mantine-Title-root" data-order="2" data-responsive="true">Каталог</h2><p style="margin-bottom:auto" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Полный список доступных курсов по разным направлениям</p><div style="margin-top:auto" class=""><div class="m_4451eb3a mantine-Center-root"><img style="opacity:0.8;width:70%" class="m_9e117634 mantine-Image-root mantine-visible-from-xs" src="/vite/assets/development-BVihs_d5.png" alt="Orientation"/></div></div></div></a></div></div></div></div></div>
<h2 id="heading-2-1">Содержание</h2>
<ul>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#heading-2-2">Зачем нужен React</a></li>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#heading-2-3">Как работает React</a></li>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#heading-2-11">Преимущества и недостатки React</a></li>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#heading-2-12">Конкуренты React.js</a></li>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#heading-2-15">Востребованность React.js</a></li>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="#heading-2-16">Стоит ли учить React: мнение экспертов о развитии и перспективах библиотеки</a></li>
</ul>
<h2 id="heading-2-2">Зачем нужен React</h2>
<p>Фронтенд современных сайтов пишут на JavaScript. Этот язык программирования позволяет создавать интерактивные интерфейсы. То есть реагирующие на действия пользователей.</p>
<p>Например, вы можете написать комментарий к странице и опубликовать его одним нажатием кнопки. Он появится на сайте без обновления страницы. Все это благодаря JavaScript.</p>
<p>Казалось бы, интерактивность уже обеспечивает сам язык программирования. Но разработчики постоянно трудятся над оптимизацией рутинных задач.</p>
<p>С этой целью создают библиотеки и фреймворки. Первое — набор функций и компонентов, которые применяют для своего кода. Второе — готовые каркасы для приложений, которые можно использовать с небольшими видоизменениями.</p>
<p>React — самая популярная библиотека для JS, его применяют на многих проектах.</p>
<p>Разработчики используют React, выбирая из его возможностей то, что может пригодиться для конкретной задачи.</p>
<p>Где используют React:</p>
<ul>
<li>Для разработки любых интерактивных интерфейсов у многостраничных и одностраничных сайтов;</li>
<li>Для создания сложных программных продуктов, за счет React их гораздо проще описывать;</li>
<li>Для программирования как целых страниц, так и отдельных компонентов, React позволяет многократно использовать одни и те же элементы;</li>
<li>Для создания мобильных приложений. Но в этом случае необходимо использовать технологии для адаптации.</li>
</ul>
<style data-mantine-styles="inline">.__m__-_R_11derddmiub_{--carousel-slide-gap:var(--mantine-spacing-xs);--carousel-slide-size:80%;}@media(min-width: 36em){.__m__-_R_11derddmiub_{--carousel-slide-gap:var(--mantine-spacing-xl);--carousel-slide-size:50%;}}</style><div style="--carousel-control-size:calc(2.5rem * var(--mantine-scale));--carousel-controls-offset:var(--mantine-spacing-sm);margin-bottom:var(--mantine-spacing-lg);padding-block:var(--mantine-spacing-sm);background:var(--app-color-surface)" class="m_17884d0f mantine-Carousel-root responsiveClassName" data-orientation="horizontal" data-include-gap-in-size="true"><div class="m_39bc3463 mantine-Carousel-controls" data-orientation="horizontal"><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="previous" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button><button class="mantine-focus-auto m_64f58e10 mantine-Carousel-control m_87cf2631 mantine-UnstyledButton-root" type="button" data-inactive="true" data-type="next" tabindex="-1"><svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" style="transform:rotate(-90deg);width:calc(1rem * var(--mantine-scale));height:calc(1rem * var(--mantine-scale));display:block"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></div><div class="m_a2dae653 mantine-Carousel-viewport" data-type="media"><div class="m_fcd81474 mantine-Carousel-container __m__-_R_11derddmiub_" data-orientation="horizontal"><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/stoit-li-uchit-javascript-perspektivy-situatsiya-na-rynke-truda-mneniya-ekspertov"><div style="padding-top:0rem;height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="margin-bottom:var(--mantine-spacing-sm)" class="m_599a2148 mantine-Card-section" data-first-section="true"><div style="--ar-ratio:2" class="m_71ac47fc mantine-AspectRatio-root"><img class="m_9e117634 mantine-Image-root" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTcwMywicHVyIjoiYmxvYl9pZCJ9fQ==--aa69869c906a992728ba7c26886fa1b715024424/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX2FuZF9wYWQiOls3MDgsMzU0XSwic2F2ZXIiOnsicXVhbGl0eSI6ODV9fSwicHVyIjoidmFyaWF0aW9uIn19--324dc52aa55ebe818c2a887ebcb832b9ad1c0381/%D1%8F%D0%B7%D1%8B%D0%BA%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8Fjavascript-01.png" loading="lazy" alt="Язык программирования JavaScript: где его используют и почему он популярен"/></div></div><p style="margin-bottom:var(--mantine-spacing-xs);font-size:var(--mantine-font-size-lg);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Язык программирования JavaScript: где его используют и почему он популярен</p><p style="margin-bottom:auto" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Рассказываем, что это за язык программирования — JavaScript, где его используют, насколько он поп...</p><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-lg);font-size:var(--mantine-font-size-sm)" class="m_4081bf90 mantine-Group-root">4 октября 2023 г.<p style="font-size:inherit" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/zachem-izuchat-node-js-ili-o-perspektivah-bekenda-na-javascript"><div style="padding-top:0rem;height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="margin-bottom:var(--mantine-spacing-sm)" class="m_599a2148 mantine-Card-section" data-first-section="true"><div style="--ar-ratio:2" class="m_71ac47fc mantine-AspectRatio-root"><img class="m_9e117634 mantine-Image-root" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTY4MywicHVyIjoiYmxvYl9pZCJ9fQ==--8e5dd13a34bb6d61f1c0db87a25e6e64d0e237fb/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX2FuZF9wYWQiOls3MDgsMzU0XSwic2F2ZXIiOnsicXVhbGl0eSI6ODV9fSwicHVyIjoidmFyaWF0aW9uIn19--324dc52aa55ebe818c2a887ebcb832b9ad1c0381/node%20_new-01.png" loading="lazy" alt="Все про Node.js: зачем писать бэкенд на JavaScript и сколько за это платят"/></div></div><p style="margin-bottom:var(--mantine-spacing-xs);font-size:var(--mantine-font-size-lg);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Все про Node.js: зачем писать бэкенд на JavaScript и сколько за это платят</p><p style="margin-bottom:auto" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Рассказываем, как устроен бэкенд на JavaScript, стоит ли изучать Node.js, когда есть PHP и Python...</p><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-lg);font-size:var(--mantine-font-size-sm)" class="m_4081bf90 mantine-Group-root">28 июля 2023 г.<p style="font-size:inherit" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></a></div></div><div class="m_d98df724 mantine-Carousel-slide" data-orientation="horizontal"><div tabindex="0" style="cursor:pointer;height:100%"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/yazyk-programmirovaniya-java-osobennosti-populyarnost-situatsiya-na-rynke-truda"><div style="padding-top:0rem;height:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root" data-with-border="true"><div style="margin-bottom:var(--mantine-spacing-sm)" class="m_599a2148 mantine-Card-section" data-first-section="true"><div style="--ar-ratio:2" class="m_71ac47fc mantine-AspectRatio-root"><img class="m_9e117634 mantine-Image-root" src="https://hexlet.io/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6MTY2OSwicHVyIjoiYmxvYl9pZCJ9fQ==--052723c2dabf5e97dd0b8eeaa33f767e5debc598/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJ3ZWJwIiwicmVzaXplX2FuZF9wYWQiOls3MDgsMzU0XSwic2F2ZXIiOnsicXVhbGl0eSI6ODV9fSwicHVyIjoidmFyaWF0aW9uIn19--324dc52aa55ebe818c2a887ebcb832b9ad1c0381/%D1%8F%D0%B7%D1%8B%D0%BA%20%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F%20java-01.png" loading="lazy" alt="Язык программирования Java: что нужно знать новичку"/></div></div><p style="margin-bottom:var(--mantine-spacing-xs);font-size:var(--mantine-font-size-lg);font-weight:bold" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Язык программирования Java: что нужно знать новичку</p><p style="margin-bottom:auto" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Рассказываем, что это за язык — Java, где его применяют, сколько зарабатывают Java-разработчики и...</p><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap;margin-top:var(--mantine-spacing-lg);font-size:var(--mantine-font-size-sm)" class="m_4081bf90 mantine-Group-root">4 июля 2023 г.<p style="font-size:inherit" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></div></a></div></div></div></div></div>
<h2 id="heading-2-3">Как работает React</h2>
<p>Расскажем о ключевых особенностях библиотеки, которые обеспечили ей популярность.</p>
<h3 id="heading-3-4">Декларативный подход</h3>
<p>React использует декларативный подход в программировании. Если в императивном программировании необходимо задать каждое действие, то в декларативном достаточно описания конечного результата и реакции на действия.</p>
<p>Проще говоря, разработчик при создании кода указывает, как должен себя повести интерфейс при получении определенных данных или наступлении событий.</p>
<p>Библиотека позволяет оптимизировать процесс разработки за счет того, что программисту не нужно описывать подробности. React.js самостоятельно будет обновлять элементы, ориентируясь на условия. Задача программиста — грамотно описать их.</p>
<p>Использование этого подхода позволяет создавать приложения на React максимально быстро.</p>
<h3 id="heading-3-5">Компоненты</h3>
<p>Главная сущность в этой библиотеке — компоненты. Они представляют собой отдельные элементы на странице. Каждый компонент в React — инкапсулированный, то есть содержит в себе весь комплект данных и методов, необходимых для работы.</p>
<p>Инкапсуляция позволяет хранить состояние элементов в них самих. Это делает их изолированными и самостоятельными.</p>
<p>Эта особенность React предусматривает постоянное переиспользование элементов. Один и тот же элемент можно применить на другой странице или в другом разделе сайта.</p>
<p>Преимущества такого подхода очевидны — разработчику не нужно заново писать код для элемента. А отсутствие сложных зависимостей между ними упрощает отладку.</p>
<h3 id="heading-3-6">Рендеринг компонентов</h3>
<p>У каждой страницы в интернете есть своя структура. Это так называемое DOM-дерево или объектная модель документа. Он состоит из тэгов HTML — языка разметки и каскадных таблиц стилей — CSS, а также подключенного к нему коду на JavaScript.</p>
<p>У библиотеки React есть специальный механизм для управления рендерингом всех компонентов на странице. То есть создания визуального представления элементов.</p>
<p>Для этого React сохраняет в кэше копию DOM-дерева. Она изменяется быстрее оригинала, что позволяет приложению так же быстро обновлять страницу.</p>
<p>Например, если после какого-либо действия страница нуждается в перезагрузке, React будет работать не с реальной структурой, а с копией. Что позволит пользователю быстрее увидеть результат.</p>
<p>За счет этого в приложениях, написанных на React, изменения вносятся практически мгновенно — ждать несколько секунд не нужно.</p>
<p>Этот процесс основан на обновлении DOM по частям. В памяти остаются две копии: старая и новая. При необходимости React сравнивает две версии и меняет только ту часть, в которой что-то изменилось, а не весь DOM целиком.</p>
<p>За счет этого достигается оптимизация загрузки.</p>
<h3 id="heading-3-7">Передача свойств компонентов</h3>
<p>В React реализовали нисходящий поток данных. Компоненты могут передавать данные и свойства только сверху вниз, от родительских к дочерним.</p>
<p>Такая иерархия позволяет быстро понять, откуда поступила информация, упрощая нахождение ошибок.</p>
<p>Также в этой библиотеке нельзя изменять свойства напрямую. Такую возможность реализуют только через callback-функции. Это участки кода в виде параметра функции, которые передают от одного компонента другому.</p>
<p>За счет этого все данные, свойства и события идут сверху вниз. Свойства не меняются после создания, а как бы пересоздаются. Это обеспечивает такой системе стабильность.</p>
<h3 id="heading-3-8">Hooks</h3>
<p>Изначально в React использовали классы — тип компонентов, включающих в себя методы управления состоянием. Сейчас вместо этого используют хуки. Это функции, которые как крючки можно прицепить к состоянию метода или элемента.</p>
<p>Это позволяет отказаться от применения классов. Вместо этого при изменении состояния автоматически выполняют заданные функции.</p>
<p>В библиотеке есть как готовые хуки, так и возможность для разработчика написать свои собственные.</p>
<h3 id="heading-3-9">JSX</h3>
<p>В React реализовали собственное расширение для JavaScript. С его помощью можно описывать элементы HTML-кодом на этом языке программирования. В итоге разработчики получают возможность менять структуру DOM, используя привычный JavaScript.</p>
<p>На практике это выглядит так: программист пишет компонент с HTML, но тот становится объектом на JavaScript с соответствующими возможностями. Это не всегда просто для новичков, но удобно для опытных разработчиков.</p>
<h3 id="heading-3-10">Developer Tools</h3>
<p>Это специальный набор инструментов в виде расширения для браузера. Developer Tools в React помогают в деле проверки и отладки написанного кода.</p>
<p>По сути, это аналог привычной панели разработчика в браузере, но с дополнительными возможностями.</p>
<h2 id="heading-2-11">Преимущества и недостатки React</h2>
<p>Разберемся в преимуществах и недостатках этой библиотеки — как технических, так и с точки зрения обучения.</p>
<p>Технические достоинства:</p>
<ul>
<li>Скорость загрузки</li>
</ul>
<p>Виртуальный DOM позволяет приложениям на React загружаться гораздо быстрее аналогов. Такие сайты становится более отзывчивыми и хорошо реагируют на изменения.</p>
<ul>
<li>Быстрая разработка</li>
</ul>
<p>Приложения на React состоят из компонентов. Их легко создавать в рамках этой экосистемы. Программистам не нужно с нуля продумывать логику, достаточно только описать состояние. Один раз созданный компонент можно использовать во многих частях проекта. Все это ускоряет разработку и оптимизирует затраты труда разработчика.</p>
<ul>
<li>Минимизация ошибок</li>
</ul>
<p>Использование этой библиотеки позволяет забыть о многих рутинных операциях. Это уменьшает влияние «человеческого фактора»: в готовых решениях сложнее ошибиться. За счет этого использование React на проекте упрощается отладка и уменьшается количество багов.</p>
<p>Если рассматривать React как технологию для изучения, его плюсы:</p>
<ul>
<li>Распространенность</li>
</ul>
<p>Сейчас он занимает первое место среди самых популярных инструментов для разработки интерфейсов. Из ближайших конкурентов — фреймворки Vue.js и Angular. Но о них мы поговорим ниже. В настоящее время библиотеку активно используют на проектах в крупных компаниях и найти работу со знанием React относительно легко.</p>
<ul>
<li>Крупное комьюнити</li>
</ul>
<p>Изучать React удобно в силу хорошей задокументированности и большого сообщества. Эту библиотеку используют тысячи опытных разработчиков, поэтому начинающим будет легко найти ответ на вопрос или попросить о помощи.</p>
<ul>
<li>Большая экосистема</li>
</ul>
<p>Библиотека React регулярно обновляется. А за счет крупного комьюнити есть множество энтузиастов, которые создают свои собственные решения. Их можно применять совместно с React. Речь идет и о дополнительных библиотеках, и об инструментах.</p>
<p>Недостатки у этой библиотеки тоже есть:</p>
<ul>
<li>Сложность изучения</li>
</ul>
<p>React отличается собственной архитектурой на основе компонентов. Новичкам бывает сложно овладеть всеми концепциями этой библиотеки. Большое внимание при разработке на React уделяют улучшению производительности при помощи виртуального DOM. А это потребует перестройки мышления.</p>
<p>Технология JSX также часто вызывает затруднение: разработчикам бывает тяжело собирать воедино язык разметки и JavaScript.</p>
<ul>
<li>Высокий порог входа</li>
</ul>
<p>В отличие от большинства ближайших конкурентов, React — библиотека, а не фреймворк. Он оставляет разработчику куда больше простора для приложения усилий.</p>
<p>Используя фреймворк, можно брать готовую структуру и изменять ее под нужды проекта, а библиотека предполагает собственную структуру и меньший объем готовых решений.</p>
<p>Таким образом, от программиста с React требуется больше квалификации.</p>
<h2 id="heading-2-12">Конкуренты React.js</h2>
<p>Ближайшие по популярности конкуренты React — фреймворки Angular и Vue. Вместе они составляют большую тройку технологий для фронтенда, одну из которых обычно выбирают при реализации проектов. Расскажем о них подробнее.</p>
<h3 id="heading-3-13">Angular</h3>
<p>Этот фреймворк выпустила компания Google. Его основная цель — создание одностраничных приложений на JavaScript и TypeScript. Angular — наследник AngularJS, разработанного в 2009 году. Но это другой фреймворк и обратной совместимости у них нет.</p>
<p>Он обладает принципиально другой архитектурой и даже написан на другом языке — TypeScript, а не на JavaScript.</p>
<p>Главное преимущество Angular — модульность. Этот фреймворк позволяет собирать приложения на основе готовых компонентов — модулей. Их пишут и тестируют изолированно, что добавляет надежности.</p>
<p>В состав Angular входит огромное количество библиотек, инструментов и дополнительных возможностей. Фактически в рамках его инфраструктуры можно реализовать любое решение.</p>
<p>Angular применяют для создания крупных корпоративных приложений. Его преимущество в обилии инструментов для стандартных задач. Однако это может быть и ограничением. В Angular много «навязанных» решений и меньше гибкости по сравнению с React.js. Его редко используют для MVP и небольших проектов.</p>
<p>К тому же Angular как технология гораздо объемнее и для его изучения потребуется больше времени.</p>
<h3 id="heading-3-14">Vue</h3>
<p>Vue.js — относительно молодой фреймворк для создания пользовательских интерфейсов. Его отличительная особенность — представление, которое изменяется по мере изменения модели.</p>
<p>Vue используют для создания быстрых сайтов, небольших блогов и нагруженных веб-приложений. Этот фреймворк подходит для внедрения в уже существующие проекты. На нем часто переписывают отдельные модули, а не всю структуру целиком.</p>
<p>Vue, по сравнению с аналогами, отличается простотой и низким порогом входа. Его сможет без труда освоить даже начинающий веб-разработчик. Vue применяют для MVP и средних приложений.</p>
<p>Этот фреймворк обеспечивает высокую скорость разработки и масштабируемость. Пока что он распространен меньше, чем Angular и React, но развивается более динамично.</p>
<p>Многие предпочитают делать проекты на этом фреймворке из-за более простого найма разработчиков. Освоить Vue несколько проще.</p>
<h2 id="heading-2-15">Востребованность React.js</h2>
<p>Согласно <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://survey.stackoverflow.co/2023/#technology-most-popular-technologies" rel="noopener noreferrer" target="_blank">исследованию</a> портала Stackoverflow, React занимает второе место в списке самых популярных фреймворков и технологий. Немногим превосходит его только Node.js, который адаптирует JavaScript для серверной разработки.</p>
<p>А в технологиях для фронтенда React уверенно побеждает всех конкурентов.</p>
<p>Если посмотреть по <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://npmtrends.com/@angular/core-vs-react-vs-vue" rel="noopener noreferrer" target="_blank">статистике загрузок</a>, то эта библиотека также уверенно лидирует, оставляя позади двух самых сильных конкурентов: Vue и Angular.</p>
<p>Что касается статистики hh.ru, на момент написания статьи:</p>
<ul>
<li>React фигурировал в 3473 вакансиях.</li>
<li>Angular — в 1339.</li>
<li>Vue — 1977.</li>
</ul>
<h2 id="heading-2-16">Стоит ли учить React: мнение экспертов о развитии и перспективах библиотеки</h2>
<p>Специально для этой статьи опытные разработчики поделились мыслями о перспективах React, целесообразности изучения этой библиотеки и инструментах для управления состоянием и альтернативных библиотеках и фреймворках. Эксперты ответили на такие вопросы:</p>
<ol>
<li><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://blog.logrocket.com/making-the-business-case-for-react-in-2019-74463bbb22de/" rel="noopener noreferrer" target="_blank">По данным LogRocket</a>, доля React на рынке UI-фреймворков и библиотек составляет около 60%. Как вы считаете, в обозримом будущем эта ситуация может существенно измениться?</li>
<li>Провокационный вопрос: фреймворк или библиотека, который обойдёт React в будущем, уже существует или он только должен появиться?</li>
<li>Какие новые возможности React лично вы ждёте больше всего? Когда они могут появиться?</li>
<li>Для управления состоянием в более или менее сложных React-приложениях чаще всего используется Redux. Появятся ли альтернативы Redux, которые станут популярными и общепринятыми способами управления состоянием?</li>
<li>Вопрос, ответ на который заинтересует новичков: стоит ли изучать React, чтобы устроиться на работу фронтенд-разработчиком в 2020 или 2021 году?</li>
</ol>
<h3 id="heading-3-17">Сергей Сова: React далеко не простой, но изучив его, можно не бояться фронтенд-разработки</h3>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="https://imgur.com/B5A9PAo.jpg" alt="Сергей Сова" loading="lazy"/></p>
<hr/>
<p><strong>О популярности</strong></p>
<p>Сейчас появляется все больше фреймворков на рынке, и этот факт сам по себе снижает долю React. Думаю, что эта библиотека будет постепенно уходить из предпочтений разработчиков. Хоть и на данный момент это самое лучшее и популярное решение.</p>
<p><strong>О библиотеке или фреймворке, который обойдёт React в будущем</strong></p>
<p>Да, я думаю, что такой инструмент уже есть, хоть и в очень зачаточном состоянии. При должном развитии, популяризации и организации обучения, этот новый инструмент заменит React в привычных сферах. Это решение построено на основе стейт-менеджера Effector. Автор Effector пришел к выводу, что управление состоянием неотделимо от отображения. Пока что рано рассказывать об этом решении на большую аудиторию. Но желающие смогут легко найти информацию об Effector в поиске.</p>
<p><strong>О новых возможностях</strong></p>
<p>Я жду, когда React научится батчить апдейты от сторонних событий. Например, от событий браузера, вроде клика по кнопке, двойной вызов хука setState или аналогичного, вызовет только один рендер. Но если двойной setState будет вызван по таймауту, то будет два рендера. Это не круто.</p>
<p>Помимо этого, хочется tree-shaking. Слишком уж много весит react-dom. Я не хочу «платить» за то, чего не использую.</p>
<p><strong>О Redux и других инструментах управления состоянием</strong></p>
<p>Redux изжил себя. Насчёт общепринятых или популярных — не знаю. Но я сам, а также в рабочих проектах с командой, полностью перешёл на управление состоянием с помощью Effector. Он поддерживает SSR, TypeScript, не привязан к фреймворку. Обеспечивает декларативные связи между сущностями, что помогает визуально отсматривать логику.</p>
<p>Я уже очень давно хотел отделить логику от вью. То есть ровно так, чтобы логика жила своей жизнью, независимо от вью. Компонент просто отправляет события в логику, а та сама решает, что делать с событиями, а вью лишь рендерится от стейта. Получаем React — та самая функция от состояния.</p>
<p>Effector позволяет мне реализовать это все без бойлерплейта, десятков различных методов, классов и декораторов. Лишь обычный JS/TS.</p>
<p><strong>О целесообразности изучения</strong></p>
<p>Да, стоит. Это самое популярное и гибкое решение на данный момент. Да, React далеко не простой, но изучив его, можно не бояться фронтенд-разработки. В отличие от фреймворков, React использует экосистему JavaScript, а не выдумывает полностью свою. Хоть и очень похож на фреймворк.</p>
<p><strong>Об эксперте</strong></p>
<p><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://sova.dev" rel="noopener noreferrer" target="_blank">Сергей Сова</a>, Frontend Team-Lead at REDMADROBOT. Frontender, Podcaster, Rustacean. <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://t.me/sergeysova" rel="noopener noreferrer" target="_blank">Telegram</a>, <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://vk.com/sovadev" rel="noopener noreferrer" target="_blank">«ВКонтакте»</a>.</p>
<h3 id="heading-3-18">Анна Селезнёва: начинать обучение надо не с фреймворка, а с чистого JavaScript</h3>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="https://imgur.com/4AGqESk.jpg" alt="Анна Селезнёва" loading="lazy"/></p>
<hr/>
<p><strong>О популярности</strong></p>
<p>На мой взгляд, ситуация будет меняться, но несущественно, если говорить о цифрах. <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://2019.stateofjs.com/front-end-frameworks/" rel="noopener noreferrer" target="_blank">State of JavaScript</a> наглядно показывает, что лидеры на рынке фреймворков постоянно меняются, и в любой момент могут появиться конкурентоспособные новички.</p>
<p>История успеха Svelte говорит о том, что в ближайшем будущем может появиться что-то новое, что заберет часть аудитории у React. Скорее всего, React еще долгое время будет если не на первом месте, то определенно в топе фреймворков.</p>
<p>Стоит отметить также, что существующие фреймворки различаются концептуально и используются для разных типов проектов. Поэтому популярность можно предсказывать, основываясь также на развитии технологий и подходов. На фоне развития мобильной разработки наличие React Native также играет в пользу фреймворка.</p>
<p><strong>О библиотеке или фреймворке, который обойдёт React в будущем</strong></p>
<p>Во фронтенде популярность и востребованность крайне переменчива. Возможно, какой-то из существующих фреймворков в будущем станет популярнее React, а спустя год выйдет новый, который обойдет обоих, но тоже ненадолго. При этом разница в популярности может быть минимальной.</p>
<p>Не стоит забывать о том, что за любым фреймворком стоит комьюнити, и пока оно растет и развивается, развиваться будет и фреймворк. А если кто-то из главных игроков прекратит поддержку, это может привести к плачевным результатам.</p>
<p><strong>О новых возможностях</strong></p>
<p>Честно говоря, мне пока хватает возможностей для разработки текущих проектов. Все же React изначально преподносился как библиотека, и основная ставка делалась на комьюнити, которое постоянно предлагает новые и интересные решения типовых задач. При этом и само ядро React также постоянно развивается с учетом требований разработчиков, что не может не радовать.</p>
<p>Учитывая эти факторы, уже завтра может появиться что-то новое, что позволит улучшить проект. Но, честно говоря, это даже пугает. Ведь мне тут же захочется отрефакторить код и использовать возможности, а на это требуется время, которого у фронтенд-разработчика обычно не хватает.</p>
<p><strong>О Redux и других инструментах управления состоянием</strong></p>
<p>Новые инструменты появятся. Я бы даже сказала, что уже сейчас они есть. С одной стороны, появление хуков заставило взглянуть на управление состоянием под другим углом. С другой стороны, клиентские <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://ru.hexlet.io/blog/posts/chto-takoe-graphql-s-osnov-do-pervyh-zaprosov" rel="noopener noreferrer" target="_blank">реализации для GraphQL</a> (например, Apollo) позволяют некоторым проектам обходиться без Redux. Также не стоит недооценивать MobX, который развивается и в будущем может предложить неплохую альтернативу.</p>
<p><strong>О целесообразности изучения</strong></p>
<p>Вот этот вопрос мне кажется более провокационным. Потому что нужно начинать изучение не с фреймворка, тем более, такого специфического, как React, а с чистого JavaScript. А потом уже можно попробовать разные фреймворки, чтобы понимать, как они устроены, и различать подходы к разработке проектов.</p>
<p>Как раз недавно на митапе MinskJS, который я помогаю организовывать, соорганизатор митапов MinskCSS и MinskJS Саша Шинкевич рассказывала доклад на тему <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://youtu.be/JHiQVS5ZXJI?t=2766" rel="noopener noreferrer" target="_blank">«Как перестать выбирать фреймворки и начать жить»</a>. Мне кажется, это хорошая иллюстрация современного фронтенда. Выбирайте фреймворк не ради фреймворка, а для достижения хорошего результата.</p>
<p><strong>Об эксперте</strong></p>
<p><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://twitter.com/asktwi" rel="noopener noreferrer" target="_blank">Анна Селезнёва</a>, Lead Frontend Developer @ <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://spiralscout.com/" rel="noopener noreferrer" target="_blank">Spiral Scout</a>.</p>
<h3 id="heading-3-19">Артём Арутюнян: на React уже написано слишком много, глобально бизнесу не выгодна его депопуляризация</h3>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="https://imgur.com/lWDkLCq.jpg" alt="Артём Арутюнян" loading="lazy"/></p>
<hr/>
<p><strong>О популярности</strong></p>
<p>В обозримом по меркам фронтент-разработки будущем доля React существенно не упадёт. На нём уже написано слишком много, глобально бизнесу не выгодно его депопуляризация.</p>
<p><strong>О библиотеке или фреймворке, который обойдёт React в будущем</strong></p>
<p>Думаю, такого инструмента ещё нет. Но это мне как идеалисту хочется чего-то принципиально нового. Опыт Vue показывает, что может быть иначе.</p>
<p><strong>О новых возможностях</strong></p>
<p>Я знаю много приложений, которые реально станут быстрее при включении конкурентного режима. Хочется, чтобы это случилось быстрее, эта задача не такая сложная, как может показаться. Также хочется, чтобы в React появилась более явная система реактивности, хуки мне не нравятся.</p>
<p><strong>О Redux и других инструментах управления состоянием</strong></p>
<p>Это сложный вопрос, но серебряной пули, думаю, не будет. Redux Toolkit может ещё продлить жизнь Redux, но, честно говоря, это выглядит как серьезный костыль, и часть очень важных проблем он все ещё не решает. Reatom выглядит логичной эволюцией и я, конечно, надеюсь, что он отнимет часть рынка. При этом интересными выглядят и альтернативные подходы вроде graphQL-driven или grammarly/focal, думаю, они тоже будут развиваться.</p>
<p>Recoil также займет часть рынка, скорее всего в приложениях с небольшим сроком жизни (на пару лет). В чем-то крупном — не думаю.</p>
<p>Возможно будет ещё оптимизирован в плане DX и обезмагивания MobX, и его будут ждать новые высоты — автор все ещё активно им занимается.</p>
<p>XState мне кажется очень нишевым, как Rx и Effector.</p>
<p>В общем, подходов много, каждому своё, при этом я смогу точно сказать, что нам ещё предстоит встретить что-то новое и, возможно, нас ждёт более выраженная дисперсия, а не появление стандарта такой же популярности, как сейчас/раньше Redux.</p>
<p><strong>О целесообразности изучения</strong></p>
<p>Точно стоит, индустрия в лице бизнеса ещё долго будет нуждаться в разработчиках на React.</p>
<p><strong>Об эксперте</strong></p>
<p><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://twitter.com/artalar_dev" rel="noopener noreferrer" target="_blank">Артём Арутюнян</a>, автор библиотеки <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/artalar/reatom" rel="noopener noreferrer" target="_blank">Reatom</a>.</p>
<h3 id="heading-3-20">Роман Макаров: важно не забывать, что React — всего лишь инструмент, а по-настоящему ценно знание фундаментальных вещей</h3>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="https://imgur.com/uGq5p6W.jpg" alt="Роман Макаров" loading="lazy"/></p>
<p><strong>О популярности</strong></p>
<p>В обозримом будущем, кажется, крупных изменений не стоит ждать. Во-первых, из-за инертности — очень уж много написано на React и вокруг него. Во-вторых, инструмент объективно удобный.</p>
<p><strong>О библиотеке или фреймворке, который обойдёт React в будущем</strong></p>
<p>Мне кажется, это будет инструмент на базе React, но с большим количеством возможностей из коробки, то есть полноценный фреймворк: со встроенным стейт-менеджментом, роутингом, стандартизированным подходом к работе с формами, переводами и тому подобное.</p>
<p><strong>О новых возможностях</strong></p>
<p>Лично мне хочется дальнейшего развития create-react-app как инструмента для быстрого старта. Разработчики пошли по пути кастомных темплейтов вместо конфигурирования через cli при создании приложения. Это, конечно, уже лучше, чем создавать и поддерживать собственные бойлерплейты, но всё ещё недостаточно для того, чтобы считать CRA промышленным стандартом.</p>
<p>Кроме того, API хуков пока кажется неким промежуточным решением, поверх которого должна быть построена более удобная система работы с состоянием и методами жизненного цикла.</p>
<p><strong>О Redux и других инструментах управления состоянием</strong></p>
<p>Redux в чистом виде — это скорее концепция, чем инструмент для промышленной разработки. Сейчас, кажется, он вообще не используется в приложениях уровнем выше учебных.</p>
<p>За последние годы вокруг Redux возникла целая экосистема библиотек с мидлварами и хэлперами для удобной работы, а квинтэссенцией стала библиотека redux-toolkit. Из существующих альтернатив лично мне нравится библиотека mobx-state-tree, построенная поверх Mobx. И если для небольших приложений эта библиотека выглядит избыточной, то на проектах с большим количеством логики в тандеме с хуками она прекрасна.</p>
<p><strong>О целесообразности изучения</strong></p>
<p>Я думаю, что эта библиотека еще долгое время будет присутствовать в большинстве объявлений о поиске фронтенд-разработчиков, поэтому мой ответ — да, её стоит изучать. Но важно не забывать, что это всего лишь инструмент, а по-настоящему ценно знание фундаментальных вещей — операционных систем, сетей, структур данных, алгоритмов, концепций и парадигм.</p>
<p><strong>Об эксперте</strong></p>
<p><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://github.com/frontstall" rel="noopener noreferrer" target="_blank">Роман Макаров</a>, фронтенд-разработчик в Хекслете.</p>
<h3 id="heading-3-21">Сергей Головин: чем опытнее разработчик, тем менее важной для него становится конкретная библиотека, фреймворк и даже язык программирования</h3>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="https://imgur.com/AIew9L8.jpg" alt="Сергей Головин" loading="lazy"/></p>
<hr/>
<p><strong>О популярности</strong></p>
<p>Как мне кажется, сейчас нет совершенно никаких предпосылок к радикальному изменению положения дел на рынке разработки веб-приложений. Все лидирующие фреймворки и библиотеки поделили между собой сообщество разработчиков, заняли определенные ниши и год от года лишь незначительно меняют соотношение долей на «графике популярности». Тем не менее, есть несколько факторов, которые действительно могли бы что-то изменить.</p>
<p>Первый и основной — очередной технологический сдвиг. Так было, когда «эпоха jQuery» закончилась в связи с переносом бизнес-логики с сервера на клиент, что, в свою очередь, закономерно произошло из-за значительного увеличения производительности, как компьютеров в целом, так и браузеров в частности, существенного роста скорости доступа к сети интернет, а также из-за запроса со стороны бизнеса на перенос сложных технических решений в веб без потери отзывчивости, присущей десктоп-приложениям.</p>
<p>В ближайшее время чего-то подобного не предвидится, но, безусловно, нельзя полностью исключать возможность внезапного появления принципиально новой технологии, которая повлечет за собой очередной эволюционный виток или даже техническую революцию. Например, всё чаще и чаще подход SPA подвергается критике, звучат призывы к возврату бизнес-логики на сервер с сохранением отзывчивости, присущей SPA-приложениям. Одним из наиболее интересных и стабильных решений подобного плана является <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.phoenixframework.org/" rel="noopener noreferrer" target="_blank">Phoenix Framework</a>, который, тем не менее, пока не стал популярным и остается <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://ru.hexlet.io/blog/posts/codebattle-ili-kak-opensors-proekt-dayot-opyt-programmirovaniya-i-pomogaet-stroit-karieru" rel="noopener noreferrer" target="_blank">довольно нишевым продуктом</a>.</p>
<p>Второй фактор — маркетинговый. Facebook может прекратить существенную поддержку и продвижение React, параллельно с этим другая компания начнет вкладывать огромные суммы денег в другую библиотеку или фреймворк, и это может привести к значительному изменению статистики. Но даже такие изменения вряд ли произойдут быстро.</p>
<p><strong>О библиотеке или фреймворке, который обойдёт React в будущем</strong></p>
<p>Оба варианта возможны. Но мне кажется, что второй вариант более правдоподобен. При этом нельзя исключать, что библиотекой, которая обойдет React в будущем, может стать условный React 2. Так или иначе, прогнозы по этому поводу делать очень сложно, но хотелось бы верить, что решение, которое станет популярнее React, будет чем-то принципиально новым, иначе это просто очередная смена шила на мыло.</p>
<p><strong>О новых возможностях</strong></p>
<p>На мой взгляд, вместо добавления чего-то нового команде React стоит сфокусироваться на доработке и стабилизации старого. Переработка методов жизненного цикла и добавление хуков привели к тому, что сейчас есть несколько разных способов делать похожие вещи, при этом best practices на этот счет в сообществе пока еще не сложились. Соответственно, мы имеем два параллельных мира: мир разработчиков, предпочитающих классы, где все еще есть неоднозначная замена <code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">componentWillReceiveProps</code> на <code style="margin-bottom:var(--mantine-spacing-lg)" class="m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight m_e597c321 mantine-CodeHighlight-codeHighlight m_dfe9c588 mantine-InlineCodeHighlight-inlineCodeHighlight">getDerivedStateFromProps</code>, и мир разработчиков, предпочитающих функциональные компоненты и хуки, имеющие перегруженный и местами запутанный API.</p>
<p>Добавление каких-то нововведений в библиотеку может фрагментировать сообщество ещё сильнее и повысить порог входа в React. Это сложно считать движением в правильном направлении, поэтому, как мне кажется, стоит сначала довести до ума всё, что еще не доведено, а уже потом только думать над добавлением чего-то нового.</p>
<p><strong>О Redux и других инструментах управления состоянием</strong></p>
<p>Такие решения уже появились. Например, те же MobX и Effector являются отличными production-ready альтернативами. Конечно, нельзя сказать, что они настолько же популярны, как Redux, и это, возможно, является сейчас их основным недостатком, из которого уже вытекают более конкретные. Например, сообщество этих библиотек значительно меньше, чем у Redux, из-за чего может быть сложнее найти готовые решения или ответы на возникшие вопросы. Банальное, но существенное преимущество Redux — огромное количество статей и гайдов по связке React + Redux.</p>
<p>Безусловно, есть много опытных разработчиков, для которых отсутствие готовых решений и малочисленное сообщество не являются минусом, так как они вполне могут сами написать необходимые библиотеки или дописать недостающую этим state-менеджерам функциональность, а также найти ответ на свой вопрос, прочитав исходники этих библиотек. Но не стоит забывать, что есть очень много разработчиков, которые просто не видят смысла переходить на другие библиотеки, понимая, что те недостатки, которые, безусловно, есть в Redux, не перевешивают для них его достоинств. Так или иначе монополии Redux уже не существует, разные команды по разным причинам выбирают разные решения, и выбор у них, безусловно, есть.</p>
<p><strong>О целесообразности изучения</strong></p>
<p>Если отвечать коротко, то да, стоит. React сейчас очень популярен, соответственно, вакансий, где требуются его знания, очень много. Но стоит отметить, что само по себе изучение React не должно являться самоцелью, важнее изучать принципы и основные концепции, лежащие в его основе. Чем опытнее разработчик, тем менее важной для него становится конкретная библиотека, фреймворк и даже язык программирования.</p>
<p>Опытный разработчик, который много лет работал с Vue, довольно быстро может переключиться на проект, где используется React. Это возможно, потому что он понимает, на каких принципах базируются данные библиотеки, видит похожие абстракции и пересечение концепций этих библиотек. Поэтому на самом деле, хоть React и вполне хорош для старта карьеры, выбор любой другой современной библиотеки или фреймворка будет не менее хорошим.</p>
<p><strong>Об эксперте</strong></p>
<p>Сергей Головин — ведущий разработчик/технический руководитель <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://csssr.com/ru" rel="noopener noreferrer" target="_blank">CSSSR</a>.</p>
<h3 id="heading-3-22">Анна Волкова: много компаний с современным стеком технологий используют React, поэтому эту библиотеку стоит учить</h3>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="https://imgur.com/sIvs7DE.jpg" alt="Анна Волкова" loading="lazy"/></p>
<p><strong>О популярности</strong></p>
<p>Да, думаю, что в какой-то момент ситуация может измениться, но это будет не очень быстро, как с jQuery. Когда появилась эта библиотека, она заняла большую нишу. Но ведь jQuery еще используют где-то, также будет и с React.</p>
<p><strong>О библиотеке или фреймворке, который обойдёт React в будущем</strong></p>
<p>Пока, наверное, реальной альтернативы не существует. Я думаю, что если бы уже существовала такая библиотека или фреймворк, то она бы также быстро и много стала использоваться, как React.</p>
<p><strong>О новых возможностях</strong></p>
<p>Жду от React стабильности и совместимости.</p>
<p><strong>О Redux и других инструментах управления состоянием</strong></p>
<p>Ответила бы тут также, как и на второй вопрос. Очень много проектов написано с использованием связки React/Redux, поэтому пока Redux вне конкуренции.</p>
<p><strong>О целесообразности изучения</strong></p>
<p>Да, безусловно стоит, так как много компаний с современным стеком технологий используют React.</p>
<p><strong>Об эксперте</strong></p>
<p><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://twitter.com/volkova_annie" rel="noopener noreferrer" target="_blank">Анна Волкова</a>, фронтенд-разработчик в <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://alfabank.ru/" rel="noopener noreferrer" target="_blank">«Альфа-банке»</a>.</p>
<h3 id="heading-3-23">Максим Лебедев: такой же крутой экосистемы, как у React, на горизонте не видно</h3>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="https://imgur.com/UjgoUpC.jpg" alt="Максим Лебедев" loading="lazy"/></p>
<hr/>
<p><strong>О популярности</strong></p>
<p>По-моему мнению, в IT, а тем более в такой динамичной развивающейся его части, как технологии для веба и всё, что с ним связано, «обозримым будущим» можно называть период времени максимум в 2-3 года. React дает действительно неплохое видение, как нужно делать интерфейсы и веб в целом (с учетом всей той экосистемы, которая образовалась вокруг него). И то, что он предлагает, в достаточной степени гибко, производительно и совместимо с браузерами. Да есть интересные вещи типа <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.polymer-project.org/" rel="noopener noreferrer" target="_blank">Polymer Project</a>, да и много чего ещё, что может давать какие-то плюсы, например, в производительность, но это требует каких-то дополнительных усилий, чтобы понять, как это правильно готовить. Такой же крутой экосистемы, как у React, именно с точки зрения порога вхождения, гибкости, производительности на горизонте «обозримого будущего» пока не видно, по-моему.</p>
<p><strong>О библиотеке или фреймворке, который обойдёт React в будущем</strong></p>
<p>Честно говоря, для меня это не является провокационным вопросом :-) Сами создатели React считают его библиотекой, и я склонен с ними согласиться. Да, React с легкостью можно назвать MV-фреймворком, который берет на себя довольно большую часть ответственности за архитектуру вашего приложения. Но степень этого охвата в то же время не такая всеобъемлющая, как у Angular, Vue, Ext — они в своей официальной документации дают вам полное видение того, как должна выглядеть ваша архитектура, и вполне обоснованно называют себя фреймворками. С другой стороны, вокруг React образовалась существенная экосистема, которая в большинстве случаев говорит вам, как нужно делать React-приложение. И вот если взять React + экосистема, то можно увидеть уже кучку фреймворков. Вы сами можете сделать еще один фреймворк на React, если вам это нужно.</p>
<p><strong>О новых возможностях</strong></p>
<p>Мне нравится их <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://reactjs.org/docs/concurrent-mode-suspense.html" rel="noopener noreferrer" target="_blank">идея</a> сделать в React 17 механизм, позволяющий из коробки рендерить некие заглушки в момент асинхронной загрузки данных.</p>
<p><strong>О Redux и других инструментах управления состоянием</strong></p>
<p>По-моему, этих конкурентов уже и так полно, вы не находите? Да, все они — некая вариация на тему Flux(читай MVC)-подобных архитектур c однонаправленным потоком данных, но их действительно много. Redux, MobX, Cerebral, xstate, и я думаю, это даже не половина всего, что есть в современной экосистеме. Да, Redux наиболее популярен, наверное, но совсем не значит, что он общепринят и безальтернативен на данный момент. Если же имеется в виду что-то принципиально новое, то я даже не знаю, скорее всего ничего лучше вариаций на тему MVC всё-равно не придумаешь, особенно если в качестве View у тебя «реакт головного мозга».</p>
<p><strong>О целесообразности изучения</strong></p>
<p>Однозначно стоит. Но нужно понимать, что самое важное — не знать все тонкости React, а понимать принципы, на которых он построен, что лежит в основе его архитектуры. Также не стоит забывать про базовые знания касательно JS и веба в целом. То есть если вы научились в хуки на React, но не понимаете, зачем в JS нужны прототипы, что такое замыкание, не представляете same origin policy и для чего оно нужно — это повод задуматься и изучить вопрос.</p>
<p><strong>Об эксперте</strong></p>
<p>Максим Лебедев, тимлид команды интеграций в <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://miro.com/" rel="noopener noreferrer" target="_blank">Miro</a>.</p>
<h3 id="heading-3-24">Алексей Резвов: знание React делает любое резюме весомее</h3>
<p><img style="--image-object-fit:contain;width:auto" class="m_9e117634 mantine-Image-root" src="https://imgur.com/twPksMG.jpg" alt="Алексей Резвов" loading="lazy"/></p>
<hr/>
<p><strong>О популярности</strong></p>
<p>Мои личные наблюдения подтверждают тренд на снижение доли React на рынке. В первую очередь за счет увеличения доли Vue, к тому же растут и другие фреймворки вроде Aurelia, Svelte. Существенного изменения ждать не стоит, скорее всего React продолжит, постепенно замедляясь, терять долю рынка.</p>
<p><strong>О библиотеке или фреймворке, который обойдёт React в будущем</strong></p>
<p>Это вполне возможно, однако рынок разработки фронтенд-приложений ещё довольно непредсказуем, я бы не стал загадывать.</p>
<p><strong>О Redux и других инструментах управления состоянием</strong></p>
<p>Redux ещё долго будет существовать на рынке просто в силу размера уже разработанной базы кода и количества освоивших его разработчиков. Далеко не все любят учиться, поэтому используют однажды освоенные технологии от проекта к проекту.</p>
<p><strong>О целесообразности изучения</strong></p>
<p>Ради востребованности на рынке труда, безусловно, эту библиотеку учить стоит. Шансы на то, что в интересующей вас компании будут применять React, очень высоки. По моему мнению, React чаще выбирают в компаниях, где он уже используется в качестве основного инструмента в одном или нескольких проектах.</p>
<p>В новых проектах несколько чаще выбирают Vue. Но это лишь мои наблюдения, не подтвержденные какой-то статистикой. Но даже если не работать с React, понимание принципов работы явно пригодится в проектах, а освоить другой фреймворк, зная React, будет уже значительно проще.</p>
<p>Сложно вообще представить специалиста, который освоил какие-то альтернативные фреймворки, при этом не применив ни разу что-нибудь из большой тройки — React, Vue, Angular. Определенно можно сказать, что знание React делает любое резюме весомее, даже если работать с React не предполагается вовсе.</p>
<p>Ещё хочу акцентировать внимание на усилении тенденции использования TypeScript. Она есть как на фронтенде, так и на бэкенде, чему лично я рад. Таким образом, стоит уделить внимание изучению фреймворков именно в связке с TypeScript.</p>
<p><strong>Об эксперте</strong></p>
<p><a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://www.linkedin.com/in/arezvov/" rel="noopener noreferrer" target="_blank">Алексей Резвов</a>, организатор <a style="text-decoration:underline" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="https://rezvov.com/ru/" rel="noopener noreferrer" target="_blank">разработки программного обеспечения</a>.</p></div><div class=""><div style="--group-gap:var(--mantine-spacing-md);--group-align:center;--group-justify:space-between;--group-wrap:wrap;margin-bottom:var(--mantine-spacing-lg)" class="m_4081bf90 mantine-Group-root"><div class="m_4451eb3a mantine-Center-root" data-inline="true"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:var(--mantine-spacing-xs);color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-user "><path d="M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path><path d="M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path></svg></div><p style="margin-inline-end:var(--mantine-spacing-xl)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Анастасия Уминская</p><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">6 лет назад</p></div><div style="align-items:center" class="m_8bffd616 mantine-Flex-root __m__-_R_5dirddmiub_"><a style="display:inline-flex" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/biblioteka-react-review-article/votes"><div style="--ti-size:var(--ti-size-sm);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-inline-end:var(--mantine-spacing-xs);color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="sm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-thumb-up "><path d="M7 11v8a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-7a1 1 0 0 1 1 -1h3a4 4 0 0 0 4 -4v-1a2 2 0 0 1 4 0v5h3a2 2 0 0 1 2 2l-1 5a2 3 0 0 1 -2 2h-7a3 3 0 0 1 -3 -3"></path></svg></div></a><p class="mantine-focus-auto m_b6d8b162 mantine-Text-root">13</p></div></div></div><div style="background-color:var(--mantine-color-indigo-light);border:calc(0.0625rem * var(--mantine-scale)) solid transparent;padding:var(--mantine-spacing-xl)" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><p style="margin-bottom:var(--mantine-spacing-sm);font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Читайте также:</p><ul style="margin-inline-start:var(--mantine-spacing-lg)" class="m_abbac491 mantine-List-root"><li style="margin-bottom:var(--mantine-spacing-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><a style="color:inherit" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/stoit-li-uchit-javascript-perspektivy-situatsiya-na-rynke-truda-mneniya-ekspertov">Язык программирования JavaScript: где его используют и почему он популярен</a></span></div></li><li style="margin-bottom:var(--mantine-spacing-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><a style="color:inherit" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/zachem-izuchat-node-js-ili-o-perspektivah-bekenda-na-javascript">Все про Node.js: зачем писать бэкенд на JavaScript и сколько за это платят</a></span></div></li><li style="margin-bottom:var(--mantine-spacing-sm)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><a style="color:inherit" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/blog/posts/yazyk-programmirovaniya-java-osobennosti-populyarnost-situatsiya-na-rynke-truda">Язык программирования Java: что нужно знать новичку</a></span></div></li></ul></div><div style="margin-block:var(--mantine-spacing-xl)" class="m_3eebeb36 mantine-Divider-root" data-orientation="horizontal" role="separator"></div></div><div></div></div><style data-mantine-styles="inline">.__m__-_R_lmiub_{--col-flex-grow:auto;--col-flex-basis:100%;--col-max-width:100%;}@media(min-width: 48em){.__m__-_R_lmiub_{--col-flex-grow:auto;--col-flex-basis:16.666666666666668%;--col-max-width:16.666666666666668%;}}@media(min-width: 62em){.__m__-_R_lmiub_{--col-flex-grow:auto;--col-flex-basis:33.333333333333336%;--col-max-width:33.333333333333336%;}}</style><div class="m_96bdd299 mantine-Grid-col __m__-_R_lmiub_ mantine-visible-from-md"><div style="background-color:var(--mantine-color-indigo-light);border:calc(0.0625rem * var(--mantine-scale)) solid transparent;margin-bottom:var(--mantine-spacing-xl);padding:var(--mantine-spacing-xl);width:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><div style="margin-bottom:var(--mantine-spacing-md)" class="m_4451eb3a mantine-Center-root" data-inline="true"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Категории</p></div><ul class="m_abbac491 mantine-List-root"><li style="margin-bottom:var(--mantine-spacing-xs)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><button style="color:inherit;text-decoration:underline" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Мотивация">Мотивация</button></span></div></li><li style="margin-bottom:var(--mantine-spacing-xs)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><button style="color:inherit;text-decoration:underline" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Истории успеха">Истории успеха</button></span></div></li><li style="margin-bottom:var(--mantine-spacing-xs)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><button style="color:inherit;text-decoration:underline" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Дневник студента">Дневник студента</button></span></div></li><li style="margin-bottom:var(--mantine-spacing-xs)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><button style="color:inherit;text-decoration:underline" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Код">Код</button></span></div></li><li style="margin-bottom:var(--mantine-spacing-xs)" class="m_abb6bec2 mantine-List-item" data-with-icon="true"><div class="m_75cd9f71 mantine-List-itemWrapper"><span class="m_60f83e5b mantine-List-itemIcon"><div class="m_4451eb3a mantine-Center-root"><div style="--ti-size:var(--ti-size-xs);--ti-bg:transparent;--ti-color:var(--mantine-color-indigo-light-color);--ti-bd:calc(0.0625rem * var(--mantine-scale)) solid transparent;color:inherit" class="m_7341320d mantine-ThemeIcon-root" data-variant="transparent" data-size="xs"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-chevron-compact-right "><path d="M11 4l3 8l-3 8"></path></svg></div></div></span><span class="mantine-List-itemLabel"><button style="color:inherit;text-decoration:underline" class="mantine-focus-auto m_87cf2631 mantine-UnstyledButton-root" type="button" aria-label="Карьера">Карьера</button></span></div></li></ul></div><div style="justify-content:end;margin-top:0rem;position:sticky;top:calc(5rem * var(--mantine-scale))" class="m_8bffd616 mantine-Flex-root __m__-_R_5dlmiub_"><div tabindex="0" style="cursor:pointer"><a style="text-decoration:none" class="mantine-focus-auto m_849cf0da m_b6d8b162 mantine-Text-root mantine-Anchor-root" data-underline="hover" href="/courses_web_development?promo_name=program_category&amp;promo_position=blog_post&amp;promo_creative=card&amp;promo_type=card"><div style="background-color:var(--mantine-color-default);border:calc(0.0625rem * var(--mantine-scale)) solid var(--mantine-color-default-border);padding-inline:var(--mantine-spacing-xl);padding-top:var(--mantine-spacing-xl);padding-bottom:var(--mantine-spacing-xs);width:100%" class="m_e615b15f mantine-Card-root m_1b7284a3 mantine-Paper-root"><div class="m_4451eb3a mantine-Center-root" data-inline="true"><p style="font-size:var(--mantine-font-size-h4)" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Курсы по веб-разработке</p></div><img class="m_9e117634 mantine-Image-root" src="/vite/assets/development-BVihs_d5.png"/><p style="margin-bottom:var(--mantine-spacing-xs);text-align:right" class="mantine-focus-auto m_b6d8b162 mantine-Text-root">Посмотреть →</p></div></a></div></div></div></div></div></div></div>
</main>
<footer class="bg-dark fw-light text-light px-3 py-5">
<div class="row small">
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 mb-3">Хекслет</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/about">О нас</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/testimonials">Отзывы</a>
</li>
<li>
<span class="nav-link link-light py-1 ps-0 external-link" data-href="https://b2b.hexlet.io" role="button">Корпоративное обучение</span>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/blog">Блог</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/qna">Вопросы и ответы</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/glossary">Глоссарий</a>
</li>
<li>
<span class="nav-link link-light py-1 ps-0 external-link" data-href="https://help.hexlet.io" data-target="_blank" role="button">Справка</span>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" target="_blank" rel="noopener noreferrer" href="/map">Карта сайта</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5 fw-normal mb-3">Направления</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_devops">DevOps
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_data_analytics">Аналитика
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_backend_development">Бэкенд
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_programming">Программирование
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_testing">Тестирование
</a></li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/courses_front_end_dev">Фронтенд
</a></li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5">Профессии</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/devops-engineer-from-scratch">DevOps-инженер с нуля</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/go">Go-разработчик</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/java">Java-разработчик</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/python">Python-разработчик </a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/data-analytics">Аналитик данных</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/qa-engineer">Инженер по ручному тестированию</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/php">РНР-разработчик</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/frontend">Фронтенд-разработчик</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-6 col-md-3">
<div class="h5">Навыки</div>
<ul class="list-unstyled">
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/python-django-developer">Django</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/docker">Docker</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/php-laravel-developer">Laravel</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/postman">Postman</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/js-react-developer">React</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/js-rest-api">REST API в Node.js</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/spring-boot">Spring Boot</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/programs/typescript">Typescript</a>
</li>
</ul>
</div>
</div>
<hr>
<div class="row">
<div class="col-12 col-sm-4 col-md-2">
<div class="fs-4">
<ul class="list-unstyled d-flex">
<li class="me-3">
<a aria-label="Telegram" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://t.me/hexlet_ru"><span class="bi bi-telegram"></span>
</a></li>
<li>
<a aria-label="Youtube" target="_blank" class="link-light" rel="noopener noreferrer nofollow" href="https://www.youtube.com/user/HexletUniversity"><span class="bi bi-youtube"></span>
</a></li>
</ul>
</div>
<div class="mb-2 d-flex flex-column">
<a class="link-light text-decoration-none" rel="nofollow" href="mailto:support@hexlet.io">support@hexlet.io</a>
<a class="link-light text-decoration-none py-2" target="_blank" href="https://t.me/hexlet_help_bot">t.me/hexlet_help_bot</a>
</div>
<ul class="list-unstyled d-flex">
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://hexlet.io/locale/switch?new_locale=en" data-target="_self" role="button"><span class="my-auto">EN</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 opacity-100 external-link" rel="nofollow" data-href="https://ru.hexlet.io/locale/switch?new_locale=ru" data-target="_self" role="button"><span class="my-auto">RU</span>
</span></li>
<li class="me-3">
<span class="link-light text-decoration-none opacity-50 x-font-size-18 external-link" rel="nofollow" data-href="https://kz.hexlet.io/locale/switch?new_locale=kz" data-target="_self" role="button"><span class="my-auto">KZ</span>
</span></li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<ul class="list-unstyled fs-4">
<li class="mb-3">
<a class="link-light text-decoration-none" href="tel:8%20800%20100%2022%2047">8 800 100 22 47</a>
<span class="d-block opacity-50 small">бесплатно по РФ</span>
</li>
<li>
<a class="link-light text-decoration-none" href="tel:%2B7%20495%20085%2021%2062">+7 495 085 21 62</a>
<span class="d-block opacity-50 small">бесплатно по Москве</span>
</li>
</ul>
</div>
<div class="col-12 col-sm-4 col-md-3">
<div class="small mb-3">Образовательные услуги оказываются на основании Л035-01298-77/01989008 от 14.03.2025</div>
<ul class="list-unstyled small">
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/legal">Правовая информация</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/offer">Оферта</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/license">Лицензия</a>
</li>
<li>
<a class="nav-link link-light py-1 ps-0" href="/pages/contacts">Контакты</a>
</li>
</ul>
</div>
<div class="col-12 col-sm-12 col-md-4 small">
<div class="mb-2">
<div>ООО «<a href="/" class="text-decoration-none link-light">Хекслет Рус</a>»</div>
<div>108813 г. Москва, вн.тер.г. поселение Московский,</div>
<div>г. Московский, ул. Солнечная, д. 3А, стр. 1, помещ. 20Б/3</div>
<div>ОГРН 1217300010476</div>
<div>ИНН 7325174845</div>
</div>
<hr>
<div>АНО ДПО «<a href="/" class="text-decoration-none link-light">Учебный центр «Хекслет</a>»</div>
<div>119331 г. Москва, вн. тер. г. муниципальный округ</div>
<div>Ломоносовский, пр-кт Вернадского, д. 29</div>
<div>ОГРН 1247700712390</div>
<div>ИНН 7736364948</div>
</div>
</div>
</footer>


<div id="root-assistant-offcanvas"></div>
<script src="/vite/assets/assistant-Bukl1lYy.js" crossorigin="anonymous" type="module"></script><link rel="modulepreload" href="/vite/assets/chunk-DsPFFUou.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/init-BrRXra1y.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/ErrorFallbackBlock-naDSYSy9.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/MarkdownBlock-DbyKWoR_.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/gon-D3e4yh1x.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/mantine-CGMYrt2Y.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/shiki-V011pkdv.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/utils-DRqSHbQE.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/routes-CCH8ilKF.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-XR8Qr8kR.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dist-GCHh59xr.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/Box-B5-OOzBf.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/notifications.store-C-3AFSMn.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useIsomorphicEffect-HJ6VK0D3.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/lib-KSp6QbZ0.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/axios-BEvgo0ym.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/classnames-l6ipYlLR.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/dayjs.min-BkKovM-s.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/debounce-jMQ_Cf4f.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/i18next-BlSq9s7B.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/client-U9M77rxp.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-dom-DaLxUz_h.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/useTranslation-Bx1Cdrkz.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/compiler-runtime-6XxiPFnt.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/jsx-runtime-CwjcCKJi.js" as="script" crossorigin="anonymous">
<link rel="modulepreload" href="/vite/assets/react-CkL4ZRHB.js" as="script" crossorigin="anonymous">



<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v67327c56f0bb4ef8b305cae61679db8f1769101564043" integrity="sha512-rdcWY47ByXd76cbCFzznIcEaCN71jqkWBBqlwhF1SY7KubdLKZiEGeP7AyieKZlGP9hbY/MhGrwXzJC/HulNyg==" data-cf-beacon='{"version":"2024.11.0","token":"d11015b65d11429ea6b4a2ef37dd7e0b","server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>