Aller au contenu

Syntaxe d'Astro

Si vous connaissez le HTML, vous en savez déjà assez pour écrire votre premier composant Astro.

La syntaxe des composants Astro est un surensemble de HTML. Elle a été conçue pour être familière à toute personne ayant l’habitude d’écrire du HTML ou du JSX, et elle permet d’inclure des composants et des expressions JavaScript.

Vous pouvez définir des variables JavaScript locales à l’intérieur du script du composant frontmatter, entre les deux séparations de code (---) d’un composant Astro.

Des variables locales peuvent être ajoutées dans le HTML en utilisant la syntaxe des accolades :

src/components/Variables.astro
---
const name = "Astro";
---
<div>
<h1>Bonjour {name}!</h1> <!-- Affichera <h1>Bonjour Astro!</h1> -->
</div>

Les variables locales peuvent être utilisées entre accolades pour transmettre des valeurs d’attribut aux éléments HTML et aux composants :

src/components/DynamicAttributes.astro
---
const name = "Astro";
---
<h1 class={name}>Les expressions d'attributs sont supportées</h1>
<MyComponent templateLiteralNameAttribute={`MonNomEst${name}`} />

Les variables locales peuvent être utilisées dans des fonctions de type JSX pour produire des éléments HTML générés dynamiquement :

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

Astro peut afficher conditionnellement du HTML à l’aide d’opérateurs logiques JSX et d’expressions ternaires.

src/components/ConditionalHtml.astro
---
const visible = true;
---
{visible && <p>Montre moi !</p>}
{visible ? <p>Montre moi !</p> : <p>Sinon montre moi !</p>}

Vous pouvez également utiliser des balises dynamiques, en affectant à une variable le nom d’une balise HTML ou un composant importé :

src/components/DynamicTags.astro
---
import MyComponent from "./MyComponent.astro";
const Element = 'div'
const Component = MyComponent;
---
<Element>Hello!</Element> <!-- s'affiche comme <div>Hello!</div> -->
<Component /> <!-- s'affiche comme <MyComponent /> -->

Lors de l’utilisation de balises dynamiques :

  • Les noms de variables doivent commencer par une lettre majuscules. Par exemple, utilisez Element, et non element. Sinon, Astro essaiera de restituer le nom de votre variable sous la forme d’une balise HTML native.

  • Les directives d’hydratation ne sont pas prises en charge. Lorsque vous utilisez les directives d’hydratation client:*, Astro doit savoir quels composants regrouper pour la production, et le modèle de balise dynamique empêche cela de fonctionner.

  • La directive define:vars n’est pas supportée. Si vous ne pouvez pas envelopper votre balise dans un élément conteneur (ex. <div>), alors vous pouvez ajouter style={``--maVariable:${valeur}``} à votre balise.

Astro permet d’utiliser soit <Fragment> </Fragment>, soit l’abréviation <> </>.

Les Fragments peuvent aussi être utiles pour éviter d’utiliser des éléments conteneurs lors de l’ajout de directives set:*, comme dans l’exemple suivant :

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

La syntaxe des composants Astro est un sur-ensemble du HTML. Elle a été conçue pour être familière à toute personne ayant une expérience avec le HTML ou le JSX, mais il existe quelques différences clés entre les fichiers .astro et le JSX.

Dans Astro, vous utilisez le format standard kebab-case pour tous les attributs HTML au lieu du camelCase utilisé dans le JSX. Cela fonctionne même pour class, qui n’est pas pris en charge par React.

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

Contrairement au JavaScript et au JSX, un composant Astro peut afficher plusieurs éléments sans avoir besoin d’envelopper l’ensemble dans une <div> ou <>.

src/components/RootElements.astro
---
// Template avec plusieurs éléments
---
<p>Pas besoin d'envelopper les éléments dans un élément conteneur.</p>
<p>Astro supporte plusieurs éléments racine dans un template</p>

Avec Astro, vous pouvez utiliser des commentaires HTML standards ou des commentaires type JavaScript.

example.astro
---
---
<!-- La syntaxe de commentaire HTML est valide dans les fichiers.astro -->
{/* La syntaxe des commentaires JS est également valide */}