A regra de ouro: você não lê o código linha por linha. Você escaneia procurando pistas. Cada camada tem uma "cara" reconhecível. Use os tokens abaixo como iscas — bata o olho e caia fora.
Estrutura — HTML / JSX · "o que existe"
Os substantivos: as coisas que aparecem na tela.
Procure por:
- Etiquetas entre
< >com nome de coisa <button>,<input>,<img>,<h2>,<ul>- No React:
<Card>,<Button>(maiúsculo)
Exemplo: <button>Adicionar</button>
Estilo — CSS / Tailwind · "como aparece"
Tudo sobre cor, espaço, tamanho e forma.
Procure por:
color,background,padding,border-radius,font-size- No Tailwind: apelidos dentro de
className="…" bg-green-500,rounded-lg,gap-4,text-white
Exemplo: className="rounded-lg bg-green-500 text-white"
Comportamento — JavaScript · "o que acontece"
Os verbos: o que reage quando o usuário age.
Procure por:
- Palavras começando com
on…:onClick,onChange - A setinha
=>e a palavrafunction addEventListener,useState
Exemplo: onClick={() => addTask(text)}
Mantenha essa referência aberta ao lado enquanto lê código. Apoia a aula Reconhecendo as camadas.