Что такое React?

React — это JavaScript-библиотека для построения пользовательских интерфейсов. Её главная задача — декларативно описывать, как UI выглядит для каждого состояния приложения, и эффективно обновлять DOM при изменении этих состояний. В отличие от фреймворков вроде Angular, React отвечает только за слой представления (view), а маршрутизацию, управление состоянием или работу с HTTP обычно берут на себя дополнительные библиотеки.

Ключевая идея React — компонентный подход. Каждый компонент — это функция или класс, который возвращает React-элемент (дерево из тегов). Например, простой компонент-кнопку можно написать так:

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

Компоненты принимают props (входные данные, только для чтения) и управляют state (внутренним состоянием). Когда state меняется через useState или this.setState, React перерисовывает только те части UI, которые действительно изменились — за счёт сравнения виртуального DOM с предыдущим снимком.

• JSX — синтаксическое расширение JavaScript, похожее на HTML. Компилируется в вызовы React.createElement(). Позволяет писать разметку прямо в JS-файлах рядом с логикой.
• Virtual DOM — легковесная копия реального DOM. React рассчитывает минимальный набор операций (патчей) для синхронизации, что быстрее прямой работы с браузерным DOM.
• Односторонний поток данных — state передаётся от родительского компонента к дочерним через props. Это делает приложение предсказуемым и упрощает отладку.
• Хуки (с версии 16.8) — useState, useEffect, useContext и другие. Позволяют использовать state и побочные эффекты в функциональных компонентах, отказываясь от классовых.
• Условный рендеринг — через тернарники, && или if внутри JSX. Например: {isLogged ? <Profile /> : <Login />}.

На практике React используют как основу для SPA (одностраничных приложений). Его экосистема включает роутер (react-router-dom), HTTP-клиенты (axios), глобальное состояние (Redux или Zustand) и фреймворки на базе React (Next.js для SSR).

Ограничение: React не навязывает архитектуру, поэтому в больших проектах без чётких правил код быстро превращается в «спагетти». Junior-разработчику важно понимать, что компонент — это не просто функция, возвращающая HTML, а модуль с единственной ответственностью: он должен либо рендерить данные, либо обрабатывать пользовательские события, но не смешивать всё сразу.