Урок 01

Что такое React

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

Зачем нужен React

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

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

Декларативный vs императивный

Императивный подход (чистый JS):

const button = document.querySelector('#counter');
const label = document.querySelector('#label');
let count = 0;

button.addEventListener('click', () => {
    count++;
    label.textContent = count;
});

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

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>+1</button>
        </div>
    );
}

Ты не говоришь, как обновить DOM. Ты говоришь, что должно быть на экране при count. React делает остальное.

Компоненты

Компонент — это функция, которая возвращает разметку. Компоненты — строительные блоки приложения. Из них собираются страницы, формы, кнопки, списки.

function Welcome() {
    return <h1>Привет, мир</h1>;
}

JSX

JSX — расширение синтаксиса JavaScript, которое позволяет писать HTML прямо в JS. Внешне похоже на HTML, но это JavaScript.

const element = <h1 className="title">Hello</h1>;

JSX компилируется в вызовы функций. Этот код превращается в:

const element = React.createElement('h1', { className: 'title' }, 'Hello');

Виртуальный DOM

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

Односторонний поток данных

Данные в React текут в одном направлении: от родителя к ребёнку через пропсы. Ребёнок не может изменить пропсы родителя. Чтобы что-то поменялось — родитель передаёт новое значение или функцию обратного вызова.

Что нужно знать перед стартом

  • JavaScript — переменные, функции, массивы, объекты, стрелочные функции
  • ES6+ — деструктуризация, spread, шаблонные строки, модули
  • DOM — базовое понимание, как браузер отображает HTML

Экосистема

React сам по себе — это только библиотека для UI. Рядом стоят:

  • React Router — маршрутизация
  • Redux / Zustand / Jotai — управление состоянием
  • Next.js — фреймворк для SSR и фулстека
  • Vite — сборщик
  • TanStack Query — работа с серверными данными

Итоги

  • React — библиотека для интерфейсов
  • UI описывается декларативно через компоненты
  • JSX — синтаксис для разметки внутри JS
  • Виртуальный DOM делает обновления быстрыми
  • Данные текут сверху вниз через пропсы