Layouts y componentes reutilizables

Construye una base escalable con layouts y componentes para evitar duplicación y mejorar mantenimiento.

Cuando un sitio crece, repetir cabeceras y pie de página en cada archivo es una mala idea.

Con layouts centralizas estructura común y tus páginas quedan más limpias.

Con componentes extraes piezas reutilizables como tarjetas, botones o bloques de contenido.

Esta combinación te da velocidad de desarrollo y menos errores de inconsistencia.

  • Un solo lugar para estructura global.
  • Encapsula header/footer una sola vez.
  • Pasa título o metadatos como props.
  • Deja la página centrada en su contenido específico.
  • No todo debe ser componente, pero lo repetido sí.

Layout base del proyecto

Un solo lugar para estructura global.

  • Encapsula header/footer una sola vez.
  • Pasa título o metadatos como props.
  • Deja la página centrada en su contenido específico.

Componentes que sí merece extraer

No todo debe ser componente, pero lo repetido sí.

  • Cards de listado.
  • Callouts o banners informativos.
  • Botones con variantes visuales.
  • Bloques de navegación secundaria.
Astro
04

Layouts y componentes reutilizables

Construye una base escalable con layouts y componentes para evitar duplicación y mejorar mantenimiento.

Código del tema: Componentes Astro + render hibrido

📘 Teoría

Layout base del proyecto

Un solo lugar para estructura global.

  • Encapsula header/footer una sola vez.
  • Pasa título o metadatos como props.
  • Deja la página centrada en su contenido específico.
Esqueleto visual del layout
<main class="site">
  <header>Mi sitio Astro</header>
  <section>Contenido de página</section>
  <footer>© 2026</footer>
</main>

Componentes que sí merece extraer

No todo debe ser componente, pero lo repetido sí.

  • Cards de listado.
  • Callouts o banners informativos.
  • Botones con variantes visuales.
  • Bloques de navegación secundaria.

🧪 Aprende probando

Ejemplo Card reutilizable de contenidos Patrón simple para repetir bloques informativos.

🏁 Retos

Reto Reto: detectar duplicación Marca cuándo conviene convertir un bloque en componente.

🧰 Recursos

Test

Comprueba tus conocimientos con un test sobre Astro.

Test de Astro

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .