Construa uma lista de tarefas completa com React — adicionar, remover, marcar como concluída e persistir com localStorage. Três hooks, quatro funções, um produto funcional.
Por que toda aplicação real começa com uma lista de tarefas?
A To-Do List não é um projeto trivial — é a menor aplicação que concentra os três desafios fundamentais de qualquer interface interativa: gerenciar estado (o que está na lista?), reagir a eventos (o usuário clicou em “remover”) e persistir dados (a lista precisa sobreviver ao F5). Quem constrói uma To-Do List completa em React com localStorage entendeu os fundamentos que estão presentes em sistemas de e-commerce, dashboards e painéis de gestão.
Esta aula fecha o ciclo da semana 8: depois de componentes (8.1) e ciclo de vida (8.2), agora é o estado e os eventos que tornam a interface reativa ao usuário — e útil além do ambiente de desenvolvimento.
Quais são os conceitos centrais desta aula?
Hook que adiciona estado local mutável a componentes funcionais. Retorna par [valor, setter] — toda chamada ao setter dispara re-render com o novo valor. Imutabilidade é obrigatória: nunca alterar o array ou objeto diretamente.
API do navegador que armazena pares chave-valor como strings sem prazo de expiração. Persiste entre sessões. Requer JSON.stringify para salvar objetos e JSON.parse para recuperar — suporta apenas tipos primitivos nativamente.
Como funciona cada operação da To-Do List em código?
addTask
Cria novo objeto { text, completed: false } e usa spread operator para retornar novo array sem mutar o estado original.
toggleComplete
Usa map para percorrer — quando o índice bate, retorna spread do item com completed invertido. Todos os outros são retornados inalterados.
removeTask
Usa filter para retornar novo array excluindo apenas o item com o índice fornecido. Um liner que resolve a operação completa.
| FUNÇÃO / HOOK | O QUE FAZ | PADRÃO DE IMUTABILIDADE |
|---|---|---|
| useState([]) | Inicializa lista de tarefas como array vazio | Nunca push() direto — sempre setter com novo array |
| addTask() | Acrescenta nova tarefa ao array | […tasks, newTask] — spread cria novo array |
| toggleComplete(index) | Inverte o campo completed do item no índice | tasks.map() — retorna novo array completo |
| removeTask(index) | Exclui item pelo índice | tasks.filter() — retorna novo array sem o item |
| useEffect([tasks]) | Salva no localStorage sempre que tasks muda | JSON.stringify — serializa para string |
| useEffect([]) | Carrega do localStorage na montagem | JSON.parse — desserializa de string |
Como implementar o App.js completo da To-Do List?
Template 1 — Lógica de estado e funções
import React, { useState, useEffect } from 'react';
import './App.css';
function App() {
const [tasks, setTasks] = useState([]);
const [input, setInput] = useState('');
// Carrega do localStorage na montagem
useEffect(() => {
const saved = JSON.parse(localStorage.getItem('tasks'));
if (saved) setTasks(saved);
}, []); // ← [] = executa apenas uma vez na montagem
// Salva no localStorage sempre que tasks muda
useEffect(() => {
localStorage.setItem('tasks', JSON.stringify(tasks));
}, [tasks]); // ← executa toda vez que tasks muda
// Adiciona nova tarefa — spread cria novo array (imutabilidade)
const addTask = () => {
const newTask = { text: input, completed: false };
setTasks([...tasks, newTask]);
setInput('');
};
// Alterna completed — map retorna novo array
const toggleComplete = (index) => {
const updated = tasks.map((t, i) =>
i === index ? { ...t, completed: !t.completed } : t
);
setTasks(updated);
};
// Remove tarefa — filter retorna novo array sem o item
const removeTask = (index) => {
setTasks(tasks.filter((_, i) => i !== index));
};Template 2 — Renderização JSX com eventos
return (
<div className="App">
<h1>To-Do List</h1>
<input
type="text"
value={input}
onChange={(e) => setInput(e.target.value)}
placeholder="Nova tarefa"
/>
<button onClick={addTask}>Adicionar</button>
<ul>
{tasks.map((task, index) => (
<li key={index} className="todo-item">
<span
className={task.completed ? 'completed' : ''}
onClick={() => toggleComplete(index)}
>
{task.text}
</span>
<button onClick={() => removeTask(index)}>Remover</button>
</li>
))}
</ul>
</div>
);
}
export default App;[]. O de salvamento precisa executar sempre que tasks muda — com [tasks]. Colocar tudo em um único useEffect ou misturar as dependências criaria comportamentos incorretos: dados seriam sobrescritos ao carregar ou perdidos em salvamentos tardios.Como este projeto aparece em contexto pedagógico real?
Quatro etapas do roteiro oficial
- Etapa 1 — Setup:
npx create-react-app todo-list, limpeza do App.js, criação do App.css com estilos básicos. - Etapa 2 — Lógica: implementar estados
taskseinput, funçõesaddTask,toggleCompleteeremoveTask. - Etapa 3 — Persistência: dois useEffect para salvar e carregar do localStorage com JSON.stringify/parse.
- Etapa 4 — Renderização: JSX com mapeamento da lista, eventos inline e classe condicional
completed.
Da To-Do List a produto real e ativo pedagógico
Evoluir a To-Do List para banco de dados real com Firebase Realtime DB ou Supabase — sincronização entre dispositivos, autenticação de usuário.
Artigo “De To-Do List a produto: como React + localStorage vira o MVP que muitos dev sêniors não constroem em entrevistas”.
Projeto integrado: lista de tarefas colaborativa do laboratório — quais computadores precisam de manutenção, tarefas da semana, equipes de limpeza.
Oficina: como ensinar estado e eventos com localStorage sem backend — qualquer navegador moderno é o servidor desta aula.
Perguntas frequentes sobre estado, eventos e localStorage no React
Acesse todos os materiais do Curso Técnico
Slides, roteiros de projeto, hooks avançados e reflexões sobre ensino de React na escola pública.
→ professorcomia.com.brEstado e eventos como o DNA de qualquer interface interativa
Todo produto digital que responde ao usuário — de um botão de like a um carrinho de compras — implementa exatamente os mesmos conceitos desta aula: um array de estado, funções que atualizam imutavelmente, eventos que disparam essas funções e persistência que mantém o contexto entre sessões. Quem construiu a To-Do List desta aula construiu, em miniatura, a mesma arquitetura do Trello, do Notion e de qualquer sistema de gestão de tarefas em produção.
>_ slides da aula
[SIS]ANO2C3B2S8A3 · estado e gerenciamento de eventos · 2º ano · semana 8 · aula 3