JS

Карточке товара нужны название и цена, а описание и фотография иногда отсутствуют. Опишите данные через пропсы, задайте поведение для пропусков и передайте действие «Добавить в корзину» родителю. TypeScript проверит вызовы компонента. Ещё до запуска страницы.

Пропсы (props) — параметры, которые родитель передаёт компоненту. Наш ProductCard покажет вымышленную кружку за 1299 ₽ и сообщит родителю её строковый идентификатор. Настоящую корзину здесь не собираем: под карточкой появится результат нажатия. Так видно, правильно ли работает её контракт.

Пример рассчитан на существующий клиентский проект с React, TypeScript, обработкой JSX и пакетами типов @types/react и @types/react-dom. Подойдёт шаблон React + TypeScript в Vite. Файлы с JSX сохраняйте с расширением .tsx, а в настройках TypeScript включите strict. Основы языка есть в нашей статье о TypeScript.

Кнопка добавила товар, список корзины обновился, а счётчик остался прежним? Храните корзину в общем родительском компоненте. Карточкам передавайте количество и обработчики; счётчик и сумму вычисляйте из того же массива при рендере.

Соберём учебный магазин с блокнотом и карандашом. Два клика по блокноту дадут одну строку корзины с количеством два; счётчик покажет две единицы. Сумма — 700 ₽. После удаления блокнота карточка снова покажет ноль.

Нужен проект React, в котором уже работают JSX и основной компонент App. Замените его App.jsx и добавьте рядом cart-model.mjs. Понадобятся основы компонентов и useState; если пока разбираетесь с JSX, начните с введения в React.

Товары и цены вымышлены. После перезагрузки корзина сбрасывается, а оформления заказа здесь нет: сейчас тренируем согласованное состояние интерфейса.

В форме профиля имя меняет предпросмотр, чекбокс включает рассылку, а файл выбирает пользователь. Имя и чекбокс удобно связать с состоянием React. Поле файла оставьте браузеру: при отправке все значения можно собрать через FormData.

Управляемое поле, или controlled, получает текущее значение из React. У неуправляемого, uncontrolled, текущее значение хранит DOM. Выбирайте модель для каждого поля отдельно: одна форма может сочетать обе модели.

Если JSX и useState пока незнакомы, начните с нашего введения в React. Здесь мы уже собираем работающую форму в существующем клиентском проекте с React и обработкой JSX. Например, в проекте на Vite подойдут файлы src/App.jsx и src/main.jsx; в index.html нужен <div id="root"></div>.

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

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

Общее устройство хранилища уже разобрано в статье «Что такое localStorage». Здесь займёмся корзиной, которую можно прочитать после изменения кода.

API вернул priceCents: "неизвестно", и карточка после деления на 100 показала NaN. Примите ответ как unknown, проверьте поля и передайте товар интерфейсу только после успешного разбора.

У нас учебная кружка за 1299 ₽. Название и цена вымышлены; задача настоящая: код должен различать корректный товар, ошибочный ответ сервера и данные другого формата. Готовый проверяющий код находится ниже. Если нужен обзор самих предикатов типов, он есть в статье «Предикаты типов в TypeScript».

Для отправки формы сначала уточните, какой формат принимает API. В учебном примере подготовим два маршрута: JSON для полей и FormData для полей с необязательным файлом. Затем проверим ответ сервера.

Соберём учебную заявку: почта, число мест и согласие получать новости. Вложение необязательно. Для проверки используйте вымышленные данные, например student@example.test, и небольшой текстовый файл без личной информации. Базовый принцип запроса уже разобран в статье «Как работать с fetch»; здесь внимание на том, что именно отправит форма.

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

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

Разберём три ситуации: неправильный номер товара, отсутствующая карточка и сбой сервера. Понадобятся основы JavaScript, терминал и современная установленная Node.js. Создадим два файла. Пример работает на встроенных модулях и вымышленных данных.

В статье про причину ошибки в JavaScript разобран Error.cause. Здесь работаем на границе сервера и клиента: какие сведения попадут в HTTP-ответ, что интерфейс покажет человеку и как разработчик найдёт этот запрос.

Соберём API учебного каталога: список товаров, отдельную карточку и понятные ошибки запроса. Браузер получит JSON, сервер выберет маршрут и статус, а вы сможете проверить контракт командой curl и небольшой страницей.

Начнём с интерфейса API, затем напишем сервер на встроенном модуле Node.js http. Сторонний фреймворк для этого упражнения не нужен. Все товары вымышленные, данные хранятся в памяти и не меняются между запросами.

Понадобятся установленный современный Node.js и база JavaScript: функции, массивы, объекты, модули и обработка ошибок. Если запуск файла пока вызывает вопросы, воспользуйтесь разбором запуска JavaScript через Node.js. Наша задача начинается после установки среды.

В консоли повторяется сообщение из useEffect. Найдём, что запускает эффект: изменение зависимости, проверка StrictMode или обновление состояния внутри самого эффекта. Затем исправим три компонента, сохранив нужное поведение.