Lista de tarefas com React

O gerenciamento de projetos tornou-se cada vez mais importante na esfera profissional e pessoal. Ter uma ferramenta que nos permita organizar eficazmente as nossas tarefas é essencial para atingir os nossos objetivos com eficiência.

O que é React e por que usá-lo?

React é uma biblioteca JavaScript usada para construir interfaces de usuário interativas e reutilizáveis. Foi desenvolvido pelo Facebook e é usado em aplicativos web e móveis. Com esta biblioteca, você pode criar componentes reutilizáveis ​​que encapsulam uma parte da interface do usuário e controlam seu próprio estado. Isso facilita a criação e manutenção de aplicativos da Web complexos.

A seguir, exploraremos como criar uma lista de tarefas usando React, uma das bibliotecas JavaScript mais populares da atualidade.

Criando um aplicativo com Create React App

Antes de começarmos a criar nossa lista de tarefas, é importante ter uma base sólida sobre a qual construir nosso aplicativo. Para fazer isso, usaremos Create React App, uma ferramenta que nos permite desenvolver rapidamente uma aplicação React com configuração predefinida.

Com isso em mente, precisamos ter certeza de que instalamos Node.js em nosso sistema. Depois de instalado, abrimos nosso terminal e executamos o seguinte comando:

npx create-react-app mi-aplicacion-de-tareas

Este comando criará uma nova pasta chamada minha-aplicação-de-tarefas com toda estrutura necessária para desenvolver o que seu nome indica.

Etapa 1: divida a IU em componentes

A primeira coisa que precisamos fazer no caminho para nossa lista de tarefas é dividir a UI em uma hierarquia de componentes. Isso nos ajudará a organizar e reutilizar o código de forma mais eficaz.

Vamos imaginar que queremos uma lista de tarefas com a capacidade de adicioná-las, marcá-las como concluídas e excluí-las. Podemos começar identificando os principais componentes da nossa aplicação:

• App: O componente principal que contém todo o aplicativo.
• TodoAdd: Útil para adicionar novas tarefas.
• TodoItem: Permite mostrar e excluir tarefas.
• TodoList: Contém a lista de tarefas.
• TodoUpdate: É responsável por atualizar os dados entre os componentes.

Cada um deles terá seu próprio estado e se comunicará com os demais por meio de props.

Etapa 2: Crie componentes estáticos no React

Depois de identificarmos os principais componentes da nossa aplicação, podemos construir a versão interativa da interface do usuário.

O componente TodoAdd será responsável por adicionar a tarefa. Para isso terá esta estrutura:

• Description: O nome da tarefa.
• OnInputChange: Quando o usuário modifica uma tarefa.
• OnResetForm: O campo description para inserir está vazio. Assim que o usuário pressionar o botão Enter ou Adicionar.

Agora criamos a função onFormSubmit que será ativado quando o usuário pressionar o botão Adicionar, sua condição é, se o campo de descrição for menor ou igual a um, a função será executada newTodo, que permite adicionar elementos à lista. Através de um id formado com a data, description com as informações inseridas pelo usuário e done que determina se uma tarefa está pendente ou concluída. Continuamos com a estrutura HTML onde criamos um formulário e um botão.

Continuamos com o componente TodoItem, que mostrará as informações de uma tarefa específica por meio de uma lista, que é composta por:

• Span: Tem o conteúdo da tarefa. Assim que o usuário pressionar o botão adicionar, a função será executada handleComplete.
• Botão editar: A função handleUpdateTodo será ativada.
• Botão excluir: Será executado quando o usuário pressionar o ícone da lixeira com a função handleDeleteTodo.

Então podemos adicionar o componente TodoList para exibir uma lista de tarefas usando o componente TodoItem. Começamos com uma lista com a função map que permite iterar sobre o array todos e nos devolve um novo array todo com as funções de TodoItem como handleUpdateTodo, handleDeleteTodo e handleCompleteTodo.

Por último, o componente TodoUpdate irá atualizar os dados entre os componentes, onde copiamos e colamos o mesmo formulário que usamos no componente TodoAdd, mas a aula principal será input-update com esta condicional: se o usuário terminar a tarefa, o estado muda done a false e a propriedade CSS será ativada text-decoration-dashed, riscando o texto do dever de casa.

Etapa 3: adicionar interatividade com React State

Agora que temos nossa UI estática, é hora de adicionar interatividade à nossa lista de tarefas usando o estado React.

Podemos começar adicionando o estado ao nosso componente App e passe os dados necessários como props para os componentes TodoList e TodoItem. Então podemos adicionar funções de manipulação de eventos no componente TodoItem para atualizar o estado quando o usuário interage com uma tarefa.

Na pasta src criamos o arquivo todoReducer.js, que contém funções que assumem um estado inicial e uma ação e retornam um novo estado. Essas funções são usadas em conjunto com o conceito de store en Redux para gerenciar o estado de um aplicativo.

Quando ocorre uma ação, como o clique de um botão, ela é enviada ao redutor correspondente junto com o estado atual. O redutor processa a ação e retorna um novo estado atualizado.

Neste código, initialState é o estado inicial usado quando o aplicativo é carregado pela primeira vez. Enquanto que action é um objeto que contém informações sobre a ação que está sendo executada.

Dentro do reducer, uma estrutura switch é usada para determinar a ação a ser tomada. O código apresenta quatro casos dentro do switch para diferentes ações, como estas:

• Add Todo: Será necessário um estado inicial com um action.payload, que permite passar dados específicos de uma ação para um reducer de forma estruturada, evitando assim o acoplamento dos componentes e favorecendo a escalabilidade e manutenibilidade do código.
• Delete Todo: Ele retornará um novo array do estado inicial e filtrará o id para excluir a tarefa.
• Complete Todo: tem a seguinte estrutura:

todo: {

id: 123465597,

description: “Aprender React”,

done: que será un valor booleano, true o false

}

Então ele retornará um estado inicial com um novo array map, com a seguinte verificação: Se todo.id for igual a action.payload, então retornará todo o conteúdo da estrutura todo, mas a propriedade done será a negação de todo.done.

• Update Todo: Neste último caso, copiamos e colamos o código Complete Todo, mas o .payload mudará porque será um objeto .id e a propriedade que iremos manipular é a description.

É importante ter em mente que os reducers No React são funções puras, o que significa que não devem ter efeitos colaterais ou modificar diretamente o estado original. Em vez disso, um novo estado atualizado deve ser retornado. Isso permite que os aplicativos sejam mais previsíveis e mais fáceis de depurar.

Continuamos com os hooks, que permitem usar estado e outros recursos do React em componentes funcionais, sem a necessidade de usar classes. São também funções especiais que permitem reunir o estado do React e o ciclo de vida dos componentes funcionais.

Alguns dos hooks mais usados

• UseState: Ideal para adicionar estado a componentes funcionais. Recebe um valor inicial e retorna um array com o estado atual e uma função para atualizá-lo.
• UseEffect: Com este gancho você pode realizar efeitos colaterais em componentes funcionais. Você pode usá-lo para fazer solicitações a uma API, assinar eventos, limpar recursos, etc.
• UseContext: Recebe um objeto de contexto como argumento e retorna seu valor atual.
• UseReducer: É semelhante ao useState, mas é mais adequado para casos em que o estado possui lógica complexa ou onde há muitas transições de estado possíveis.

Neste código, usamos useEffect para fazer uma solicitação a uma API e salvar os dados no estado local, para que os dados permaneçam se o usuário recarregar a página. É importante ressaltar que useEffect também pode retornar uma função de limpeza, que é executada antes do componente ser desmontado.

Por outro lado, no React, você pode usar localStorage para salvar e acessar dados no navegador do usuário. Para começar, você pode usar o método setItem para salvar dados no localStorage.

Lembre-se de que localStorage só pode armazenar strings de texto. Se quiser salvar objetos no localStorage, você pode usar JSON.stringify para converter o objeto em uma string de texto antes de salvá-lo e JSON.parse para converter a string de texto de volta em um objeto ao obtê-lo do localStorage.

Observe que localStorage está disponível no navegador e não no servidor, portanto você não poderá acessá-lo durante o processo de renderização do servidor.

Etapa 4: implantar o aplicativo

Depois de concluirmos o desenvolvimento de nossa lista de tarefas com React, podemos implantá-la em um ambiente de produção. Podemos usar serviços de hospedagem web como Netlify ou Vercel para implantar nosso aplicativo de forma fácil e rápida.

Também é importante garantir que otimizamos nosso aplicativo para obter o desempenho ideal. Podemos usar ferramentas de otimização de desempenho como Webpack ou Babel para reduzir o tamanho dos arquivos e melhorar o tempo de carregamento dos aplicativos.

React é uma ferramenta poderosa que nos permite construir interfaces de usuário rápidas e eficientes para aplicações web. Com sua abordagem modular e sistema de componentes reutilizáveis, podemos criar aplicações escaláveis ​​e de fácil manutenção.

Espero que este artigo tenha sido útil para você e lhe tenha dado uma ideia de como usar o React para desenvolver suas próprias aplicações web. Boa sorte com seu projeto de lista de tarefas!