HW 1 — Погружение в React (Y-Lab React Webinar 3)

Цель

Первая лекция заложила основу архитектуры будущего проекта. Мы разработали собственное хранилище состояния (Store), реализовали отрисовку приложения с нуля и взаимодействие с данными без готовых библиотек.

Проект был форкнут с ветки lecture-1 основного репозитория ylabio/react-webinar-3. Домашнее задание выполнялось строго по ТЗ и дизайну в Figma, и принималось только один раз без возможности пересдачи.

---

Структура проекта

src/
├── app.js            # Главный компонент приложения
├── index.html        # Шаблон HTML
├── index.js          # Точка входа. Рендер и подписка на Store
├── store.js          # Кастомное хранилище с логикой
├── styles.css        # Стили
├── utils.js          # Вспомогательные функции

---

Выполненные задачи

Задача 1: Выделение записей

• Только одна запись может быть выделена по умолчанию.
• Клик по уже выделенной — снимает выделение.
• Выделение не сбрасывается при добавлении/удалении.
• Поддержка множественного выделения через Ctrl (или Cmd на macOS).

Задача 2: Генерация уникального кода

• Использован this.lastCode, чтобы сохранять последний номер.
• При удалении записи следующий код не повторяется, а увеличивается.
• Гарантирована уникальность кодов в рамках сессии.

Задача 3: Счётчик выделений

• Каждой записи присваивается selectedCount.
• При каждом первом выделении увеличивается значение счётчика.
• Отображается надпись “Выделяли N раз” (если N > 0).

---

Запуск проекта

npm install
npm run start

---

Используемые технологии

• React 18 (без JSX)
• Собственный Store
• Webpack + Babel + Prettier
• Минимум зависимостей (только React + ReactDOM)

---

Дополнительно

• В store.js реализованы методы addItem, deleteItem, selectItem
• Все действия вызывают setState и обновляют приложение через subscribe
• Верстка изменена строго по макету, без использования UI-библиотек

---

Это README относится к лекции 1 интенсива React от Y-Lab. Домашнее задание принято.