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

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

Нарезка

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

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

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

Шаг 1: кнопка

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

In the ItemCard component (src/components/ItemCard.jsx), add a star
button in the top-right corner of each card. It should render an
outline star icon. Don't wire up any click behavior yet — just make
it appear. Keep the rest of the card layout unchanged.

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

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

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

Make the star button toggle between filled and outline when clicked.
Track this with local component state — don't save it anywhere yet.
A filled star means favorited.

Теперь вы обрабатываете состояние и UI вместе, что нормально. AI, вероятно, добавит что-то вроде:

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

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

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

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

Add a "★ N favorites" counter at the top of the item list. It should
count how many items currently have their star filled. Lift the
favorite state up to the list component if you need to so the counter
can see it.

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

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

Persist favorites so they survive a page reload. Use localStorage for
now — save the list of favorited item IDs whenever it changes, and
load it on startup.

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