Урок 4.2 — После первого промта: компоненты, ошибки и как это исправлять
Зачем: Ни один проект не будет идеальным после первого промта. Это не баг — это норма. Задача не «заставить Claude сделать всё с первого раза», а научиться читать результат, находить конкретные проблемные части и работать точечно — только с ними.
Как запустить и увидеть результат
npm install # один раз — устанавливает зависимости
npm run dev # запускает локальный сервер
# Открой в браузере:
http://localhost:3000Что такое компонент и почему это важно
Когда Claude Code создаёт проект — он разбивает его на компоненты. Компонент — это отдельный независимый блок страницы. Каждый живёт в своём файле.
Страница = набор компонентов
┌─────────────────────────────┐
│ Header.tsx │ ← компонент шапки
├─────────────────────────────┤
│ HeroSection.tsx │ ← компонент hero
├─────────────┬───────────────┤
│ Card.tsx │ Card.tsx │ ← компоненты карточек
├─────────────┴───────────────┤
│ FilterBar.tsx │ ← компонент фильтра
├─────────────────────────────┤
│ Footer.tsx │ ← компонент подвала
└─────────────────────────────┘
Почему это важно: если не нравится футер — ты работаешь только с Footer.tsx. Если сломана карточка — только Card.tsx. Не трогаешь то что работает.
Что такое функция
Функция — это конкретное действие внутри компонента. Кнопка «Фильтровать» вызывает функцию filterProducts(). Форма отправки вызывает handleSubmit().
// Пример: компонент SearchBar содержит функцию поиска
function SearchBar() {
function handleSearch(query: string) { // ← это функция
// логика поиска
}
return <input onChange={handleSearch} /> // ← это компонент
}Когда говоришь Claude «поиск не работает» — он знает что нужно смотреть внутрь функции handleSearch, а не переделывать весь компонент.
Как читать первый результат
После запуска — не пытайся улучшить всё сразу. Пройди по странице и оцени каждый компонент отдельно:
Компонент Статус Что не так
─────────────────────────────────────────
Header ✅ OK —
HeroSection ✅ OK —
ProductCard ⚠️ Проблема Нет цены, картинка сломана
FilterBar ✅ OK —
Footer ❌ Ошибка Страница вылетает при клике
ContactForm ⚠️ Проблема Кнопка не отправляет
Теперь у тебя есть список. Начинай с ❌ (критично), потом ⚠️ (важно).
Связь с базой данных — что может пойти не так
Если проект использует Supabase или другую БД — добавляется ещё один слой:
Компонент → функция → запрос к БД → ответ → отображение
Типичные проблемы:
- Компонент загружается, но данные не появляются — проблема в запросе к БД
- Страница вылетает с ошибкой 500 — проблема на сервере или в конфигурации БД
- Данные есть, но показываются неправильно — проблема в компоненте, не в БД
Правило: сначала проверяй есть ли данные в БД (через интерфейс Supabase), потом смотри на компонент.
Самые популярные ошибки — и как от них защититься
| Ошибка | Где видно | Причина | Как защититься |
|---|---|---|---|
Module not found | Терминал | Claude импортировал несуществующий пакет | После каждой сессии: npm install → проверь что нет красных ошибок |
Cannot read properties of undefined | Консоль браузера (F12) | Компонент пытается читать данные которых ещё нет | Попроси Claude добавить проверку: if (!data) return null |
404 Not Found | Браузер | Ссылка ведёт на страницу которой нет | Проверяй все href и Link после генерации |
CORS error | Консоль браузера | API не принимает запросы с твоего домена | Укажи Claude конкретный домен — он добавит в настройки |
| Белый экран без ошибки | Браузер | Ошибка в корневом компоненте | Открой F12 → Console → найди красную строку |
| Данные из БД не приходят | Страница пустая | Неверный API-ключ или RLS в Supabase | Проверь .env файл — все ключи на месте? |
| Стили не применяются | Визуально | Tailwind класс написан с опечаткой | Попроси Claude использовать только стандартные Tailwind классы |
| Бесконечная загрузка | Спиннер крутится | Запрос к БД завис или не возвращает результат | Добавь таймаут: попроси Claude добавить timeout в fetch |
Как формулировать задачу для конкретного компонента
❌ Плохо — слишком широко:
"Сайт не работает нормально, поправь."
✅ Хорошо — компонент + проблема + желаемый результат:
"Компонент ProductCard (файл components/ProductCard.tsx)
не показывает цену. Цена приходит из поля price в данных.
Добавь отображение цены под названием продукта."
❌ Плохо — переделай всё:
"Мне не нравится как выглядит карточка, переделай дизайн."
✅ Хорошо — конкретное изменение:
"В компоненте Card измени background с white на #F8F7F2
и добавь border-radius 12px. Только эти два свойства."
Когда компонент сломан — алгоритм действий
1. Открой F12 → Console
Есть красная ошибка? → скопируй текст ошибки целиком
2. Скажи Claude:
"Компонент [название] выдаёт ошибку:
[вставь текст ошибки]
Файл: [путь к файлу]
Исправь только эту ошибку."
3. Проверь в браузере
Работает? → git commit
Нет? → повтори с новым описанием
4. Если Claude не может исправить за 3 попытки:
"Давай подойдём иначе. Объясни мне что происходит
в этом компоненте и почему возникает эта ошибка."
— понимание проблемы часто важнее быстрого фикса
Spot the Mistake
Проект запустился, три компонента работают отлично. Один компонент — форма обратной связи — не отправляет данные. Разработчик пишет: «Переделай весь проект — что-то работает не так».
Что не так? Три компонента из четырёх работают идеально. «Переделать всё» — значит потерять то что работает и начать заново. Правильно: «Компонент ContactForm не отправляет данные. Вот ошибка из консоли: [текст]. Исправь только функцию handleSubmit.»
Проверь себя
Закрой страницу и ответь
- Что такое компонент и почему работать нужно с ним а не со всем проектом?
- Какую ошибку видишь в консоли браузера если компонент пытается прочитать данные которых нет?
- Назови три шага алгоритма когда компонент сломан.
- Как правильно сформулировать задачу для конкретного компонента?
Действие
Запусти свой проект. Открой F12 → Console. Составь таблицу как выше: каждый компонент, его статус, что не так. Начни с первого
❌.