Що таке React? Простий посібник для не-розробників

React — це бібліотека JavaScript для створення інтерфейсів користувача — тієї частини застосунку, яку бачать і на яку натискають люди. Ви будуєте екрани з багаторазових частин, які називаються компонентами, наприклад кнопки, картки товару або цілої сторінки, а React синхронізує екран з вашими даними: коли дані змінюються, React оновлює ті частини сторінки, що від них залежать. Його створили у Facebook (тепер Meta), він має відкритий код і є одним із найпоширеніших способів створювати веб-застосунки.

Чому це важливо, коли ви працюєте з ШІ

Якщо ви створюєте веб-застосунок за допомогою інструмента на основі ШІ, є добрі шанси, що він написаний на React. Багато конструкторів застосунків на основі ШІ використовують React за замовчуванням, бо він популярний, добре задокументований і існує величезна кількість коду React, з якого моделі ШІ могли навчатися.

Щоб створювати застосунки з ШІ, писати React не обов'язково. Але трохи знання допомагає:

• Точно описувати зміни. «Зроби в компоненті ProductCard ціну жирною» зрозуміліше, ніж «зроби ціни помітнішими десь».
• Розуміти помилки. Повідомлення на кшталт «Cannot read properties of undefined» або «Too many re-renders» стають зрозумілішими.
• Робити розумний вибір. Звичайні застосунки React рендеряться в браузері, а це впливає на видимість у пошуку і швидкість першого завантаження. Знання цього допомагає вирішити, коли варто попросити іншу конфігурацію.
• Пізніше працювати з розробниками. React — поширена навичка, тож розробник зазвичай легко візьметься за кодову базу React.

Аналогія з повсякденного життя

Уявіть LEGO. Замість того щоб вирізати цілу модель з одного блоку, ви будуєте її зі стандартних деталей. Кілька деталей утворюють колесо; чотири колеса і деякі інші частини — автомобіль. Якщо ви хочете, щоб усі автомобілі мали червоні колеса, ви змінюєте конструкцію колеса один раз.

Компоненти React — це і є деталі LEGO. Компонент Button використовується всередині ProductCard, який використовується всередині ProductGrid, який є частиною ShopPage. Змініть Button один раз — і кожна кнопка в застосунку зміниться.

Другий бік аналогії: уявіть, що модель LEGO перебудовується сама щоразу, коли ви змінюєте інструкцію. Це другий трюк React — ви описуєте, як має виглядати екран для поточних даних, а React сам з'ясовує, що змінити на сторінці.

Основні ідеї

Компоненти

Компонент — це функція JavaScript, яка повертає фрагмент інтерфейсу. Документація React описує компонент як частину UI, що має власну логіку і вигляд. Назви компонентів починаються з великої літери.

JSX

Компоненти зазвичай пишуть на JSX, який виглядає як HTML, змішаний із JavaScript:

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX необов'язковий, але в документації React зазначено, що більшість проєктів його використовує. Перед запуском у браузері він перетворюється на звичайний JavaScript.

Props

Props — це вхідні дані, які ви передаєте компоненту, як налаштування багаторазової деталі:

<ProductCard name="Lavender Candle" price={24} />

Один і той самий ProductCard може показувати будь-який товар.

State

State — це інформація, яку компонент пам'ятає і яка може змінюватися під час роботи застосунку: відкрите меню, текст у полі пошуку, кількість товарів у кошику. Коли state змінюється, React перерендерює компонент, щоб екран відповідав даним.

Хуки

Хуки — це функції, назви яких починаються з use, наприклад useState (запам'ятати значення) і useEffect (виконати код після рендерингу, наприклад, щоб отримати дані). Ви побачите їх усюди в коді React, згенерованому ШІ.

Приклад: лічильник кошика

Уявіть, що в вашому інтернет-магазині є кнопка «Додати в кошик» та іконка кошика з кількістю товарів. У React це виглядає приблизно так:

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

Що відбувається, коли покупець натискає «Додати в кошик»:

1. Обробник onClick кнопки викликає onAdd, який викликає setCartCount.
2. React оновлює state cartCount з 0 до 1.
3. React перерендерює Shop, передаючи count={1} у CartIcon.
4. На сторінці тепер написано «Cart (1)». Ніхто не писав код, що каже «знайди текст кошика і зміни його» — екран слідує за даними.

Варто також побачити обмеження. Цей лічильник живе в пам'яті браузера. Оновіть сторінку — і він знову 0. Щоб зберегти кошик, його треба записати в щось довготривале — cookie, сховище браузера або базу даних через ваш бекенд. React відповідає за екран; він не зберігає ваші дані.

Де React у веб-застосунку

Застосунок «Vite + React» рендериться в браузері (single-page app). Застосунок Next.js може спершу рендерити сторінки на сервері, що допомагає пошуковим системам і швидкості першого завантаження.

Поширені терміни пояснено

Типові помилки і хибні уявлення

• «React — це мова програмування». Це бібліотека, написана і використовувана з JavaScript (або TypeScript).
• «React зберігає мої дані». State живе у браузері і зникає після оновлення. Довготривалі дані потребують бекенду і бази даних.
• Секрети в коді React. Усе в застосунку React надсилається в браузер відвідувача. Ключі API там публічні. Тримайте їх на сервері.
• «Застосунки React не можна знайти в пошуку». Рендеринг лише в клієнті слабший для пошуку, але попереднє рендерення або серверний рендеринг вирішують більшість проблем.
• Гігантські компоненти. Один компонент на 1 000 рядків важко безпечно змінювати і людям, і ШІ. Просіть менші.
• Вважати веб-застосунок React телефонним застосунком. Він працює в браузері, зокрема на телефонах, але не є застосунком з App Store.

Що просити у вашого конструктора ШІ

• «Розбий цю сторінку на малі іменовані компоненти і скажи, в якому файлі кожен із них.»
• «Зроби компонент ProductCard багаторазовим, з name, price та image як props.»
• «Зберігай кошик у базі даних, щоб він не зникав після оновлення.»
• «Тримай усі ключі API на сервері; код React має викликати наш власний API.»
• «Додай стани завантаження і помилок для даних, що надходять із сервера.»
• «Якщо для цих сторінок важлива видимість у пошуку, попередньо їх рендеріть або використовуй серверний рендеринг.»
• «Простими словами поясни, що означає ця помилка і з якого компонента вона походить.»

Для ширшої картини див. фронтенд і бекенд, а для перевірки написаного ШІ коду — як перевіряти код, згенерований ШІ.

React у Mythex

Якщо ви не просите інше, Mythex починає нові проєкти на Vite + React + TypeScript + Tailwind з живим попереднім переглядом під час чату. Ви можете вказати інше налаштування у першому промпті — наприклад, «Використовуй Next.js» або «простий статичний HTML-лендинг» — і Mythex обере його з того, що ви написали; окремого екрана налаштувань для цього немає. Сторінка документації про як вибирається технологія пояснює варіанти. Редактор коду на безкоштовному тарифі доступний лише для читання; на Pro ви можете редагувати код React напряму і експортувати проєкт, щоб продовжити роботу деінде.

Запитання