React и Next.js простыми словами: компоненты, пропсы, состояние

Что такое React простыми словами

Строишь дом из LEGO. Ты ведь не лепишь его одним монолитным куском пластика. Кубик-окно, кубик-дверь, кубик-стена - собрал из деталей. Сделал один раз хороший кубик-окно - и втыкаешь куда захочешь, хоть двадцать штук подряд.

Вот React React - библиотека для сборки интерфейсов из переиспользуемых блоков. Самый популярный способ делать современные сайты и приложения. ровно про это. Конструктор для сайтов. Кнопка, карточка товара, шапка, форма - каждый кусок интерфейса - это компонент Компонент - самостоятельный блок интерфейса со своей разметкой и логикой. Кнопка, карточка, меню - всё это компоненты, которые можно вставлять куда угодно. . Страница собирается из компонентов, как дом из кубиков. Скучно? Зато работает.

А Next.js Next.js - надстройка над React: добавляет страницы, адреса (роутинг), работу на сервере и кучу готовых удобств. Самый ходовой способ собрать настоящий сайт на React. - коробка LEGO «всё включено». Те же кубики React, но плюс готовые рельсы для страниц, адресов и сервера. На голом React ты собираешь домик. На Next.js - сразу город с дорогами и светофорами.

Зачем вайбкодеру разбираться в React

Ты вайбкодер. Код руками писать не обязан. Но почти любой сайт, который тебе сгенерит агент, окажется на React или Next.js - выбора особо нет. И если ты понимаешь, как это устроено, ты:

• даёшь агенту команды на его языке, и он не «плывёт»;
• понимаешь, почему правка одной кнопки вдруг сломала три других;
• ловишь момент, когда агент клепает простыню вместо аккуратных кубиков, и отправляешь переделывать;
• перестаёшь вздрагивать от слов «компонент», «пропс», «состояние» - а звучать они будут часто, привыкай.

Разница между «агент собрал сайт, который невозможно поменять» и «собрал сайт, который правится за минуту» - это понимание трёх вещей: компоненты, пропсы, состояние. С них и начнём.

Три кита React: компоненты, пропсы, состояние

Компоненты - это кубики LEGO

Каждый кусок интерфейса - отдельный кубик. Кнопка Купить, карточка товара, меню сверху. Правило, выстраданное практикой: компонент должен быть маленьким и про одно дело. Карточка показывает товар. Кнопка нажимается. Точка. Не лепи «мега-кубик», который умеет сразу всё на свете - такой потом сам же и проклянёшь.

Пропсы - данные, которые компонент получает снаружи

Кубик-карточка сам по себе пустой. Чтобы он показал конкретный товар, ты передаёшь в него данные снаружи - название, цену, картинку. Вот эти переданные данные и есть пропсы Пропсы (props, от properties) - данные, которые компонент получает снаружи, от родителя. Это «настройки» кубика: какой текст показать, какую картинку, что делать по клику. .

Один кубик-карточка плюс разные пропсы равно двадцать разных карточек товаров. Один компонент, переиспользуемый везде. В этом вся сила. Написал кубик один раз - а потом используешь сто раз с разной начинкой, и каждый раз он как новенький.

Состояние (state) - память самого компонента

Пропсы приходят снаружи. А состояние Состояние (state) - внутренняя память компонента, которая может меняться: открыто меню или нет, что введено в поле, сколько товаров в корзине. Поменялось состояние - React сам перерисовывает что нужно. - это то, что кубик помнит сам про себя и что меняется прямо во время работы. Открыто меню или закрыто. Что ты набрал в поле поиска. Сколько штук в корзине.

Магия React в одной фразе: поменялось состояние - экран сам обновляется. Руками лезть и переписывать страницу не надо. Закинул товар в корзину - циферка наверху обновилась сама. Удобно.

Сервер против браузера в Next.js: где живёт код

Вот тут новички путаются чаще всего. В Next.js код бывает двух сортов, и смешивать их нельзя.

• Серверные компоненты работают на сервере. Они умеют лезть в базу данных, читать секретные ключи, готовить страницу заранее. А вот реагировать на клики и хранить состояние не умеют. Это «кухня»: там готовят блюдо, гостей туда не пускают.
• Клиентские компоненты работают в браузере у пользователя. Клики, ввод, анимации, состояние - всё их. Это «зал»: там подают и общаются с гостем. Их помечают специальной строчкой use client в начале файла.

Хорошая и плохая сборка компонентов: как отличить

Агент собрал тебе сайт. Вот как на глаз отличить аккуратную сборку от той, к которой потом не подойдёшь.

Пример из жизни: каталог товаров с поиском

Просишь агента: «сделай страницу с каталогом товаров и поиском». Он бодро выдаёт один файл на 900 строк, где всё свалено в кучу. Дальше просишь «поменяй карточку товара» - а он заодно ломает поиск, потому что всё переплетено в один клубок. А потом список при каждом нажатии клавиши мигает и дёргается, как будто у него нервный тик. Знакомо?

Что пошло не так:

1. Не было кубиков - одна простыня, в которой всё цепляется за всё.
2. Поисковый запрос летел в базу на каждую букву - отсюда и дёрганье.
3. Данные грузились криво, поэтому список прыгал при каждом обновлении.

А теперь то же самое, но по-человечески, чтобы вышло аккуратно:

Сделай страницу каталога товаров с поиском на React и Next.js. Требования:

Разбей на маленькие компоненты: карточка товара, сетка карточек, поле поиска. Каждый компонент - про одно дело.
Карточка товара получает все данные через пропсы и сама в базу никуда не лезет.
В состоянии храни только то, что меняется: текст в поиске. Отфильтрованный список считай на месте, отдельно не храни.
Поиск делай с задержкой примерно в полсекунды после остановки набора, а не на каждую букву, чтобы список не дёргался.
У каждой карточки в списке поставь стабильный ключ по id товара, а не по номеру.
Сначала покажи структуру компонентов списком и жди моего ок, потом пиши код.

Почему сайт глючит и мигает: быстрая диагностика

Прежде чем злиться на агента, пробегись по чек-листу.

1. Всё мигает и дёргается? Скорее всего, данные грузятся на каждый чих или поиск летит в базу на каждую букву. Попроси задержку и нормальную загрузку.
2. Правка одного сломала другое? Значит, всё свалено в один кубик. Попроси разнести на компоненты поменьше.
3. Цифры разошлись (в корзине одно, в сумме другое)? В состоянии дублируется то, что надо считать на месте. Попроси «выводить, а не хранить».
4. Кнопка не нажимается, форма мёртвая в Next.js? Похоже, это серверный компонент, а нужен клиентский (use client).
5. Тормозит длинный список? Если элементов сотни - попроси виртуализацию: рисуем только то, что видно на экране, остальное ждёт за кадром.

Делаем красиво: доступность и понятные теги

Глава называется «Делаем красиво», так что держи короткое правило интерфейса: проси агента использовать обычные понятные HTML-теги: кнопка - это button, ссылка - a, меню - nav. Это не занудство ради занудства. Такие сайты работают с клавиатуры, их понимают читалки для незрячих и поисковики заодно. У каждого поля ввода должна быть подпись. Красивый сайт - это не только приятные цвета. Это ещё и то, что им могут пользоваться все, а не только мышка на большом мониторе.

Частые ошибки новичка в React

• Просить «сделай всё в одном файле». Получишь простыню, которую невозможно менять. Проси кубики.
• Думать, что копипаст равно переиспользование. Пять копий блока - это пять мест, где придётся чинить один и тот же баг. Один компонент с пропсами - одно место.
• Дублировать данные в состоянии. Суммы, итоги, отфильтрованные списки - считай на месте, не храни отдельно.
• Путать сервер и браузер в Next.js. Клики и ввод - клиентский кубик. Секреты и база - серверный.
• Гнать поиск на каждую букву. Сайт дёргается и тормозит. Проси задержку.
• Забывать про стабильные ключи в списках. Иначе при изменениях список запутается, что куда переставлять, и устроит чехарду.