Plano do app: decompor a UI em componentes — Capstone: um app de tarefas em React

Do rascunho à árvore de componentes

Antes de escrever uma única linha de React, é uma boa ideia olhar para a interface e dividi-la em peças. Uma pergunta-guia útil: "quais blocos se repetem e quais blocos têm uma responsabilidade clara?". Cada bloco será um componente.

Nosso mini app é uma lista de tarefas (um clássico, e com razão: exercita props, listas, estado e eventos de uma só vez). Sua tela é assim:

┌─────────────────────────────┐
│  [ digite... ]  [ Adicionar ] │   ← formulário
├─────────────────────────────┤
│  • Comprar pão       [✔][🗑] │   ← uma tarefa
│  • Estudar React     [✔][🗑] │   ← outra tarefa
└─────────────────────────────┘

Ao observá-la, surgem três responsabilidades naturais:

TarefaItem — desenha uma tarefa: seu texto e, se estiver feita, riscado. Ela não sabe nada sobre a lista; só sobre a tarefa que recebe por props.
ListaTarefas — recebe o array de tarefas e desenha um TarefaItem (dentro de um <li>) para cada uma. Seu trabalho é percorrer e delegar.
App — o componente "cérebro": possui o estado (a lista e o texto do input), adiciona tarefas e coordena os demais.

Regra de ouro: o estado vive o mais acima possível, no componente que precisa coordenar. Os filhos (TarefaItem, ListaTarefas) são em sua maioria apresentacionais: recebem dados por props e os desenham.

O modelo de dados

Antes dos componentes, decida como os dados são representados. Uma tarefa é um objeto simples:

// uma tarefa
{ id: 1, texto: "Comprar pão", feita: false }

E a lista completa é um array desses objetos:

const tarefas = [
  { id: 1, texto: "Comprar pão", feita: false },
  { id: 2, texto: "Estudar React", feita: true },
];

O id é importante: ele nos servirá como key ao renderizar a lista e para identificar qual tarefa marcar ou apagar.