Что такое React — и почему ты больше не трогаешь страницу руками

Смотри, главный фокус React не в том, о чём пишут на каждом углу. Все говорят «компоненты, компоненты». Но настоящая идея вот какая: ты перестаёшь руками лазить по странице и что-то на ней менять. Ты просто меняешь данные — а React сам разбирается, что на экране перерисовать. Звучит мелко, но это переворачивает весь способ собирать интерфейсы. Давай покажу, от какой боли это спасает.

Что это такое в одной фразе

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

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

Боль, которую React лечит

Представь страницу без React. У тебя есть счётчик лайков. Чтобы добавить лайк, ты пишешь примерно так: «найди на странице элемент с числом, прочитай его, прибавь единицу, запиши обратно, не забудь подсветить кнопку». Каждое изменение — это ручная команда: найди → поменяй. Эти команды лезут в DOM — живое дерево страницы, которое строит браузер.

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

React говорит: не трогай страницу сам. Опиши один раз, как выглядит счётчик при числе N. Дальше просто меняй N — React сам найдёт, что перерисовать.

Компонент = функция, которая возвращает кусок интерфейса

Вот тут и появляются компоненты. Компонент — это функция, которая принимает данные и возвращает кусок интерфейса. Кнопка, карточка, целая страница — всё компоненты. Их складывают друг в друга, как кубики: страница состоит из карточек, карточка — из кнопок и текста.

Прелесть в том, что компонент пишешь один раз, а используешь сто. Сделал карточку товара — и весь каталог собирается из неё, просто с разными данными. Никакого копипаста.

Состояние меняешь — экран сам перерисовывается

«Данные, от которых зависит вид» в React называются состоянием (state). Это и есть наш счётчик N. Фокус такой: ты меняешь состояние одной строчкой — а React сравнивает, что было и что стало, и меняет на экране только то, что реально отличается.

Чтобы не дёргать настоящую страницу по сто раз (это медленно), React держит у себя её лёгкую копию — «виртуальный DOM» — сравнивает версии там и трогает реальную страницу минимально. Тебе про это думать не надо: ты меняешь данные, остальное — забота React. Вот эта развязка «данные → вид» и есть всё, ради чего React придумали.

Когда тебе React, а когда нет

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

React — это язык программирования?

Нет. React — это библиотека на JavaScript. Сам по себе он ничего не делает: ты пишешь на JavaScript (часто с добавкой JSX — это HTML прямо внутри кода), а React помогает превратить это в живой интерфейс.

Чем React отличается от Next.js?

Next.js — это надстройка над React: он добавляет роутинг (несколько страниц), серверный рендер и кучу удобств для настоящего сайта. React — это «движок интерфейса», Next.js — «готовая машина» вокруг него. Новичку проще начать с Next.js, не собирая всё руками.

Обязательно учить React, чтобы вайб-кодить?

Учить наизусть — нет. Но React (или Next.js на нём) почти наверняка окажется под капотом приложения, которое ты соберёшь с ИИ. Понимаешь идею «данные → вид» — и перестаёшь бояться кода, который тебе сгенерили.