Já desenvolveu a sua aplicação to-do com React e está pronto para tirar as conclusões gerais. Nesta secção, vamos resumir as principais funções e a sua implementação, apontar as áreas a melhorar e discutir o que vai aprender na próxima etapa. O objetivo é que possa compreender o progresso feito até agora e, ao mesmo tempo, obter inspiração para as suas próprias personalizações e funcionalidades.
Principais conclusões Criou com sucesso uma aplicação funcional de tarefas que inclui funções básicas como adicionar, marcar e apagar tarefas. A persistência de dados através do armazenamento local também foi implementada. No entanto, alguns aspectos do código e do design podem ser optimizados e a sua aplicação tem potencial para ser melhorada.
Guia passo-a-passo
Em primeiro lugar, veja o que conseguimos na nossa aplicação de tarefas. As funções básicas estão lá: Pode adicionar tarefas, marcá-las como concluídas ou eliminá-las. Quando recarrega a aplicação, as suas tarefas são mantidas graças ao Armazenamento local.
Criou vários componentes React ao desenvolver a aplicação. Um dos componentes centrais é o componente da aplicação que gere o estado das tarefas. O estado é uma matriz na qual as tarefas são armazenadas como objectos. Inicialmente, esta matriz estará vazia e será preenchida com os dados existentes pelo Armazenamento local.
Para guardar os to-dos, utilize a função localStorage.setItem para guardar o conjunto como uma cadeia de caracteres. Isto envolve a conversão dos dados num formato JSON. Estes métodos de persistência garantem que as suas tarefas são mantidas mesmo depois de o browser ser fechado.
Os hooks, em particular useState e useEffect, são parte integrante da sua aplicação. O gancho useEffect é utilizado para gerir o estado e efetuar operações de dados assíncronas, como o carregamento de tarefas. Isto simula que o carregamento dos dados é uma operação assíncrona, o que dá um comportamento realista à experiência do utilizador.
Se analisarmos a apresentação e a estrutura da aplicação, verificamos que as tarefas estão divididas em duas categorias principais: as que ainda não foram concluídas e as que já foram concluídas. Esta separação pode ser feita através de uma lógica simples no componente da aplicação, sendo que a apresentação da lista envolve vários componentes.
Um ponto que pode ser melhorado é o design da aplicação. O CSS é atualmente simples e requer um pouco mais de afinação. Por exemplo, pode ajustar dinamicamente as propriedades de estilo para reduzir a visibilidade das tarefas concluídas. Uma forma simples de o fazer é implementar a cor do tipo de letra ou o texto riscado, que fornece um feedback visual aos utilizadores.
O tamanho e a disposição dos botões também podem ser melhorados. Pense na forma como pode otimizar a experiência do utilizador com botões mais pequenos e mais reactivos. Poderá também querer adicionar uma animação induzida pelo calor depois de um botão ser premido para fornecer feedback visual ao utilizador.
Quando olha para a forma como apresentou a sua lista e as tarefas individuais, apercebe-se de que poderia mover alguns dos itens da lista para componentes separados. Desta forma, pode manter o código mais limpo e melhorar a reutilização dos componentes.
E lembre-se de que as funcionalidades adicionais, como a adição de filtros ou opções de ordenação, são adições interessantes que podem acrescentar valor à sua aplicação. Um bom exemplo seria filtrar também as tarefas concluídas e apresentá-las apenas quando necessário.
O próximo passo no seu processo de aprendizagem é criar um leitor de vídeo com React. Como este é consideravelmente mais complexo, aprenderá mais ganchos, como o useRef, para aceder a elementos DOM. Estas competências ajudá-lo-ão a trabalhar de forma mais intuitiva e eficaz com o React e a aprofundar os seus conhecimentos.
Resumo
Você já aprendeu muitas noções básicas importantes do React com seu aplicativo to-do. A persistência de dados no armazenamento local e o uso de hooks básicos são fundamentais para qualquer aplicativo React. Lembre-se de que a codificação é um processo iterativo. Deixe espaço para melhorias e aproveite todas as oportunidades para desenvolver e personalizar a sua aplicação.
