CodeAventura
Astro
▸Bienvenido a Astro▸Anatomía de un archivo .astro

Misión

●iniciando…
Astro
Preparando entorno

Esto solo ocurre la primera vez que abres el curso.

02 / 22Anatomía de un archivo .astro
Anterior

Anatomía de un archivo .astro

Las tres zonas

Un archivo .astro tiene siempre la misma estructura:

---
import Card from '../components/Card.astro';
const nombre = 'Ada';
const items = ['pan', 'leche'];
---
 
<h1>Hola, {nombre}</h1>
<ul>
  {items.map(i => <li>{i}</li>)}
</ul>
<Card />
 
<style>
  h1 { color: rebeccapurple; }
</style>
Template HTML

HTML real con expresiones {} para inyectar valores del frontmatter. Es lo que se entrega al navegador.

Pasa el ratón por las líneas para explorar cada zona.

El frontmatter no es para variables: es para todo

Lo que pongas entre los --- se ejecuta una sola vez, en el servidor o durante el build, antes de generar el HTML. Eso significa que puedes:

  • Declarar constantes y funciones
  • Importar componentes y módulos
  • Hacer await fetch(...) y leer ficheros del disco
  • Usar TypeScript (incluyendo interface para tus props)

El cliente nunca ve este código. Es como un mini servidor encima de cada componente.

Las llaves {} son tus expresiones

Dentro del HTML, cualquier cosa entre {} es una expresión JavaScript. Puedes meter:

  • Variables: {nombre}
  • Operaciones: {2 + 2}
  • Acceso a propiedades: {usuario.email}
  • Llamadas: {nombre.toUpperCase()}
  • Condicionales y maps (lo veremos pronto)

Los atributos también aceptan expresiones

¿Y los estilos?

El bloque <style> se aplica solo a este archivo (lo veremos en la próxima lección con detalle). Lo importante es que no necesitas CSS modules ni archivos externos para empezar.

Diferencia clave con JSX

Astro no es JSX. Algunas diferencias prácticas:

JSXAstro
className="..."class="..."
htmlFor="..."for="..."
Props camelCaseAtributos HTML normales
Self-closing obligatorio (<br />)También vale <br>

Es HTML real con expresiones. Si dudas, escribe HTML.

Tu desafío 🚀

En el editor tienes una página con dos huecos en el HTML que muestran { /* ... */ }. Ese /* ... */ es un comentario JS dentro de la expresión y por eso no imprime nada.

  1. En el frontmatter, declara const nombre = "TuNombre"
  2. Declara también const edad = 25 (o el número que quieras)
  3. Sustituye los comentarios por las expresiones {nombre} y {edad}
  4. Bonus: añade {2025 - edad} para mostrar tu año de nacimiento

El código del frontmatter solo se ejecuta una vez al construir el sitio. Cuando un visitante reciba esta página, ya verá <h1>Hola, soy TuNombre</h1> en HTML puro.