Componentes en Astro: src/components/
Los componentes son las piezas básicas de construcción de la interfaz. En lugar de escribir bloques masivos de HTML duplicado en cada página, en Astro creamos módulos independientes que encapsulan su propia lógica, estructura y estilos. Esto nos permite mantener un código ordenado, mantenible y 100% reutilizable: (DRY).
Reglas de ubicación y nombrado
- Carpeta: Los componentes de Astro se ubican dentro de la carpeta
src/components/. - Extensión Utilizan la extensión
.astro(aunque Astro también permite utilizar componentes de React (.jsx), Vue (.vue), Svelte (.svelte), etc., en esta misma carpeta). - Nomenclatura (UpperCamelCase): Por convención estándar, los nombres de archivos deben empezar con mayúscula y usar PascalCase / UpperCamelCase (ejemplos: PostCard.astro, Button.astro, HeaderNavigation.astro).
Estructura de un componente (y en general de los archivos .astro)
Todos los archivos .astro (componentes, layouts y páginas), se estructuran en dos partes principales separadas por tres guiones (---). Estas partes son:
- Frontmatter (scripts) Se encuentra en la parte superior del archivo, entre dos bloques de tres guiones (---). Aquí se escribe el código JavaScript (o TypeScript) que se ejecuta en el servidor o durante la compilación. Permite definir variables locales, importar otros componentes y gestionar datos antes del renderizado.
- Documento HTML Está situado debajo del segundo bloque de guiones y define la estructura HTML que se mostrará. Si queremos inyectar Javascript en el HTML, se incluye el código entre llaves { }. Los atributos HTML usan el estándar kebab-case (ejemplo: class, data-value).
Ejemplo de un componente de Astro
Se utiliza para sustituir la sección <head> de un documento
Mostrar componente BaseHead.astro
Flujo de trabajo: importar y usar componentes
Para usar un componente dentro de una página o de otro componente, se requieren dos pasos obligatorios:
- Importarlo dentro del Frontmatter (la sección superior delimitada por ---).
- Renderizarlo en el cuerpo HTML como si fuera una etiqueta personalizada.
Ejemplo de utilización de un Componente
Hacer componentes dinámicos mediante Props
Para evitar que un componente muestre siempre el mismo texto estático, podemos pasarle información desde fuera usando Props (propiedades). El componente recibe estas variables a través del objeto global Astro.props.
Definición del componente (src/components/PostCard.astro):
Invocación con valores (src/pages/galeria.astro)
Inyección de contenido flexible con <slot />
Si no se desea pasar texto mediante variables/props, sino inyectar bloques enteros de código HTML dentro del componente, se tiene la etiqueta <slot />.
Reglas para el uso de slots
- Si solo se tiene UN <slot />, no es necesario ponerle nombre. Astro inyectará automáticamente todo el HTML que pongas entre la etiqueta de apertura y cierre del componente, directamente donde encuentre esa etiqueta.
- Si se tiene MÁS DE UN <slot /> (slots nominados o named slot), es obligatorio asignarles un nombre (name="...") a cada uno para indicarle a Astro dónde va cada bloque de contenido.
El atributo name permite identificar cada ranura o slot. Si se dejas un <slot /> sin nombre, éste actuará como la ubicación por defecto.