Reconhecendo as camadas

Na aula anterior você aprendeu que todo protótipo funcional é feito de três camadas: estrutura, estilo e comportamento. Agora vamos achar essas mesmas camadas no código real do projeto que você vai construir. Não pra escrever, pra reconhecer. Essa leitura é o fim da caixa-preta.

Bora juntos: reconhecendo as camadas no código real

Explorador: acenda cada camada

 Estrutura
<div class="todo">
  <h2>Minhas tarefas</h2>
  <input id="campo" placeholder="Nova tarefa">
  <button id="add">Adicionar</button>
  <ul id="lista"></ul>
</div>
 Estilo
<style>
  .todo { font-family: sans-serif; max-width: 320px; }
  #add  { background: #6b4; color: white; border-radius: 6px; }
  li    { padding: 6px 0; }
</style>
 Comportamento
<script>
  add.addEventListener("click", () => {
    const li = document.createElement("li");
    li.textContent = campo.value;   // pega o que foi digitado
    lista.appendChild(li);          // e mostra na lista
    campo.value = "";               // limpa o campo
  });
</script>

Repare: as classes dentro de className="…" são o estilo (Tailwind). As tags <div>, <input>, <button> são a estrutura (JSX). E o bloco com addEventListener é o comportamento que faz o botão funcionar. As mesmas três camadas da aula anterior, agora no código real.

As 3 pistas pra caçar cada camada

Você não vai ler o código linha por linha. Vai escanear procurando pistas. Cada camada tem uma "cara":

Sua vez

Volte no explorador acima e tente encontrar, sem usar os botões: um elemento de estrutura, uma classe de estilo e um trecho de comportamento. Quando você montar o ambiente nas próximas aulas, vai abrir o código real do seu projeto e reconhecer tudo isso ali dentro.

Checagem rápida