Что такое React

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

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

Зачем нужен JSX

В React разметка пишется прямо в JavaScript — в виде JSX. Выглядит как HTML, но внутри работают выражения: <h1>Привет, {name}</h1>. Это позволяет держать разметку и логику рядом, а не раскидывать по десятку файлов и обработчиков.

Браузер JSX не понимает: его компилирует сборщик (обычно Vite) в обычные вызовы функций. На выходе — тот же JavaScript, который понимает любой браузер.

Состояние вместо ручного DOM

В классическом JavaScript вы берёте элемент и меняете его: element.textContent = .... В React вы меняете данные, а разметка обновляется сама. Это снимает целый класс ошибок: забытые обновления, рассинхронизация, конфликты между обработчиками.

Состояние хранится в useState, а вычисления и подписки — в useEffect. Об этих хуках — отдельная статья, здесь важно понять принцип: сначала данные, потом вид.

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

• HTML и CSS — без них не собрать даже кнопку. Семантика, флексбоксы, адаптив.
• JavaScript — функции, массивы, объекты, map, деструктуризация, промисы.
• Node.js и npm — понадобятся для сборки и установки пакетов.
• Терминал — минимум команд: npm create, npm run dev.

Когда React оправдан, а когда нет

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

Отдельно про SEO: React-приложение рендерится в браузере, поэтому для публичных страниц нужен серверный рендеринг (Next.js) или пререндер. Для внутренних интерфейсов это не важно.

С чего начать

Порядок, который работает: поставить Node.js, создать проект через Vite, разобраться с компонентами и пропсами, затем с хуками, и только потом браться за роутинг и запросы к API.

Статьи раздела появятся здесь же: установка React с Vite, компоненты и props, хуки useState и useEffect, сравнение с Vue. Пока материал готовится, посмотрите раздел про Django — если нужен и фронтенд, и бэкенд, это логичная пара.

Нужен сайт на React, а не статья?

Соберу интерфейс под ключ: компоненты, состояние, запросы к API, роутинг, сборка Vite и деплой. С 2009 года, по договору, с поддержкой после запуска.

ОБСУДИТЬ ПРОЕКТ

Полезно по теме: про Django, примеры HTML, примеры CSS.