Как устроена
дисциплина

Категория

Организация

Уровень

Вводный

Связанные темы

React и Angular (глава 0.2), карта задач (глава 0.3)

Зачем это знать

Понимать, что будет сделано за дисциплину и как будет проверяться работа

§1Чему учит дисциплина

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

Основной фреймворк дисциплины — React. По опросу Stack Overflow 2025 года им пользуются 44,7% разработчиков, на нём по умолчанию пишут генераторы приложений (глава 0.2, §5), и у него меньше понятий на старте. Angular изучается одной обзорной парой в модуле 4: студент читает код того же компонента на Angular и сравнивает его с React-версией. Этого достаточно, чтобы разобраться в коде на Angular, если он встретится в работе.

После дисциплины студент должен уметь пять вещей:

1. Создать и запустить проект на React, понимать, из каких файлов он состоит и что происходит при запуске.
2. Объяснить механизмы React: компонент, props, состояние, эффект, обновление интерфейса из состояния.
3. Связать приложение с сервисами: базой данных, ботом Telegram, конвейером GitHub Actions, сервисом автоматизации n8n, языковой моделью.
4. Работать с ИИ и проверять результат: ставить задачу агенту и находить ошибки в написанном им коде.
5. Защитить свою работу: объяснить любую строку кода и показать автоматизацию в работе.

§2Теория, проект, автоматизация

Каждый модуль, кроме вводного и последнего, состоит из трёх частей. Теории даётся столько, сколько нужно для проекта модуля: тема, которая в проекте не понадобится, переносится в тот модуль, где она нужна. Проект — небольшое приложение на React из 3–6 экранов, которое студент пишет сам. Автоматизация — процесс вокруг приложения, который работает без участия человека: отправляет уведомления, обрабатывает данные моделью, проверяет сайты по расписанию.

Автоматизация стоит в каждом модуле, потому что на ней видно, зачем нужен фронтенд. Если после отправки формы заявки ответственный получает сообщение в Telegram, а модель уже определила срочность, такой формой может пользоваться студсовет: заявки не теряются и приходят отсортированными. Кроме того, автоматизация знакомит с частями приложения, которые не видны в браузере: запросами между сервисами, токенами доступа, работой по расписанию.

§3Модули и проекты

Ниже план на шесть недель — 30 пар. Каждый следующий модуль добавляет новые темы React и новый вид автоматизации, а проект модуля 2 продолжает проект модуля 1. При четырёх неделях модуль 4 переходит в самостоятельную работу, а модули 3 и 5 сокращаются до трёх пар: 2 + 6 + 6 + 3 + 3 = 20.

Каждый проект решает знакомую студенту задачу и после модуля готов к использованию: доской заявок может пользоваться студсовет, мониторинг следит за сайтами, которые студенты сделали в других дисциплинах. Для каждого проекта есть стартовая заготовка: репозиторий с настроенным React, файл compose.yaml, который поднимает n8n и PocketBase одной командой, и шаблон процесса автоматизации. Студент пишет React-часть сам, а автоматизацию дорабатывает из готовых блоков.

Все проекты собираются на инструментах, за которые не нужно платить. Они перечислены в следующем разделе.

§4Бесплатные инструменты

Набор подобран по трём условиям: инструмент бесплатен для учебного проекта, работает без банковской карты и доступен из России. Часть инструментов запускается на компьютере студента и от условий сторонних компаний не зависит.

Ниже описаны правила: как в каждой части модуля можно пользоваться ИИ.

§5Три режима работы с ИИ

ИИ в дисциплине не запрещается: им пользуются 84% разработчиков, и после выпуска студент будет работать с ним. Разрешить его во всех заданиях тоже нельзя: тогда задания проверяют умение модели, и механизмы React останутся непонятыми. Поэтому каждое задание помечено одним из трёх режимов, и режим зависит от части модуля.

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

Общие правила для всех режимов

Первое правило: студент может объяснить любую строку сданной работы. На защите преподаватель указывает на строку и спрашивает, что она делает и почему написана так. Ответ «так написал ИИ» оценивается так же, как отсутствие ответа. В режиме Р2 код ИИ, который студент принял в работу, считается его кодом.

Второе правило: в режимах Р1 и Р2 к работе прилагается журнал работы с ИИ. В нём записано, каким инструментом пользовались, какие задачи ему ставили, что из предложенного приняли, что отклонили и почему. По журналу видно, умеет ли студент ставить задачу и замечать ошибки. Отклонённое предложение ИИ с объяснением причины засчитывается как часть работы.

Третье правило: токены ботов, ключи доступа и персональные данные не передаются в чаты ИИ и не попадают в код фронтенда. Они хранятся в n8n, в скрипте бота или в секретах GitHub Actions.

§6Порядок работы с ИИ-агентом

В режиме Р2 работа идёт по циклу из шести шагов. Шаги, отмеченные малиновым номером, выполняет только человек; синим — может выполнять агент. Цикл повторяется, пока результат не пройдёт проверку.

Из шести шагов четыре остаются за человеком. Это совпадает с измерениями из главы 0.3: в эксперименте METR заметная часть времени уходила на постановку задачи, ожидание ответа и проверку результата. Поэтому в модуле 4 постановка задачи и проверка оцениваются в баллах так же, как работающий код.

Как выглядит хорошая постановка задачи

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

Задача: компонент ленты новостей для проекта на React 19, Vite, TypeScript.

Что сделать:
- карточки новостей: заголовок, пересказ, теги, ссылка на источник;
- фильтр по тегу и поиск по заголовку;
- отметка «прочитано» сохраняется после перезагрузки страницы;
- если новостей нет — строка «Новостей за сегодня нет».

Правила проекта:
- данные берутся из файла public/digest.json, формат описан в types.ts;
- отфильтрованный список не хранится в состоянии, а вычисляется;
- никакого dangerouslySetInnerHTML: пересказ выводится как текст;
- у поля поиска есть подпись (label), связанная с полем.

Готово, когда:
- npm run build проходит без ошибок;
- есть тесты: фильтр по тегу, поиск, пустая лента;
- лентой можно пользоваться только с клавиатуры.

Каждая строка раздела «Готово, когда» проверяется командой, тестом или действием. Раздел «Правила проекта» содержит то, что модель по умолчанию сделала бы иначе: пересказ от модели может содержать разметку, и без запрета агент часто выводит его через dangerouslySetInnerHTML; подпись к полю модели пропускают (глава 0.3, §5, строка о доступности).

§7Проверка кода, написанного ИИ

Список ниже собран из ошибок, разобранных в главах 0.2 и 0.3, и из правил работы с сервисами. Каждый пункт — отдельная проверка, которую выполняют командой, инструментом или вручную. В модулях 1–4 к списку добавляются пункты по изучаемым темам.

• Сборка и типыПроект собирается без ошибок; в коде нет any там, где тип известен, и нет отключённых проверок // @ts-ignore.
• ТестыТесты проверяют требования задачи; тест, который повторяет текущее поведение кода, ошибку не найдёт. Хотя бы один тест должен падать, если сломать требование.
• Текущая версия ReactВ новом коде нет классовых компонентов и устаревших методов жизненного цикла. Все компоненты — функции.
• Состояние без дублейТо, что вычисляется из состояния, не хранится отдельно. Нет useEffect, который только копирует одно состояние в другое.
• Вывод HTMLНет dangerouslySetInnerHTML. Если он нужен, данные очищаются перед выводом и это объяснено в журнале.
• Ключи и токеныВ коде фронтенда нет токенов ботов, ключей моделей, паролей базы. Всё, что во фронтенде, видно пользователю.
• ПраваСкрытая кнопка не считается защитой. Правила доступа PocketBase не дают пользователю читать и менять чужие записи.
• ДоступностьУ полей есть подписи, у картинок — alt, всё работает с клавиатуры, проверка Lighthouse по доступности без ошибок.
• Ответы моделиОтвет модели проверяется перед записью в базу: категория из допустимого списка, срочность — одно из заданных значений. Неверный ответ не приводит к ошибке на доске.
• ПониманиеКаждую строку можно объяснить на защите.

§8Задание к модулю 0

Часть 1. Рынок вакансий

1. Откройте hh.ru, раздел вакансий, регион — ваш город и отдельно вся Россия.
2. Выполните поиск по словам React, Angular, Vue в названии и описании вакансии. Запишите число найденных вакансий и дату.
3. Отдельно найдите вакансии со словами «junior» или «младший» вместе с React и Angular.
4. Посчитайте соотношение React к Angular и долю вакансий для начинающих. Сравните с долями из опроса Stack Overflow в главе 0.2 и объясните в двух-трёх предложениях, почему цифры могут отличаться.

Часть 2. Проверка кода от ИИ

1. Попросите любой генератор или чат (v0, Lovable, Bolt, Google AI Studio, GigaChat, Claude) сделать страницу записи на консультацию: имя, телефон, выбор даты, кнопка «Записаться», сообщение об успешной записи. Запрос запишите дословно.
2. Откройте получившуюся страницу в Chrome. Запустите в инструментах разработчика проверку Lighthouse с категорией Accessibility и запишите результат.
3. Пройдите форму только с клавиатуры: клавиши Tab, Shift+Tab, Enter, пробел. Запишите, что не удалось сделать.
4. Откройте код и найдите по списку из §7 не меньше трёх проблем. Для каждой укажите строку, что не так и как исправить.
5. Напишите генератору исправленный запрос, который предупреждает найденные проблемы, и сравните результат с первым.

В отчёт входят: таблица с числами вакансий и датой, ответ на вопрос о расхождении, первый и второй запросы к ИИ, результат Lighthouse до и после, найденные проблемы со строками кода и журнал работы с ИИ. Оценивается точность: каждая названная проблема должна быть в коде, а объяснение — верным. Число найденных проблем на оценку не влияет.

Итог главы

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