Что такое React?
React — библиотека JavaScript для построения пользовательских интерфейсов. Интерфейс собирается из компонентов — самостоятельных блоков со своей разметкой и логикой, — а React сам обновляет на экране только то, что действительно изменилось.
Ключевая идея — декларативность. Разработчик описывает, как интерфейс должен выглядеть при определённом состоянии данных, а не пишет пошаговые инструкции по изменению страницы. Изменилось состояние — React пересчитал разницу и обновил нужные узлы.
Компонентный подход хорошо масштабируется: одну карточку товара пишут один раз и переиспользуют по всему проекту. React — самая востребованная технология во фронтенд-вакансиях, вокруг неё сложилась большая экосистема: Next.js, роутинг, менеджеры состояния, библиотеки компонентов.
Где применяется
На React пишут интерфейсы, где много состояния и частых обновлений: личные кабинеты, панели администратора, дашборды, интернет-магазины, чаты. Вокруг него выстроен стандартный набор — Next.js для серверного рендеринга и SEO, роутер для навигации, библиотеки запросов к API и готовые наборы компонентов.
Это же знание переносится за пределы веба: React Native использует те же принципы для мобильных приложений под iOS и Android. В вакансиях React упоминается чаще любой другой фронтенд-технологии, поэтому его обычно и берут первым фреймворком после уверенного JavaScript.
Пример
Счётчик товаров в корзине показан сразу в трёх местах: в шапке, в боковой панели и на кнопке оформления. В React это одно значение состояния — при его изменении библиотека сама перерисовывает все три места, и рассинхронизация становится невозможной.
function CartButton({ initial = 0 }) {
const [count, setCount] = useState(initial);
return (
<button onClick={() => setCount(count + 1)}>
В корзине: {count}
</button>
);
}Частые вопросы
React — это библиотека или фреймворк?
Формально библиотека: он отвечает только за отрисовку интерфейса, а маршрутизацию, запросы и работу с формами добавляют отдельными пакетами. На практике связку React с экосистемой вокруг него часто называют фреймворком, а Next.js уже полноценный фреймворк поверх React.
Что учить: React, Vue или Angular?
По числу вакансий в Украине и мире с большим отрывом лидирует React, поэтому для первой работы он самый практичный выбор. Angular чаще встречается в энтерпрайзе, Vue — в небольших командах. После первого фреймворка второй осваивается за недели.
Нужно ли хорошо знать JavaScript перед React?
Да, это ключевое условие. Массивы и методы работы с ними, деструктуризация, стрелочные функции, промисы и асинхронность, модули — всё это используется в каждом компоненте. Без такой базы React учится как набор магических правил, которые ломаются при первой нестандартной задаче.
Что такое состояние и почему его нельзя менять напрямую?
Состояние — это данные, от которых зависит вид компонента. Меняют его только через функцию-сеттер: именно она сообщает React, что нужно пересчитать интерфейс. Присваивание значения напрямую ничего не перерисует, и экран останется со старыми данными.