Aprender uma nova tecnologia como o React pode ser confuso sem experiência prática. Como desenvolvedor, criar projetos do mundo real é uma das maneiras mais eficazes de entender conceitos e recursos.

Siga o processo de criação de uma lista de tarefas simples com o React e aprimore sua compreensão dos fundamentos do React.

Pré-requisitos para criar uma lista de tarefas

Antes de iniciar este projeto, existem vários requisitos. Você precisa ter uma compreensão básica do seguinte, HTML, CSS, JavaScript, ES6e Reagir. Você precisa ter Node.js e npm, o gerenciador de pacotes JavaScript. Você também precisa de um editor de código, como o Visual Studio Code.

Aqui está o CSS que este projeto usará:

/* estilos.css */
.Aplicativo {
família de fontes: sem serifa;
mostrar: flex;
justificar-conteúdo: Centro;
itens de alinhamento: Centro;
altura: 100vh;
}
.Pendência {
cor de fundo: trigo;
alinhamento de texto: Centro;
largura: 50%;
preenchimento: 20px;
Sombra da caixa: rgba(0, 0, 0, 0.24) 0px 3px 8px;
margem: auto;
}

instagram viewer

ul {
tipo de estilo de lista: nenhum;
preenchimento: 10px;
margem: 0;
}
botão {
largura: 70px;
altura: 35px;
cor de fundo: castanho-areia;
fronteira: nenhum;
tamanho da fonte: 15px;
espessura da fonte: 800;
raio da borda: 4px;
Sombra da caixa: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.entrada {
fronteira: nenhum;
largura: 340px;
altura: 35px;
raio da borda: 9px;
alinhamento de texto: Centro;
Sombra da caixa: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.Principal {
mostrar: flex;
justificar-conteúdo: Centro;
brecha: 12px;
}
li {
mostrar: flex;
justificar-conteúdo: espaço uniformemente;
itens de alinhamento: Centro;
preenchimento: 10px;
}
li:antes {
contente: "*";
margem direita: 5px;
}

1. Configurar o ambiente do projeto

Esta etapa inclui todos os comandos e arquivos necessários para configurar o projeto. Para começar, crie um novo projeto React. Abra um terminal e execute este comando:

lista de tarefas npx create-react-app

Isso leva alguns minutos para instalar todos os arquivos e pacotes necessários. Ele cria um novo aplicativo React chamado todo-list. Depois de ver algo assim, você está no caminho certo:

Navegue até o diretório do seu projeto recém-criado usando este comando:

cd lista de tarefas

Execute seu projeto localmente com este comando:

npm start

Em seguida, visualize o projeto em seu navegador em http://localhost: 3000/.

Na pasta src do seu projeto, existem alguns arquivos que você não precisa. Exclua estes arquivos: App.css, App.test.js, logo.svg, reportWebVitals.js, setupTests.js.

Certifique-se de procurar instruções de importação nos arquivos disponíveis e remova todas as referências aos arquivos excluídos.

2. Criar um componente TodoList

Este é o componente que iremos implementar todos os códigos necessários para a lista de tarefas. Crie um arquivo chamado “TodoList.js” em sua pasta src. Então, para testar se tudo está funcionando como deveria, adicione o seguinte código:

importar Reagir de'reagir';
const TodoList = () => {
retornar (



Olá mundo </h2>
 </div>
 );
};
exportarpadrão Lista de afazeres; 

Abra seu arquivo App.js, importe o componente TodoList e renderize-o dentro do componente App. Vai parecer algo assim:

importar Reagir de'reagir';
importar'./estilos.css'
importar Lista de afazeres de'./Lista de afazeres';
const aplicativo = () => {
retornar (




 </div>
 );
};
exportarpadrão Aplicativo;

Vá para o seu navegador local que tenha o localhost: 3000 em execução e verifique se “Hello World” está escrito em negrito. Tudo certo? Para a próxima etapa.

3. Lidar com entrada e mudança de entrada

Esta etapa permite acionar um evento ao digitar uma tarefa na caixa de entrada. Importe o hook useState do seu pacote React. useState é um gancho do React que permite gerenciar o estado com eficiência.

importar Reagir, { useState } de'reagir';

Use o hook useState para criar uma variável de estado chamada “inputTask” com um valor inicial de uma string vazia. Além disso, atribua a função “setInputTask” para atualizar o valor de “inputTask” com base na entrada do usuário.

const [inputTask, setInputTask] = useState("");

Crie uma função chamada “handleInputChange”, recebendo um parâmetro de evento. Ele deve atualizar o estado inputTask usando a função setInputTask. Acesse o valor do destino do evento com event.target.value. Isso será executado sempre que o valor do campo de entrada for alterado.

const handleInputChange = (evento) => {
 setInputTask (event.target.value);
}; 

Retorne alguns elementos JSX. O primeiro é o título que diz “Minha Lista de Tarefas”, você pode escolher qualquer título que desejar. Inclua alguns atributos em seus elementos de entrada. tipo=“texto”: Isso especifica seu tipo de entrada como texto, valor={inputTask}: isso vincula o valor do campo de entrada à variável de estado inputTask, garantindo que reflita o valor atual.onChange={handleInputChange}: isso chama a função handleInputChange quando o valor do campo de entrada muda, atualizando o estado inputTask.

"Pendência">
Minha lista de tarefas</h1>
"Principal">
"entrada" tipo="texto" valor={inputTask}
 onChange={handleInputChange} espaço reservado="Insira uma tarefa" />

Seguindo em frente, crie um botão que adicionará a tarefa inserida à lista.

"btn">ADICIONAR</button>
 </div>
</div>

Nesta fase, é assim que a saída do seu navegador ficará.

4. Adicionar Funcionalidade ao Botão "ADICIONAR"

Use o useState hook para criar uma variável de estado chamada ‘list’ com um valor inicial de uma matriz vazia. A variável ‘setList’ armazena a matriz de tarefas com base na entrada do usuário.

const [lista, setList] = useState([]);

Crie uma função handleAddTodo que será executada quando o usuário clicar no botão “ADD” para adicionar uma nova tarefa. Leva o parâmetro todo, que representa a nova tarefa inserida pelo usuário. Em seguida, crie um objeto newTask com um id exclusivo gerado usando Math.random() e a propriedade todo que contém o texto de entrada.

Seguindo em frente, atualize o estado da lista usando o operador de propagação […lista] para criar uma nova matriz com as tarefas existentes na lista. Anexe o newTask ao final da matriz. Isso garante que não alteremos a matriz de estado original. Por fim, redefina o estado inputTask para uma string vazia, limpando o campo de entrada quando o usuário clicar no botão.

const handleAddTodo = (pendência) => {
const novaTarefa = {
 eu ia: Matemática.aleatório(),
 todo: todo
 };
 setList([...lista, novaTarefa]);
 setInputTask('');
}; 

Incluir o ao clicar atributo ao elemento de botão com o texto "ADD". Quando clicado, aciona o handleAddTodo função, que adiciona uma nova tarefa ao estado da lista

 handleAddTodo (inputTask)}>ADD</button> 

Nesta fase, a saída do seu navegador terá a mesma aparência, mas se você clicar no botão "ADICIONAR" após inserir uma tarefa, o campo de entrada ficará vazio. Se estiver funcionando bem, vamos para a próxima etapa.

5. Adicionar um botão Excluir

Esta é a etapa final para permitir que os usuários excluam sua tarefa se cometerem um erro ou concluírem a tarefa. Crie uma função handleDeleteTodo que atue como um manipulador de eventos quando o usuário clicar no botão “Excluir” para uma tarefa específica. Leva o id da tarefa como parâmetro.

Dentro da função, use o método filter no array list para criar um novo array newList que exclua a tarefa com o id correspondente. O método de filtro itera cada item na matriz de lista e retorna uma nova matriz contendo apenas os itens que satisfazem a condição especificada. Neste caso, verifique se o ID de cada tarefa é igual ao ID passado como parâmetro. Atualize o estado da lista chamando setList (newList), que define o estado para o novo array filtrado, removendo efetivamente da lista a tarefa com o id correspondente.

const handleDeleteTodo = (eu ia) => {
const novaLista = lista.filtro((pendência) =>
 todo.id !== id
 );
 setList (novaLista); 
};

Use o método map para iterar sobre cada item na matriz da lista e retornar uma nova matriz. Em seguida, crie um

Acesse a propriedade todo de cada objeto todo. por último, crie um botão que ao ser clicado acione a função handleDeleteTodo com o id da tarefa correspondente como parâmetro, permitindo deletar a tarefa da lista.

<ul>
{ lista.map((pendência) => (
<linome da classe="tarefa"chave={todo.id}>
 {todo.todo}
<botãoao clicar={() => handleDeleteTodo (todo.id)}>Excluirbotão>
li>
))}
ul>

É assim que seu código final deve ficar:

importar Reagir, { useState } de'reagir';
const TodoList = () => {
const [inputTask, setInputTask] = useState('');
const [lista, setList] = useState([]);
const handleAddTodo = () => {
const novaTarefa = {
 eu ia: Matemática.aleatório(),
 fazer: inputTask
 };
 setLista([...lista, nova tarefa]);
 setInputTask('');
 };
const handleDeleteTodo = (eu ia) => {
const novaLista = lista.filtro((pendência) => todo.id !== id);
 setList (novaLista);
 };
const handleInputChange = (evento) => {
setInputTask(evento.alvo.valor);
 };
retornar (
<divnome da classe="Pendência">

meu to-FazerLista

<divnome da classe="Principal">
<entradanome da classe="entrada"tipo="texto"valor={inputTask}
 onChange={handleInputChange} espaço reservado="Insira uma tarefa" />
<botãonome da classe="btn"ao clicar={handleAddTodo}>ADICIONARbotão>
div>
<ul>
 { lista.map((pendência) => (
<linome da classe="tarefa"chave={todo.id}>
 {todo.todo}
<botãoao clicar={() => handleDeleteTodo (todo.id)}>
Excluir
botão>
li>
 ))}
ul>
div>
 );
};
exportarpadrão Lista de afazeres; 

É assim que sua saída final será, com os botões adicionar e excluir funcionando conforme o esperado.

Parabéns, você criou uma lista de tarefas que adiciona e exclui tarefas. Você pode ir além adicionando estilo e mais funcionalidades.

Use projetos do mundo real para aprender a reagir

A prática pode ser uma maneira eficaz de aprender. Ele permite que você aplique os conceitos e as melhores práticas do React de maneira prática, reforçando sua compreensão do framework. Existem muitos projetos por aí, você deve encontrar os certos.