Schreiben Sie in Astro: die Syntax ✍️

Überblick

Hallo zusammen?
In diesem Artikel sprechen wir über die Astro-Syntax und wie unglaublich einfach sie zu erlernen ist, wenn Sie mit HTML vertraut sind.
Fangen wir an! ?

---

Hat Astro JSX-ähnliche Ausdrücke? ?

Die Antwort auf die Frage lautet Ja.
Die Astro-Syntax ist eine „Obermenge“ von HTML. Die Syntax wurde so gestaltet, dass sie jedem vertraut erscheint, der Erfahrung mit dem Schreiben von HTML oder JSX hat, und bietet Unterstützung für die Einbindung von Komponenten und JavaScript-Ausdrücken.
Wenn Sie ein React-Entwickler sind, werden Sie bei der Entwicklung eines Projekts viele Ähnlichkeiten in der Syntax feststellen.

Variablen

Sie können lokale JavaScript-Variablen innerhalb des Frontmatter-Komponentenskripts zwischen den beiden Code-Fences einer Astro-Komponente definieren. Sie können diese Variablen dann in die HTML-Vorlage der Komponente einfügen.
Wo haben Sie diese Praxis schon einmal gesehen? Genau, JSX! ?

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

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

Dynamische Attribute

Lokale Variablen können in geschweiften Klammern verwendet werden, um Werte an Komponenten zu übergeben, die im Projekt erstellt und aufgerufen werden.
Wir glauben, dass es sich bei dem obigen Beispiel um eine generische Komponente handelt, die „Name“ als Requisiten verwendet:

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

<HelloComponent name={name} />

Es ist nicht möglich, Funktionen und Objekte an HTML-Elemente zu übergeben, da HTML-Attribute in Strings umgewandelt werden.
Zum Beispiel:

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

Wenn Sie ein clientseitiges Skript zum Hinzufügen des Ereignishandlers verwenden möchten, müssen Sie Vanilla-JavaScript wie folgt verwenden:

<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#"];
---
<ul>
  {languages.map((lang) => (
    <li>{lang}</li>
  ))}
</ul>

Astro kann HTML mithilfe logischer JSX-Operatoren und ternärer Ausdrücke auf folgende Weise bedingt anzeigen:

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

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

Dynamische Tags

Das ist eine tolle Funktion: Astro bietet die Möglichkeit, einer Variablen ein HTML-Tag oder sogar eine Komponente zuzuweisen:

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

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

Bei der Verwendung dynamischer Tags müssen jedoch drei Punkte beachtet werden:

• Variablennamen müssen großgeschrieben werden. Verwenden Sie beispielsweise „Titel“ und nicht „Titel“: Astro wird versuchen, Ihren Variablennamen als wörtliches HTML-Tag darzustellen.

• Hydrationsanweisungen werden nicht unterstützt. Bei Verwendung von client:*-Hydrationsanweisungen muss Astro wissen, welche Komponenten für die Produktion gebündelt werden müssen, und das dynamische Tag-Muster verhindert, dass dies funktioniert.

• Die Anweisung define:vars wird nicht unterstützt. Wenn Sie die untergeordneten Elemente nicht mit einem zusätzlichen Element umschließen können, können Sie manuell ein zu Ihrem Element hinzufügen (Titel im Beispiel oben).

Fragmente

Astro unterstützt <> Notation wie die JSX-Syntax zum Umschließen jedes Elements und bietet außerdem eine integrierte Komponente zur Verwendung von set:*-Direktiven zum Einfügen einer HTML-Zeichenfolge.

Astro-Syntax vs. JSX

Wie eingangs erwähnt ist die Astro-Syntax eine Obermenge von HTML: Sie wurde so konzipiert, dass sie für jeden mit HTML oder JSX vertraut ist.
Es gibt jedoch einige wesentliche Unterschiede zwischen .astro-Dateien und JSX.

• Attribute: In Astro verwenden Sie das Standard-Kebab-Case-Format für alle HTML-Attribute anstelle des in JSX verwendeten CamelCase und dies funktioniert sogar für Klassen, die von React nicht unterstützt werden.

• Mehrere Elemente: Die Astro-Komponentenvorlage kann mehrere Elemente rendern, ohne dass alles in einem einzigen

  verpackt werden muss. oder <>.

• Kommentare: Es werden sowohl HTML- als auch JavaScript-Kommentare unterstützt.

---

Abschluss

Astros Syntax ist ein Super-HTML-Satz, der es Frontend-Entwicklern aller Art ermöglicht, so zu arbeiten, als würden sie HTML oder JSX verwenden.
Es ist erstaunlich, und jetzt...

Viel Spaß beim Codieren!✨

---

Hallo??
Mein Name ist Domenico, Softwareentwickler mit Leidenschaft für das Vue.js-Framework. Ich schreibe einen Artikel darüber, um mein Wissen und meine Erfahrung zu teilen.
Vergessen Sie nicht, meinen Linktree zu besuchen, um meine Projekte zu entdecken ??

Linktree: https://linktr.ee/domenicotenace

Folgen Sie mir auf dev.to für weitere Artikel ??

Domenico TenaceFolgen

Leidenschaft für die IT-Welt und alles, was damit zusammenhängt ✌? Vue- und Open-Source-begeistert?

Wenn Ihnen meine Inhalte gefallen oder Sie meine Arbeit auf GitHub unterstützen möchten, können Sie mich mit einer ganz kleinen Spende unterstützen.
Ich wäre Ihnen dankbar?

Das obige ist der detaillierte Inhalt vonSchreiben Sie in Astro: die Syntax ✍️. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!