O React é uma biblioteca JavaScript de código aberto cujo foco é criar interfaces de usuário em páginas web.
Supondo que você recebeu o desafio de realizar uma to do list em React, veja dicas dos melhores passos a serem seguidos no desenvolvimento.
Requisitos do desafio
Neste challenge, a missão é fazer uma to do list com base nos seguintes requisitos:
- Adicionar uma nova tarefa;
- Concluir uma tarefa;
- Alternar entre Todos, Ativos e Concluídos;
- Remover uma ou todas as tarefas na guia Concluído;
- (Opcional): armazenar os dados no armazenamento local de modo que, quando atualizo a página, ainda posso ver meu progresso.
Em síntese, o objetivo era praticar os conhecimentos adquiridos e fixar as bases necessárias para desenvolver uma aplicação em React.
Então, acompanhe a seguir os melhores passos adotados para criar a to do list em React.
Início do projeto
Para criar a to do list em React, iniciaremos abrindo o terminal e rodando os seguintes comandos:
npm create-react-app nome-do-projeto
cd nome-do-projeto
code .
npm run startApós rodar os comandos anteriores, é hora de colocar em prática o primeiro passo.
- Deixe apenas o arquivo App.js e o Index.js na pasta src;
- Remova as importações dos arquivos excluídos, pois do contrário vai aparecer a famigerada tela de erro;
- Crie as seguintes pastas dentro do src (consideradas necessárias para o projeto):
- Assets: pasta em que foi colocada a imagem do lixeiro;
- Components: pasta que possui o Header, o componente de adicionar tarefa e o material UI que transita entre All, Active e Completed;
- Pages: pasta que possui as páginas de All, Active e Completed;
- Providers: pasta para o Global State.
LEIA TAMBÉM
Resolução do desafio
Dando continuidade à nossa to do list em React, partimos agora para a resolução do projeto. Veja as etapas seguintes:
Base para manipulação das tarefas
A solução projetada foi criar um useState que fosse receber as informações contidas no localStorage ou um array vazio que iria receber as tarefas como objetos dentro desse array cada vez que fosse adicionado.
Adicionar uma nova tarefa
Para adicionar uma nova tarefa foi criada uma função que iria receber o value (nome da atividade) e seria atualizada essa nova informação no array com o spread operator.
Concluir uma tarefa
Esse objeto tem o id, nome da tarefa e uma verificação de true (completa) ou false (incompleta). A melhor opção foi colocar uma verificação no input de checked. Quando clicado, uma função vai verificar se existe o mesmo id para modificar o false (incompleta) para true (completa) e vice-versa.
Observe que na imagem acima há uma verificação e, então, retorna a tarefa diferente de como estava. Se estivesse true, iria para false, e se estivesse false retornaria para true.
Poder alternar entre Todos ativos e Concluídos
Neste caso, como utilizamos o Material UI para alterar entre All, Active e Completed, aproveitamos para fazer a verificação no mesmo arquivo.
Poder remover
Para ser removido, foi criada uma função que verifica se o id clicado existe no array e, se existir, vai retornar o restante das tarefas. Para remover todas as atividades concluídas, siga a mesma linha de raciocínio.
Portanto, observe que na função de “remover todas as concluídas” foi utilizada a mesma lógica, porém sem a verificação do id.
(Opcional) Poder atualizar a página e não perder os dados
Nesta etapa do desafio, colocamos que o localStorage vai receber o token ou um array vazio caso ainda não exista esse token e, assim, nós temos a possibilidade de setar no useState diretamente. Após isso, colocamos que o useEffect vai setar um novo item no token do localStorage cada vez que o task for modificado.
Fazendo a to do list com Next.js
Para fazer uma to do list em Next.js, usamos os seguintes passos.
Ela segue a mesma lógica do React, mas por causa da necessidade de tratamento SSR, a melhor opção é fazer a fragmentação com useReduce.
Portanto, foi separado um arquivo para o useEffect que iria fazer a primeira atualização e alterar a cada modificação (adicionar, remover, etc). Enfim, segue-se a mesma lógica que foi feita em React.
No mesmo princípio, usamos dois useEffect, sendo um para a primeira renderização quando entrar na aplicação e outro useEffect a cada modificação das tasks.
Já as informações de key e reducer foram passadas no ContextAPI.
O dispatch no reduce funciona como o set do useState, porém com benefícios.
No AppContext, mantivemos as informações. As funções criadas em React foram movidas para um arquivo separado ReducerTasks. Esse arquivo, aliás, possui todas as lógicas dentro de uma função que está sendo enviada para o LocalStorage.
É justamente nesse último arquivo da fragmentação que toda a lógica acontece. O state tem como padrão ser undefined, mas lembre-se do circuito.
Assim que a aplicação inicia, vai para o arquivo do LocalStorage com type ‘set’. Isso me coloca na primeira condição do switch, tendo como retorno todas as tasks guardadas no actions. E ao mesmo tempo que o localStorage colocou o ‘set’ como type, ele também coloca que as tasks é o que está salvo no localStorage do usuário. Assim, ele retorna essas informações.
O restante das condições do switch é para adicionar, remover, concluir, etc. Seguindo a mesma lógica, mas é usando dispatch e setando um objeto com o type (para ser verificado) e atualizar as tasks com as novas informações.
Conclusão
Como você viu o passo a passo inicial, foi criada a to do list em React. Sendo assim, o projeto como base inicial funciona. Mas agora só falta implementar os adicionais que serão acrescentados no futuro.
E, então, que tal aplicar o passo a passo para ir testando seus conhecimentos em React? Afinal, esse é um dos recursos mais importantes do ecossistema JavaScript.
Que tal testar seus conhecimentos no Fast Challenge e no Project Challenge da Coodesh? A dica bônus é fazer seu perfil totalmente gratuito na Coodesh, validar suas skills e aumentar as suas chances de conseguir o primeiro emprego ou a recolocação no mercado tech. Clique aqui para saber mais.
