Saltearse al contenido

Sintaxis de Astro

Si sabes HTML, ya sabes lo suficiente para escribir tu primer componente de Astro.

La sintaxis de componentes Astro es un superconjunto de HTML. La sintaxis fue diseñada para que resulte familiar a cualquiera que tenga experiencia escribiendo HTML o JSX, y añade soporte para incluir componentes y expresiones JavaScript.

Puedes definir variables JavaScript locales dentro del script del componente frontmatter entre las dos separadores de código (---) de un componente Astro. A continuación, puedes inyectar estas variables en la plantilla HTML del componente utilizando expresiones similares a JSX.

Las variables locales pueden añadirse al HTML utilizando la sintaxis de llaves:

src/components/Variables.astro
---
const nombre = "Astro";
---
<div>
<h1>Hola {nombre}!</h1> <!-- Salidas <h1>Hola Astro!</h1> -->
</div>

Las variables locales pueden utilizarse entre llaves para pasar valores de atributos tanto a elementos HTML como a componentes:

src/components/DynamicAttributes.astro
---
const nombre = "Astro";
---
<h1 class={nombre}>Se admiten expresiones de atributos</h1>
<MyComponent templateLiteralNameAttribute={`MiNombreEs${nombre}`} />

Las variables locales pueden utilizarse en funciones similares a JSX para producir elementos HTML generados dinámicamente:

src/components/DynamicHtml.astro
---
const items = ["Perro", "Gato", "Ornitorrinco"];
---
<ul>
{items.map((item) => (
<li>{item}</li>
))}
</ul>

Astro puede mostrar HTML condicionalmente utilizando operadores lógicos JSX y expresiones ternarias.

src/components/ConditionalHtml.astro
---
const visible = true;
---
{visible && <p>¡Muéstramelo!</p>}
{visible ? <p>¡Muéstramelo!</p> : <p>¡Si no, muéstramelo!</p>}

También puedes utilizar etiquetas dinámicas estableciendo una variable en el nombre de una etiqueta HTML o en la importación de un componente:

src/components/DynamicTags.astro
---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>Hola!</Element> <!-- se representa como <div>Hola!</div> -->
<Component /> <!-- se representa como <MyComponent /> -->

Al utilizar etiquetas dinámicas:

  • Los nombres de las variables deben ir en mayúsculas. Por ejemplo, usa Elemento, no elemento. De lo contrario, Astro intentará representar el nombre de la variable como una etiqueta HTML literal.

  • No se admiten directivas de hidratación. Cuando se usan las directivas client:* de hidratación, Astro necesita saber qué componentes empaquetar para producción, y el patrón de etiquetas dinámicas impide que esto funcione.

  • La directiva define:vars no está soportada. Si no puedes envolver los hijos con un elemento adicional (por ejemplo, <div>), entonces puedes añadir manualmente un style={``--myVar:${value}``} a tu Elemento.

Astro admite el uso de <Fragment> </Fragment> o la forma abreviada <> </>.

Los fragments pueden ser útiles para evitar elementos envolventes al agregar directivas set:*, como en el siguiente ejemplo:

src/components/SetHtml.astro
---
const htmlString = '<p>Contenido HTML sin procesar</p>';
---
<Fragment set:html={htmlString} />

La sintaxis de los componentes de Astro es un superconjunto de HTML. Se ha diseñado para que resulte familiar a cualquier persona con experiencia en HTML o JSX, pero hay un par de diferencias clave entre los archivos .astro y JSX.

En Astro, se utiliza el formato estándar kebab-case para todos los atributos HTML en lugar del camelCase utilizado en JSX. Esto funciona incluso para class, que no está soportado por React.

ejemplo.astro
<div className="box" dataValue="3" />
<div class="box" data-value="3" />

Una plantilla de componente en Astro puede renderizar múltiples elementos sin necesidad de envolver todo en un solo <div> o <>, a diferencia de JavaScript o JSX.

src/components/RootElements.astro
---
// Una plantilla con múltiples elementos
---
<p>No es necesario envolver los elementos en un único elemento contenedor.</p>
<p>Astro admite múltiples elementos raíz en una plantilla.</p>

En Astro, puedes utilizar comentarios HTML estándar o comentarios de estilo JavaScript.

ejemplo.astro
---
---
<!-- La sintaxis de los comentarios HTML es válida en los archivos .astro -->
{/* La sintaxis de los comentarios JS también es válida */}