Код — это магия. Так думает большинство людей до того, как открывают папку с проектом первый раз. После — удивляются: внутри просто текстовые файлы. Обычный текст, который можно открыть блокнотом. Никакой магии — только слова, знаки препинания и чёткая логика, которую не вы писали.

Страница из урока 4 уже существует на вашем компьютере в виде таких файлов. Сегодня мы посмотрим, что там внутри, и поймём главное: не для того, чтобы учиться это писать, а чтобы не бояться и говорить с прорабом увереннее. Хозяин дома не обязан знать, как паяют провода, — но он должен понимать, где щиток, что такое автомат и почему «просто выдернуть провод» — плохая идея [1].

И ещё один инструмент: git — машина сохранёнок. В уроке 4 мы поняли, что «надо бы сохраниться» — сейчас объясним, как именно, и сделаем первый коммит. Коммит в конце урока будет настоящий — на вашем проекте.

Быстрый конспект: откуда мы пришли

Часть 1. Открываем папку: файлы и папки — просто коробки с листами

Откройте проводник (Windows) или Finder (Mac) и найдите папку, которую Claude Code создал в уроке 4. Кликните по ней — внутри будет что-то похожее на это:

Каждый файл — это лист с текстом. Каждая папка — коробка для листов. Всё. Никакой магии: это обычная файловая система, та же, где лежат ваши документы и фотографии. Разница только в том, что некоторые «листы» написаны на языке, который браузер понимает как инструкцию — «нарисуй заголовок», «поставь фото» [1].

Самый важный файл — page.tsx. Это и есть ваша страница. Откройте его в любом текстовом редакторе (даже в Блокноте) — внутри будет текст, похожий на смесь обычного языка и технических знаков. Это и есть тот код, который написал Claude Code. Вы его не обязаны понимать — но видеть, что он существует и это просто текст, — важно.

Часть 2. Что такое фреймворк — готовый каркас дома

Одно дыхание про Next.js — и больше не возвращаемся.

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

Next.js — это такой типовой проект для веб-страниц [1]. Claude Code использует его, потому что в нём уже есть: маршрутизация (у каждой страницы есть адрес), оптимизация картинок, hot reload (обновление в браузере без нажатия F5), и ещё пятьдесят вещей, которые вам не нужно знать. Вы говорите прорабу, что хотите — он строит на этом каркасе.

Часть 3. Git — машина сохранёнок

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

В проекте без сохранёнок всё иначе: сделали одно изменение, что-то сломалось, и непонятно, что именно и когда. Откатиться некуда. Прораб пытается угадать и исправить — иногда получается, иногда нет. git решает эту проблему [2].

Git — это программа, которая ведёт журнал всех изменений в вашем проекте. Каждая запись в журнале называется коммит. Коммит — это именованная точка: «добавил фото», «исправил цвет кнопки», «добавил третью ссылку». К любой из них можно вернуться [2].

Часть 4. Закрепляем понятия

Разберём четыре слова, которые только что появились в вашем словаре. Убедитесь, что они сидят правильно — потом будет проще говорить с прорабом и читать его ответы.

Часть 5. Зачем это прорабу-нетеху

Честный вопрос: если Claude Code делает всё сам, зачем вам вообще знать, что такое файлы, фреймворк и git? Можно же просто говорить «сделай страницу» и не думать об остальном.

Можно. Но тогда вы попадаете в ситуацию хозяина, который не знает, где в его доме щиток. Он зависит от электрика при каждом вопросе: «а можно ли включить ещё один прибор?», «что значит этот мигающий индикатор?», «почему сработал автомат?». Пока электрик доступен — всё хорошо. Как только возникает мелкая проблема в воскресенье вечером — хозяин беспомощен.

Знание устройства проекта даёт три конкретные вещи:

Часть 6. Первый коммит — делаем прямо сейчас

Теория позади. Делаем первую сохранёнку.

Откройте терминал с запущенным проектом из урока 4. Напишите Claude Code — одной задачей, по формуле из урока 2:

# Просим прораба сохранить точку:
Инициализируй git в папке проекта (если ещё не сделано)
и сделай первый коммит со всеми текущими файлами.
Назови коммит: "начальная версия страницы".
Объясни мне в двух предложениях, что именно ты сделал.

Claude Code инициализирует git в папке, добавит все файлы и создаст коммит. Он покажет вам, что сделал — и объяснит. После этого в вашем проекте есть первая именованная точка в журнале. Если завтра что-то сломается — всегда можно вернуться сюда [3].

Резюме