Tutorial

Lista de compras com React

Nível
14 aulas
1h10

Assistir agora

1. Apresentação da Aplicação

Sobre o Tutorial

Esse tutorial mostra o passo-a-passo para resolver o Mini Projeto Lista de compras em React.

Descrição do projeto

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.

🤓 Antes de começar

Este projeto já possui um setup pré-configurado utilizando o Vite. Sinta-se à vontade para utilizá-lo ou, se preferir, começar do zero!

🔨 Requisitos

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.

🎨 Design Sugerido

Temos uma sugestão de design no Figma. No entanto, sinta-se à vontade para criar a aplicação de acordo com a sua criatividade.

Figma

🔗 Link do design

👉🏽 Sobre este mini-projeto

O que você irá praticar:

React

  • Componentes controlados e não controlados
  • Formulários
  • Estado
  • Renderização condicional
  • Manipulação de eventos (onClick vs onSubmit)
DicaDica

Preste atenção na estrutura de dados do seu estado.
Você prefere usar formulário controlado ou não controlado neste caso?

Pré-requisitos

  • Conhecimento básico de React (JSX, componentes, props)

Seu Instrutor

Roberto Cestari

Codante.io

Aulas

  1. Introdução
  2. 1.

    Apresentação da Aplicação

    01:22
  3. 2.

    Requisitos do Projeto

    04:13
  4. 3.

    Instalando o Boilerplate do Projeto

    02:23
  5. Estrutura de dados e outros
  6. 4.

    Estrutura de dados no Estado

    05:59
  7. Extraindo o componente Item

    05:16
  8. 6.

    Renderização de Listas no React

    06:01
  9. 7.

    ID s dinâmicos com o nanoid

    01:42
  10. Implementando as Funcionalidades
  11. 8.

    Adicionando Items à lista

    07:54
  12. Dados do form com FormData API

    05:38
  13. Inserindo item, reset do form e foco

    09:01
  14. Renderização condicional do Item

    05:26
  15. Completando um item

    10:02
  16. Excluindo Item

    04:59
  17. Finalização
  18. Finalização

    00:54