Ya hemos instalado Astro y visto las carpetas que componen un proyecto. Ahora vamos a “abrir el capó” y aprender a escribir código en Astro.
Como en muchos frameworks, la unidad básica de construcción en Astro es el componente (en este caso, archivos con extensión .astro).
La sintaxis te va a resultar sospechosamente familiar. Si sabes HTML y un poco de JavaScript, ya sabes un 90% de Astro. Sin embargo, tiene sus propias reglas que debemos conocer.
Un componente Astro se divide en dos partes:
- El Script del Componente (Frontmatter o Code Fence)
- La Plantilla del Componente (HTML).
Los componentes .astro son un lenguaje de plantillas exclusivo. No se pueden usar en otros frameworks como React o Vue, pero sí pueden contener componentes de esos frameworks.
El Frontmatter
En la parte superior de un archivo .astro, verás un bloque delimitado por tres guiones ---. Esto es lo que llamamos el Frontmatter del componente o Code Fence.
---
// Todo esto es JavaScript (o TypeScript)
// Se ejecuta en el SERVIDOR o en tiempo de BUILD.
const titulo = "Hola Astro";
const numero = 42;
console.log("Esto sale en la terminal del servidor, NO en el navegador");
---
Aquí es donde escribimos la lógica necesaria para preparar nuestra plantilla.
Características clave del Code Fence:
- Ejecución en Servidor: El código que escribas aquí NUNCA llega al navegador del usuario. Astro lo ejecuta, genera el HTML resultante y tira el código a la basura.
- Seguridad: Como no viaja al cliente, puedes usar variables de entorno secretas (API KEYS, contraseñas de base de datos) de forma segura.
- Imports: Aquí importaremos otros componentes, datos JSON o funciones.
---
import Header from '../components/Header.astro';
import { obtenerDatos } from '../lib/api';
const datos = await obtenerDatos(); // ¡Soporta top-level await!
---
¿Ves ese await fuera de una función async? Astro soporta Top-Level Await por defecto en el frontmatter. Es comodísimo para fetchear datos.
La plantilla del componente
Debajo del segundo conjunto de guiones --- está la plantilla. Aquí definimos el HTML que se renderizará.
A diferencia de un HTML estático, aquí podemos usar lógica de JavaScript directamente en el HTML para renderizar contenido condicional o listas.
Si vienes de React, te sentirás como en casa porque usa una sintaxis JSX-like (parecida a JSX).
Si vienes de HTML puro tampoco te costará mucho, porque al final no deja de ser un superconjunto de HTML.
Inyección de variables
Podemos inyectar cualquier variable definida en el Code Fence usando llaves {}.
---
const nombre = "Luis";
---
<h1>Hola, {nombre}</h1>
Renderizado condicional
No usamos v-if (Vue) ni *ngIf (Angular). Usamos lógica JavaScript estándar.
Operador lógico AND (&&): Útil para mostrar algo si una condición es verdadera.
---
const esVisible = true;
---
{esVisible && <p>Este mensaje se ve.</p>}
Operador Ternario: Útil para mostrar una cosa u otra.
---
const usuarioLogueado = false;
---
{usuarioLogueado ? <button>Salir</button> : <button>Entrar</button>}
Renderizado de Listas
Para repetir elementos, usamos la función .map() de los arrays de JavaScript.
---
const tecnologias = ['Astro', 'React', 'TypeScript'];
---
<ul>
{tecnologias.map((tec) => (
<li>{tec}</li>
))}
</ul>
A diferencia de React, en Astro no es estrictamente obligatorio usar la prop key en las listas, aunque sigue siendo una buena práctica si vas a manipular el DOM posteriormente.
Atributos
Al igual que en HTML, podemos pasar atributos a las etiquetas.
<div id="contenedor" data-tipo="principal">...</div>
Pero también podemos pasar atributos dinámicos:
---
const claseDinamica = "rojo";
const imagen = "/img/foto.png";
---
<img src={imagen} class={claseDinamica} />
Diferencias con HTML estándar y JSX de React
Aunque se parece mucho, hay matices importantes que nos facilitan la vida.
class vs className
Si vienes de React, sabrás que class es una palabra reservada y tienes que usar className.
En Astro usamos class, igual que en HTML estándar (¡por fin!).
<div class="mi-clase">Correcto en Astro</div>
Fragmentos
En Astro no necesitas envolver todo en un solo <div> padre. Un componente puede devolver múltiples elementos raíz.
---
// Componente Header.astro
---
<h1>Título</h1>
<p>Subtítulo</p>
Comentarios
Dentro de la plantilla puedes usar comentarios HTML estándar, pero cuidado: estos sí llegan al navegador.
Si quieres poner comentarios que no se vean en el código fuente final (para notas de desarrollo), usa la sintaxis de JS dentro de llaves:
{/* Este comentario es solo para ti, se elimina al compilar */}
La etiqueta <style> y <script>
En Astro, si pones una etiqueta <style> dentro del componente, los estilos son Scoped (locales) por defecto.
No afectarán a otros componentes. Lo mismo ocurre con <script>.
