DevPath · Aprende a programar ESPTEN

Proyecto: blog full-stack

De los datos a la pantalla

El recorrido de un dato

Una vez modelados los datos, el resto del blog es transformarlos capa a capa:

  1. La base de datos guarda los posts y comentarios y responde consultas (por ejemplo: cada post con su número de comentarios, ordenados por fecha).
  2. El backend prepara esos datos: genera slugs, los pagina y los expone como endpoints (listarPosts, cargarPost).
  3. El frontend los pinta: una maqueta semántica para un post (<article> con <h1>, <time> y <p>) y un componente que recorre el array de posts para mostrar la lista.

HTML semántico para un post

No todo <div> vale. Un post es un <article>; su título, un <h1>; su fecha, un <time> (la etiqueta pensada para fechas); y su cuerpo, un <p>. El HTML semántico mejora la accesibilidad y el SEO sin coste extra.

Async: pedir un post por su slug

Cuando el lector abre un post, el frontend pide ese post por su slug a la API. Como la red tarda, la función es asíncrona: await api(slug) espera la respuesta y devuelve el post. En los siguientes ejercicios construirás cada una de estas piezas.

Pon esto en práctica

DevPath es un curso práctico: aquí lees la teoría; en la app la pones en práctica con ejercicios que se ejecutan de verdad, sin conexión.

Empezar gratis en la app →
← El plan: modelar un blogVer el módulo →