DevPath · Aprenda a programar ESPTEN

Projeto: blog full-stack

Dos dados à tela

O percurso de um dado

Uma vez modelados os dados, o resto do blog é transformá-los camada a camada:

  1. O banco de dados guarda os posts e comentários e responde consultas (por exemplo: cada post com seu número de comentários, ordenados por data).
  2. O backend prepara esses dados: gera slugs, os pagina e os expõe como endpoints (listarPosts, carregarPost).
  3. O frontend os pinta: uma maquete semântica para um post (<article> com <h1>, <time> e <p>) e um componente que percorre o array de posts para mostrar a lista.

HTML semântico para um post

Nem todo <div> serve. Um post é um <article>; seu título, um <h1>; sua data, um <time> (a tag pensada para datas); e seu corpo, um <p>. O HTML semântico melhora a acessibilidade e o SEO sem custo extra.

Async: pedir um post pelo seu slug

Quando o leitor abre um post, o frontend pede esse post pelo seu slug à API. Como a rede demora, a função é assíncrona: await api(slug) espera a resposta e devolve o post. Nos próximos exercícios você vai construir cada uma dessas peças.

Coloque isto em prática

O DevPath é um curso prático: aqui você lê a teoria; no app você a coloca em prática com exercícios que rodam de verdade, offline.

Comece grátis no app →
← O plano: modelar um blogVer o módulo →