Faala dev!
Seja muito bem-vindo ou bem-vinda ao primeiro desafio da trilha de ReactJS do Ignite.
Nesse desafio você vai reforçar os conceitos mais importantes do ReactJS e aprender ainda mais conceitos que serão utilizados em todas as aplicações que você for desenvolver no futuro.
Como se trata de um desafio, ele necessita de alguns conhecimentos além dos abordados nesse módulo, então é importante que tenha autonomia para que consiga pesquisar essas coisas caso não saiba como resolver. Por isso, lembre-se, tenha calma e acredite no seu processo. O aprendizado daqui é muito importante, mas você com certeza vai conseguir sair daqui com muito conhecimento bacana💜
Nesse desafio, você vai desenvolver uma aplicação de controle de tarefas no estilo to-do list, que contém as seguintes funcionalidades:
- Adicionar uma nova tarefa
- Marcar e desmarcar uma tarefa como concluída
- Remover uma tarefa da listagem
- Mostrar o progresso de conclusão das tarefas
Apesar de serem poucas funcionalidades, você vai precisar relembrar conceitos como:
- Estados
- Imutabilidade do estado
- Listas e chaves no ReactJS
- Propriedades
- Componentização
Caso você queira relembrar esses conceitos, você pode assistir aulas como Estado, Iterando no JSX, Entendendo a key, Componentes e Propriedades.
Para completar esse desafio, você pode necessitar de pesquisas para aprender sobre métodos de manipulação de arrays como map, filter ou até mesmo reduce.
Caso queira se aprofundar ainda mais em conceitos do React, recomendamos ler a nova documentação beta do React, que explica profundamente sobre conceitos do React e como pensar no design de aplicações React.
Para essa aplicação nós fornecemos um layout para que você possa seguir e implementar todas as funcionalidades desenhadas no figma.
Para acessar o Figma, você primeiro deve criar uma conta na plataforma.
Para acessar o Layout da aplicação, você primeiramente deve ter uma conta criada na plataforma do Figma, para isso, você pode clicar aqui.
Então, na página de cadastro, você pode logar diretamente com sua conta do Google ou criar uma conta com o e-mail que você preferir.
Após criar e logar em sua conta, você deve duplicar o Layout do desafio. Para isso, basta você clicar no link abaixo. Ele adicionará o Layout à sua dashboard do Figma automaticamente, como uma cópia e abrirá o layout da aplicação para a sua visualização.
Para desenvolver esse projeto, recomendamos utilizar as principais ferramentas que utilizamos durante o desenvolvimento do primeiro módulo do Ignite.
Caso você precise, você pode assistir a aula Criando um projeto React para relembrar como se inicia um projeto com Vite. Mas para que você já pratique também TypeScript, você pode relembrar como iniciar um projeto Vite com TypeScript na aula TypeScript no React.
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 🚀
Abaixo você também pode assistir 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:
https://www.youtube.com/watch?v=9La-Sj-c1ns
Após concluir o desafio, você deve enviar a URL do seu código no Github para a plataforma.
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 👋