Что такое 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 — это детали конструктора. Компонент Button используется внутри ProductCard, который используется внутри ProductGrid, который входит в ShopPage. Измените Button один раз, и каждая кнопка в приложении изменится.

Есть и вторая половина аналогии: представьте, что модель из LEGO перестраивается сама, когда вы меняете инструкцию. Это второй фокус React: вы описываете, как экран должен выглядеть для текущих данных, а React сам решает, что нужно поменять на странице.

Основные идеи

Компоненты

Компонент — это JavaScript-функция, которая возвращает часть интерфейса. Документация React описывает компонент как часть интерфейса, у которой есть собственная логика и внешний вид. Имена компонентов начинаются с заглавной буквы.

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» отрисовывается в браузере (это одностраничное приложение, SPA). Приложение на 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-код напрямую и экспортировать проект, чтобы продолжить работу в другом месте.

Вопросы