Tu primer componente .astro

¿Qué es un componente en Astro?

Un componente .astro es exactamente lo mismo que una página .astro: frontmatter más HTML. La única diferencia es dónde lo guardas:

• src/pages/ → se convierte en una URL
• src/components/ → se importa desde otros archivos

Por convención, los nombres de componentes empiezan en mayúscula: Card.astro, Button.astro, Header.astro.

Crear un componente

Un componente es un trozo reutilizable de UI. Aquí, una Card simple:

Sin ceremonia: lo que ves es lo que renderizará.

Usarlo en una página

Para usarlo, lo importas en el frontmatter de otro .astro y lo metes en el HTML como si fuese una etiqueta más:

Así, sin más. Los componentes Astro:

• Se importan con la ruta relativa completa, incluyendo la extensión .astro
• Empiezan en mayúscula cuando los usas
• Pueden auto-cerrarse (<Card />) o tener contenido (lo veremos con slots)

Componentes dentro de componentes

Un componente puede importar y usar otros. La composición es tu superpoder: piensa en piezas pequeñas que se ensamblan.

Estilos de un componente

Cada componente puede llevar su <style> scoped. Como vimos en la lección anterior, sus reglas no se filtran al resto del sitio.

Tu desafío 🚀

En el editor tienes:

1. src/components/Card.astro (vacío)
2. src/pages/index.astro (con tu lista de tarjetas)

Tu trabajo:

• Rellena Card.astro con un <article> que contenga al menos un <h2> (con un título cualquiera) y un <p> (con descripción).
• En index.astro:
  • Importa Card desde ../components/Card.astro en el frontmatter.
  • Úsalo dentro del <body> al menos dos veces, como <Card /> o <Card></Card>.

Cuando funcione, verás varias tarjetas idénticas. En la siguiente lección haremos que cada una tenga su contenido propio.