Separar tu interfaz en componentes reutilizables es uno de los pasos más importantes cuando trabajas con Astro. Aprenderás a crear componentes en Astro partiendo del archivo index.astro, identificando qué fragmentos pueden vivir por separado y cómo pasar datos entre ellos con TypeScript.

¿Qué partes del proyecto se pueden convertir en componentes?

Antes de escribir código nuevo conviene mirar lo que ya tienes. Dentro de pages/index.astro encuentras varios bloques que cumplen funciones distintas: el H1 superior, el mensaje con instrucciones y la tarjeta inferior. Cada uno puede vivir como un componente independiente.

En Astro, casi cualquier elemento que construyas puede tratarse como componente, incluido el propio layout, que funciona como plantilla y que más adelante revelará su verdadera ventaja. Por ahora, identifica dos candidatos claros: un header con el título y un hero con el texto de instrucciones.

¿Qué es un componente en Astro? Es un archivo .astro con tres zonas: lógica en JavaScript o TypeScript arriba, marcado HTML en el medio y estilos encapsulados con la etiqueta <style>. Esos estilos solo afectan al componente.

¿Cómo construir el componente header con props tipadas?

Crea un nuevo archivo llamado header.astro. La estructura empieza con tres guiones (---) que abren el bloque de lógica donde puedes declarar tipos, importar utilidades o leer las props que llegan desde fuera [00:54].

Dentro de ese bloque defines una interfaz con TypeScript para tipar las props. Así sabes exactamente qué espera recibir tu componente:

astro

export interface Props { title: string; }

const { title } = Astro.props;

<h1>{title}</h1> <style> /* gradiente y estilos del h1 movidos desde index.astro */ </style>

El flujo es claro:

• Declaras la interfaz Props con title de tipo string.
• Extraes el valor con const { title } = Astro.props.
• Mueves el H1 original y sus estilos (gradiente incluido) desde index.astro al nuevo archivo.
• Reemplazas el texto fijo por la variable {title} para que sea dinámico.

Con Prettier puedes ordenar la indentación al guardar, lo que mantiene legible la separación entre lógica, marcado y estilos.

¿Cuándo conviene un componente sin lógica como hero?

No todos los componentes necesitan TypeScript ni props. El segundo bloque del proyecto, el párrafo con instrucciones, es puramente presentacional. Ahí creas hero.astro y omites el bloque de lógica.

¿Qué es un componente presentacional? Es un componente que solo contiene HTML y estilos, sin JavaScript ni props. Se usa para fragmentos visuales fijos que no cambian según datos externos.

El proceso es directo:

1. Copias la etiqueta <p> con el contenido del hero desde index.astro.
2. Cortas la clase de estilos asociada y la pegas dentro de <style> en el nuevo archivo.
3. Importas el componente en index.astro y lo usas como <Hero />, sin pasar props.

Al encapsular los estilos dentro del propio componente, evitas que se filtren al resto del proyecto. Esa es una de las razones por las que Astro resulta cómodo para mantener proyectos grandes: cada componente carga lo suyo.

¿Cómo queda el index.astro después de la separación?

Después de extraer el header y el hero, tu index.astro queda mucho más limpio. Solo importa los componentes y los compone dentro del layout, pasando el title cuando sea necesario:

astro

import Header from '../components/header.astro'; import Hero from '../components/hero.astro'; import Card from '../components/card.astro';

<Header title="Tu título aquí" /> <Hero /> <Card />

Al revisar el navegador comprobarás que el header, el hero y la card que ya venías trabajando funcionan igual que antes, pero ahora cada uno vive en su propio archivo y puede reutilizarse en otras páginas.

Esta lógica de partir interfaces en piezas pequeñas es la base de cualquier proyecto escalable en Astro. ¿Qué otro bloque de tu index.astro convertirías en componente y por qué? Cuéntalo en los comentarios.