1. Objetivo
Implementar uma aplicação ToDo List com as seguintes funcionalidades:
- Criar uma nova tarefa.
- Marcar e desmarcar uma tarefa como concluída.
- Remover tarefas da lista.
- Exibir progresso de conclusão (total de criadas x total concluídas).
2. Conceitos a aplicar
- Estados (useState): controlar a lista de tarefas e status de conclusão.
- Imutabilidade: atualizar a lista de forma segura usando métodos como
map, filter e reduce.
- Propriedades (props): repassar dados entre componentes (ex.: tarefa → componente de item).
- Listas e chaves: renderizar tarefas corretamente com
map e uso de key.
- Componentização: dividir em componentes reutilizáveis como
Header, TaskInput, TaskList, TaskItem.
- Hooks: aplicar hooks básicos como
useState e useEffect se necessário.
3. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais ferramentas que utilizamos durante o desenvolvimento do módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além 🚀
Disponibilizamos um vídeo que gravamos para fazer um onboarding no fluxo da aplicação e dar várias dicas para desenvolver as funcionalidades e o layout.
4. Solução
Nós disponibilizamos também um código com uma possível solução para esse desafio.
Nesse repositório você vai encontrar o desafio implementado com diversos detalhes adicionais que melhoram a experiência do usuário. Vai lá dar uma olhadinha para ver o que você pode aprender de novo ou até para implementar na sua própria solução 🚀
💡 Não se sinta culpado caso precise olhar a solução para conseguir implementar partes do desafio. Esse projeto irá te desafiar, principalmente se você não tiver muita experiência com React, e isso faz completamente parte do aprendizado 💜
5. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência?
É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar!
Vai ser incrível acompanhar a sua evolução! 💜
Feito com 💜 por Rocketseat 👋
1. Objetivo
Implementar uma aplicação ToDo List com as seguintes funcionalidades:
- Criar uma nova tarefa.
- Marcar e desmarcar uma tarefa como concluída.
- Remover tarefas da lista.
- Exibir progresso de conclusão (total de criadas x total concluídas).
2. Conceitos a aplicar
- Estados (useState): controlar a lista de tarefas e status de conclusão.
- Imutabilidade: atualizar a lista de forma segura usando métodos como
map, filter e reduce.
- Propriedades (props): repassar dados entre componentes (ex.: tarefa → componente de item).
- Listas e chaves: renderizar tarefas corretamente com
map e uso de key.
- Componentização: dividir em componentes reutilizáveis como
Header, TaskInput, TaskList, TaskItem.
- Hooks: aplicar hooks básicos como
useState e useEffect se necessário.
3. Desenvolvendo o projeto
Para desenvolver esse projeto, recomendamos utilizar as principais ferramentas que utilizamos durante o desenvolvimento do módulo da formação.
Caso você tenha alguma dificuldade você pode ir no nosso fórum e deixar sua dúvida por lá!
Após terminar o desafio, caso você queira, você pode tentar dar o próximo passo e deixar a aplicação com a sua cara. Tente mudar o layout, cores, ou até adicionar novas funcionalidades para ir além 🚀
Disponibilizamos um vídeo que gravamos para fazer um onboarding no fluxo da aplicação e dar várias dicas para desenvolver as funcionalidades e o layout.
4. Solução
Nós disponibilizamos também um código com uma possível solução para esse desafio.
Nesse repositório você vai encontrar o desafio implementado com diversos detalhes adicionais que melhoram a experiência do usuário. Vai lá dar uma olhadinha para ver o que você pode aprender de novo ou até para implementar na sua própria solução 🚀
💡 Não se sinta culpado caso precise olhar a solução para conseguir implementar partes do desafio. Esse projeto irá te desafiar, principalmente se você não tiver muita experiência com React, e isso faz completamente parte do aprendizado 💜
5. Entrega
Após concluir o desafio, você deve enviar a URL do seu código no Github.
Além disso que tal fazer um post no LinkedIn compartilhando o seu aprendizado e contando como foi a experiência?
É uma excelente forma de demonstrar seus conhecimentos e atrair novas oportunidades!
Obs: Se você se sentir à vontade, pode postar um print do resultado final e nos marcar!
Vai ser incrível acompanhar a sua evolução! 💜
Feito com 💜 por Rocketseat 👋
