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.

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. culTest

La hice en febrero de 2026 para facilitar el aprendizaje de mis alumnos. La idea es aprender desarrollo web practicando y que el proyecto siga creciendo con nuevos temas, tests y retos.

Está inspirada en MDN, W3Schools, CodePen, Manz y muchos otros sitios de documentación sobre desarrollo web. Quería combinar teoría útil, ejemplos ejecutables, retos y el sistema de tests que ya tenía en culTest. culTest

Si te gustó, si no te gustó o si quieres escribirme, puedes hacerlo en cristianeslava@gmail.com