Um Exemplo Trabalhado: Uma Funcionalidade de "Favoritos"

Vamos construir uma pequena funcionalidade do início ao fim: usuários podem marcar itens de uma lista como favoritos e ver uma contagem de quantos eles favoritaram.

Dividindo em fatias

Aqui está como eu dividiria em passos verticais:

1. Adicionar um botão de estrela ao lado de cada item (não faz nada ainda, só aparece).
2. Clicar na estrela alterna sua aparência ligada/desligada (só estado, sem salvar).
3. Mostrar um contador "★ 3 favoritos" que reflete as alternâncias.
4. Salvar os favoritos para que persistam depois de recarregar a página.

Note que cada passo é executável e visível de forma independente. Você poderia parar depois de qualquer um deles e ainda ter um app funcionando.

Passo 1: o botão

Um bom prompt nomeia o arquivo, a mudança e o que não deve ser tocado:

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.

Rode o app. Você vê as estrelas? Ótimo. Faça o commit:

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

Passo 2: alternar o estado

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.

Pense no estado (state) como a memória de curto prazo do app — o que é verdade agora mesmo, como se uma determinada estrela está preenchida no momento. Agora você está lidando com estado e interface juntos, o que é normal. (UI, ou interface do usuário, é apenas a parte do app que uma pessoa vê e clica.) A IA provavelmente vai adicionar algo como:

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

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

Clique em algumas estrelas. Elas alternam? Faça o commit.

Passo 3: o contador

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.

Esse passo pode exigir que a IA reestruture onde o estado vive — isso é esperado, e é exatamente por isso que você faz isso como seu próprio pequeno passo. Rode, alterne algumas estrelas, veja o número mudar. Faça o commit.

Passo 4: fazer com que persista

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.

(localStorage é apenas um pequeno caderno que o navegador guarda no próprio computador do visitante, para que o app possa anotar coisas e encontrá-las de novo depois de recarregar a página.) Recarregue a página. Ainda favoritado? Você acabou de lançar uma funcionalidade, uma fatia executável de cada vez.

Aqui está como as peças da funcionalidade concluída conversam entre si. Um clique flui para o estado, a tela é redesenhada a partir do estado, e o estado é espelhado no armazenamento para sobreviver a um recarregamento:

     ┌─────────────────────────────────────────────┐
     │                                              │
   click star                                  redraws from
     │ (event)                                 state
     ▼                                              ▲
 ┌────────┐   updates    ┌─────────┐    feeds   ┌────────┐
 │   UI   │─────────────▶│  STATE  │───────────▶│   UI   │
 │(button)│              │(in app  │            │(filled │
 └────────┘              │ memory) │            │ star + │
                         └────┬────┘            │counter)│
                              │ save on change  └────────┘
                              ▼
                         ┌──────────┐
                         │ STORAGE  │  ◀── load on startup,
                         │(localSt.)│      so it survives reload
                         └──────────┘