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. Кліки і введення - клієнтський кубик. Секрети і база - серверний.
• Гнати пошук на кожну літеру. Сайт смикається і гальмує. Проси затримку.
• Забувати про стабільні ключі в списках. Інакше під час змін список заплутається, що куди переставляти, і влаштує плутанину.