Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Exercícios

  1. Adicione um campo “Criado em” ao EventDetail que mostre a data de criação do evento formatada com toLocaleDateString("pt-BR"). Não adicione esse campo ao EventCard — é informação demais para a lista.

  2. O EventList atual mostra “Carregando eventos…” como texto puro. Substitua por um indicador mais visível: um <div> centralizado com fonte maior e cor cinza. Faça o mesmo para a mensagem de erro, usando uma cor vermelha.

  3. Crie uma página “Não encontrado” que é renderizada quando o usuário acessa uma URL que não corresponde a nenhuma rota (ex: /sobre). Use a rota path="*" no React Router.

  4. O EventDetail busca a lista inteira e filtra pelo id. Se o backend tivesse um endpoint GET /api/events/:id (exercício 6 do capítulo Armazenando e Servindo Dados), como o código mudaria? Reescreva o useEffect para usar esse endpoint hipotético e compare.

  5. Implemente um botão “RSVP” no EventDetail. Ao clicar, ele muda de “RSVP” para “Confirmado ✓” (com cor verde) usando useState. Esse estado é local — recarregar a página zera o botão. Persistir no servidor é tarefa de um capítulo futuro.

  6. Adicione um <input> de busca no EventList. Use useState para armazenar o texto digitado e filtre o array events com .filter() antes do .map(). O filtro deve buscar no título e na descrição do evento (case-insensitive).

Referências

A documentação oficial do React é interativa e cobre todos os conceitos desse capítulo com exemplos editáveis: https://react.dev/learn.

Para o React Router, a documentação com exemplos e guias de migração está em: https://reactrouter.com/.

A documentação do Vite explica a configuração de proxy e outras opções do servidor de desenvolvimento: https://vite.dev/config/server-options.