Como crear una página con Astro

¿Qué es Astro?

Astro es un framework moderno para construir sitios web rápidos y ligeros, optimizado para contenido estático. Combina las mejores características de otros frameworks (como React, Vue o Svelte) pero con un enfoque único en la generación de páginas estáticas que cargan rápidamente y minimizan el uso de JavaScript en el navegador.

Características principales:

Componentes reutilizables: Compatible con múltiples frameworks (React, Vue, Svelte, etc.).
Contenido estático por defecto: Genera HTML estático para la mayoría de las páginas.
Hydration inteligente: Solo carga JavaScript cuando es necesario.

¿Cómo utilizar componentes en Astro?

Crear un componente

Crea un archivo de componente dentro de la carpeta src/components.
Ejemplo: src/components/MiComponente.astro.

---
// Puedes usar lógica aquí, como recibir props.
const { titulo, mensaje } = Astro.props;
---

<div>
  <h1>{titulo}</h1>
  <p>{mensaje}</p>
</div>

Importar un componente

Para usar un componente en una página o en otro componente, simplemente impórtalo:

---
import MiComponente from '../components/MiComponente.astro';
---

<MiComponente titulo="Hola Mundo" mensaje="Este es un componente de Astro." />

¿Cómo usar Layouts en Astro?

Crear un Layout

Los layouts son plantillas que permiten estructurar páginas compartiendo un diseño común, como un encabezado, barra de navegación y pie de página.

Crea un archivo en src/layouts.
Ejemplo: src/layouts/DefaultLayout.astro.

---
// Props que recibirá el Layout
const { title } = Astro.props;
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <header>
      <h1>Mi Sitio Web</h1>
    </header>
    <main>
      <slot />
      {/* Esto renderiza el contenido de la página */}
    </main>
    <footer>
      <p>Todos los derechos reservados © 2024</p>
    </footer>
  </body>
</html>

Usar un Layout en una página

En una página de tu proyecto (por ejemplo, src/pages/index.astro):

---
import DefaultLayout from '../layouts/DefaultLayout.astro';
---

<DefaultLayout title="Inicio">
  <h2>Bienvenido a mi sitio web</h2>
  <p>Esta es la página de inicio.</p>
</DefaultLayout>

Usar el mismo Layout en diferentes páginas

Crea tus páginas en src/pages y sigue la misma estructura para importarlo:

Ejemplo: `src/pages/acerca.astro`

---
import DefaultLayout from '../layouts/DefaultLayout.astro';
---

<DefaultLayout title="Acerca de Nosotros">
  <h2>Sobre Nosotros</h2>
  <p>Esta página habla sobre nuestro equipo.</p>
</DefaultLayout>

Ejemplo: `src/pages/contacto.astro`

---
import DefaultLayout from '../layouts/DefaultLayout.astro';
---

<DefaultLayout title="Contacto">
  <h2>Contáctanos</h2>
  <p>Envíanos tus comentarios.</p>
</DefaultLayout>

Así puedes reutilizar el mismo Layout en todas tus páginas, manteniendo consistencia en el diseño y optimizando el flujo de trabajo.

Conclusión

Astro facilita la construcción de sitios web rápidos y reutilizables gracias a su estructura de componentes y layouts. Su flexibilidad para integrar múltiples frameworks lo convierte en una excelente opción para desarrolladores modernos.

ℹ️ INFO

Parte del contenido de este artículo fue generado por IA.

Compartir