Écrire en Astro : la syntaxe ✍️

Aperçu

Bonjour à tous ?
Dans cet article, nous parlerons de la syntaxe Astro et de la façon dont elle est incroyablement facile à apprendre si vous êtes à l'aise avec le HTML.
Commençons ! ?

---

Astro a des expressions de type JSX ? ?

La réponse à la question est oui.
La syntaxe Astro est un « sur-ensemble » du HTML. La syntaxe a été conçue pour être familière à toute personne ayant de l'expérience en écriture HTML ou JSX, et ajoute la prise en charge de l'inclusion de composants et d'expressions JavaScript.
Si vous êtes un développeur React, vous trouverez de nombreuses similitudes lors du développement d'un projet au niveau de la syntaxe.

Variables

Vous pouvez définir des variables JavaScript locales à l'intérieur du script du composant frontmatter entre les deux barrières de code d'un composant Astro. Vous pouvez ensuite injecter ces variables dans le modèle HTML du composant.
Où avez-vous déjà vu cette pratique ? C'est vrai, JSX ! ?

---
const name = "Hugo";
---

<div>
  <h1>Hello, I'm {name}!</h1>
</div>

Attributs dynamiques

Les variables locales peuvent être utilisées entre accolades pour transmettre des valeurs aux composants créés et invoqués dans le projet.
Nous pensons que l'exemple ci-dessus est un composant générique qui prend "nom" comme accessoire :

---
const name = "Hugo";
---

<HelloComponent name={name} />

Il n'est pas possible de transmettre des fonctions et des objets aux éléments HTML, car les attributs HTML seront convertis en chaînes.
Par exemple :

---
function handleClick () {
    console.log("button clicked!");
}
---
<!-- ❌ This doesn't work! ❌ -->
<button onClick={handleClick}>Click me!</button>

Si vous souhaitez utiliser un script côté client pour ajouter le gestionnaire d'événements, vous devrez utiliser du JavaScript Vanilla comme ceci :

<button>

<h2>
  
  
  Dynamic HTML
</h2>

<p>It is possible generate dynamic HTML with JavaScript function like JSX, in this way for example:<br>
</p>
<pre class="brush:php;toolbar:false">---
const languages = ["Python", "JavaScript", "C#"];
---
&lt;ul&gt;
  {languages.map((lang) =&gt; (
    &lt;li&gt;{lang}&lt;/li&gt;
  ))}
&lt;/ul&gt;

Astro peut afficher du HTML de manière conditionnelle à l'aide d'opérateurs logiques JSX et d'expressions ternaires, de cette manière :

---
const visible = true;
---
{visible && <p>Show me!</p>}

{visible ? <p>Show me!</p> : <p>Else show me!</p>}

Balises dynamiques

C'est une fonctionnalité intéressante : Astro offre la possibilité d'attribuer une balise HTML ou même un composant à une variable :

---
import HelloComponent from "./HelloComponent.astro";

const Title = 'h1'
const Component = HelloComponent;
---
<Title>Hello!</Title>
<Component />

Cependant, trois points doivent être pris en compte lors de l'utilisation de balises dynamiques :

• Les noms de variables doivent être en majuscule. Par exemple, utilisez Title, pas title : Astro essaiera de restituer le nom de votre variable sous la forme d'une balise HTML littérale.

• Les directives d'hydratation ne sont pas prises en charge. Lors de l'utilisation des 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 definition:vars n'est pas prise en charge. Si vous ne pouvez pas envelopper les enfants avec un élément supplémentaire, vous pouvez alors ajouter manuellement un à votre élément (titre dans l'exemple ci-dessus).

Fragments

Astro prend en charge <></> notation comme la syntaxe de JSX pour envelopper n'importe quel élément et fournit également un <Fragment /> composant pour utiliser les directives set:* pour injecter une chaîne HTML.

Syntaxe Astro vs JSX

Comme mentionné au début, la syntaxe Astro est un sur-ensemble du HTML : elle a été conçue pour être familière à toute personne connaissant HTML ou JSX.
Mais il existe quelques différences clés entre les fichiers .astro et JSX.

• Attributs : dans Astro, vous utilisez le format standard kebab-case pour tous les attributs HTML au lieu du camelCase utilisé dans JSX et cela fonctionne même pour la classe, qui n'est pas supportée par React.

• Éléments multiples : le modèle de composant Astro peut restituer plusieurs éléments sans avoir besoin de tout envelopper dans un seul <div> ou <>.

• Commentaires : les commentaires HTML et JavaScript sont pris en charge.

---

Conclusion

La syntaxe d'Astro est un super ensemble de HTML, qui permet aux développeurs frontend de toutes sortes de travailler comme s'ils utilisaient HTML ou JSX.
C'est incroyable, et maintenant...

Bon codage !✨

---

Salut ??
Je m'appelle Domenico, développeur logiciel passionné du framework Vue.js, j'écris un article à ce sujet pour partager mes connaissances et mon expérience.
N'oubliez pas de visiter mon Linktree pour découvrir mes projets ??

Linktree : https://linktr.ee/domenicotenace

Suivez-moi sur dev.to pour d'autres articles ??

Domenico TenaceSuivez

Passionné par le monde informatique et tout ce qui s'y rapporte ✌ ? Passionné de Vue et de l'Open Source ?

Si vous aimez mon contenu ou souhaitez soutenir mon travail sur GitHub, vous pouvez me soutenir avec un tout petit don.
Je vous serais reconnaissant ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!