Разобранный пример: функция «Избранное»

Давайте построим маленькую функцию от начала до конца: пользователи могут отмечать элементы в списке как избранные и видеть счётчик того, сколько они добавили в избранное.

Нарезка

Вот как я бы разбил это на вертикальные шаги:

1. Добавить кнопку-звёздочку рядом с каждым элементом (пока ничего не делает, просто появляется).
2. Клик по звёздочке переключает её вид вкл/выкл (только состояние, не сохраняется).
3. Показать счётчик «★ 3 favorites», отражающий переключения.
4. Сохранять избранное, чтобы оно сохранялось после перезагрузки страницы.

Обратите внимание: каждый шаг независимо запускаем и виден. Вы могли бы остановиться после любого из них и всё равно иметь работающее приложение.

Шаг 1: кнопка

Хороший запрос называет файл, изменение и то, что не трогать:

В компоненте ItemCard (src/components/ItemCard.jsx) добавь кнопку-звезду
в правом верхнем углу каждой карточки. Она должна отрисовывать контурную
иконку звезды. Пока не подключай никакого поведения по клику — просто сделай,
чтобы она появилась. Остальной макет карточки оставь без изменений.

Запустите приложение. Видите звёздочки? Хорошо. Зафиксируйте:

git add -A && git commit -m "Add star button to item cards"

Шаг 2: переключение состояния

Сделай, чтобы кнопка-звезда переключалась между заполненной и контурной
при клике. Отслеживай это локальным состоянием компонента — пока никуда
не сохраняй. Заполненная звезда означает «в избранном».

Думайте о состоянии (state) как о краткосрочной памяти приложения — что истинно прямо сейчас, например, закрашена ли в данный момент конкретная звезда. Теперь вы обрабатываете состояние и UI вместе, что нормально. (UI, то есть пользовательский интерфейс, — это просто та часть приложения, которую человек видит и на которую нажимает.) AI, вероятно, добавит что-то вроде:

const [isFavorite, setIsFavorite] = useState(false);

<button onClick={() => setIsFavorite(!isFavorite)}>
  {isFavorite ? <StarFilled /> : <StarOutline />}
</button>

Кликните по нескольким звёздочкам. Переключаются? Зафиксируйте.

Шаг 3: счётчик

Добавь счётчик «★ N favorites» вверху списка элементов. Он должен
считать, у скольких элементов сейчас заполнена звезда. Если нужно,
подними состояние избранного вверх к компоненту списка, чтобы счётчик
мог его видеть.

Этот шаг может потребовать от AI перестроить то, где живёт состояние — это ожидаемо, и именно поэтому вы делаете его как отдельный маленький шаг. Запустите его, переключите несколько звёздочек, понаблюдайте, как меняется число. Зафиксируйте.

Шаг 4: сделать сохраняемым

Сохраняй избранное так, чтобы оно переживало перезагрузку страницы.
Пока используй localStorage — сохраняй список ID избранных элементов
каждый раз, когда он меняется, и загружай его при старте.

(localStorage — это просто маленький блокнот, который браузер хранит на компьютере самого посетителя, чтобы приложение могло что-то записать и снова найти это после перезагрузки.) Перезагрузите страницу. Всё ещё в избранном? Вы только что выпустили функцию, один запускаемый срез за раз.

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

     ┌─────────────────────────────────────────────┐
     │                                              │
   клик звезды                                 перерисовка
     │ (событие)                               из состояния
     ▼                                              ▲
 ┌────────┐   обновл.    ┌─────────┐   питает   ┌────────┐
 │   UI   │─────────────▶│ СОСТОЯН.│───────────▶│   UI   │
 │(кнопка)│              │(в памяти│            │(полная │
 └────────┘              │ прилож.)│            │звезда +│
                         └────┬────┘            │ счётчик│
                              │ сохр. при измен.└────────┘
                              ▼
                         ┌──────────┐
                         │ХРАНИЛИЩЕ │  ◀── загрузка при старте,
                         │(localSt.)│      так оно переживёт перезагрузку
                         └──────────┘