Crie uma lista de compras dinâmica para te ajudar a lembrar quais itens comprar no supermercado! Pratique conceitos fundamentais de React com este Mini Projeto.
Este projeto já possui um setup pré-configurado utilizando o Vite. Sinta-se à vontade para utilizá-lo ou, se preferir, começar do zero!
Formulário
- Implemente a funcionalidade do formulário para que, ao submetê-lo, o item seja adicionado à lista de compras.
- Você pode optar por utilizar inputs controlados ou não controlados. Pratique a abordagem com a qual você tem menos familiaridade.
- Ao submeter um item, apague o formulário.
- Ao submeter um item, dê o foco no primeiro input para que seja fácil escrever outro item novamente pelo usuário.
Concluir Item
- Implemente a funcionalidade de marcar um item como concluído ao clicar no botão correspondente.
- Este item deverá ser movido para a lista de "Itens já comprados".
- O texto do item marcado deverá ser riscado e ter uma cor mais clara.
- O ícone de "A fazer" (círculo vazio) deverá ser substituído pelo ícone de "Feito" (check).
Excluir Item
- Implemente a funcionalidade de excluir um item ao clicar no ícone de lixeira.
Componentização
- Organize o código em componentes e mantenha-o legível.
Temos uma sugestão de design no Figma. No entanto, sinta-se à vontade para criar a aplicação de acordo com a sua criatividade.
- Componentes controlados e não controlados
- Formulários
- Estado
- Renderização condicional
- Manipulação de eventos (onClick vs onSubmit)
Tip
Preste atenção na estrutura de dados do seu estado.
Você prefere usar formulário controlado ou não controlado neste caso?
- Conhecimento básico de React (JSX, componentes, props)