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

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

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

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

На 9 октября в обзоре есть новые возможности для изображений, списков и текста. Все они пока поддерживаются частью браузеров. Самый полезный старт — добавить JPEG XL с запасной фотографией в привычном формате.

Это промежуточный выпуск за 1–9 октября 2026 года. Месяц ещё продолжается. Сверяемся с октябрьской страницей Web Features Explorer и выбираем изменения для вёрстки и фронтенда.

Хронологию взяли из Explorer и дополнили релизом Edge 155 от 8 октября: в его примечаниях подтверждены все четыре возможности выпуска. Chrome 155 вышел шестого октября. Возможности остаются ограниченно доступными из-за отсутствия поддержки в Firefox или Safari.

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

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

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

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

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

Сохраните проверку формы в SKILL.md, чтобы Claude Code каждый раз сверял одинаковые критерии. В упражнении навык найдёт несвязанный label и неправильный тип кнопки, а затем проверит исправную форму без выдуманных замечаний.

Команда claude должна открывать агент в нужной папке проекта. На Windows сначала выберите среду, затем проверьте установку и оболочку: это поможет отличить ошибку PATH от проблемы входа или выполнения команд.

Сентябрь принёс CSS-функции для тёмной темы и расчётов. А группировка данных и объединение сигналов отмены перешли в широко доступные возможности. Начнём с оформления карточки: здесь результат видно сразу.

Выпуск собран по сентябрьским заметкам Web Features Explorer, поддержка сверена на 9 октября 2026 года. Выбрали то, что пригодится в вёрстке и браузерном JavaScript.

У новинок бывают разные даты. Newly Available означает, что возможность поддерживают актуальные основные браузеры. Через 30 месяцев она получает статус Widely Available. Поэтому широко доступная функция могла появиться несколько лет назад; старые браузеры всё равно нужно учитывать отдельно.

Длинная ссылка в карточке выталкивает кнопку за край экрана? Разрешите текстовому флекс-элементу сжиматься через min-inline-size: 0 и добавьте переносы. Эти правила отвечают за разные части задачи: ширину блока и строки внутри него.

Получится строка с аватаром, именем и кнопкой. На узком экране имя и ссылка займут несколько строк, а кнопка останется видна. Для примера нужны HTML и CSS; JavaScript не понадобится. Основы Flexible Box Layout, или Flexbox, можно освежить в нашем руководстве по флексам.

Кнопка в карточке выходит за край экрана. Исправим её с помощью Claude Code в VS Code: подключим официальный инструмент, передадим нужные файлы и проверим предложенную правку по коду и в браузере.

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

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

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

Поручите Claude Code добавить поиск в учебный каталог и принимайте изменение по поведению страницы. Заранее задайте случаи проверки: тогда объяснение агента можно сверить с кодом, а спорную правку вернуть с точной причиной.

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

Соберём пример для учебного каталога. Товары вымышлены; у каждой позиции есть идентификатор и количество. После нажатия «Добавить учебную кружку» на странице появится товар с 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. Наша задача начинается после установки среды.

В августе CSS получил сведения о положении элемента среди соседей, а декларативный теневой DOM стал широко доступным. Разберём список с задержками анимации, изолированный бейдж и новый способ соединять значения итератора в строку.

Темы взяли из августовского выпуска Web Features Explorer. Факты сверены на 9 октября 2026 года. Newly Available означает поддержку актуальных основных браузеров; Widely Available наступает спустя 30 месяцев. В старых версиях и встроенных браузерах приложений поддержка может отличаться.