Tulis dalam Astro: sintaks ✍️

Gambaran keseluruhan

Hello semua?
Dalam artikel ini, kita akan bercakap tentang sintaks Astro dan cara ia sangat mudah dipelajari jika anda selesa dengan HTML.
Mari mulakan! ?

---

Astro mempunyai ekspresi seperti JSX? ?

Jawapan kepada soalan ialah ya.
Sintaks Astro ialah "superset" HTML. Sintaks direka bentuk untuk merasa biasa kepada sesiapa sahaja yang mempunyai pengalaman menulis HTML atau JSX dan menambah sokongan untuk memasukkan komponen dan ungkapan JavaScript.
Jika anda seorang pembangun React, anda akan mendapati banyak persamaan apabila membangunkan projek pada sintaks.

Pembolehubah

Anda boleh menentukan pembolehubah JavaScript tempatan di dalam skrip komponen frontmatter antara dua pagar kod komponen Astro. Anda kemudian boleh menyuntik pembolehubah ini ke dalam templat HTML komponen.
Di mana anda pernah melihat amalan ini sebelum ini? Betul, JSX! ?

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

<div>
  <h1 id="Hello-I-m-name">Hello, I'm {name}!</h1>
</div>

Atribut Dinamik

Pembolehubah setempat boleh digunakan dalam kurungan kerinting untuk menghantar nilai kepada komponen yang dibuat dan digunakan dalam projek.
Kami berpendapat contoh di atas ialah komponen generik yang mengambil "nama" sebagai prop:

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

<hellocomponent name="{name}"></hellocomponent>

Tidak mungkin untuk menghantar fungsi dan objek kepada elemen HTML, kerana atribut HTML akan ditukar kepada rentetan.
Contohnya:

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

Jika anda mahu menggunakan skrip sebelah pelanggan untuk menambah pengendali acara, anda perlu menggunakan JavaScript vanila seperti ini:

<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#"];
---

{languages.map((lang) => (
• {lang}
))}

Astro boleh memaparkan HTML secara bersyarat menggunakan pengendali logik JSX dan ungkapan ternary, dengan cara ini:

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

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

Teg Dinamik

Ini ialah ciri yang hebat: Astro menyediakan kemungkinan untuk menetapkan teg HTML atau malah komponen kepada pembolehubah:

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

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

Walau bagaimanapun, tiga perkara mesti dipertimbangkan apabila menggunakan teg dinamik:

• Nama pembolehubah mesti menggunakan huruf besar. Contohnya, gunakan Tajuk, bukan tajuk: Astro akan cuba menjadikan nama pembolehubah anda sebagai teg HTML literal.

• Arahan penghidratan tidak disokong. Apabila menggunakan arahan penghidratan pelanggan:*, Astro perlu mengetahui komponen mana yang hendak digabungkan untuk pengeluaran dan corak teg dinamik menghalangnya daripada berfungsi.

• Arahan define:vars tidak disokong. Jika anda tidak boleh membungkus kanak-kanak dengan elemen tambahan, maka anda boleh menambah secara manual pada Elemen anda (Tajuk dalam contoh di atas).

Serpihan

Astro menyokong > tatatanda seperti sintaks JSX untuk membungkus mana-mana elemen di dalam dan juga menyediakan komponen untuk digunakan set:* arahan untuk menyuntik rentetan HTML.

Sintaks Astro lwn JSX

Seperti yang dinyatakan pada mulanya, sintaks Astro ialah superset HTML: ia direka bentuk untuk berasa biasa kepada sesiapa sahaja dengan HTML atau JSX.
Tetapi terdapat beberapa perbezaan utama antara fail .astro dan JSX.

• Atribut: di Astro, anda menggunakan format kotak kebab standard untuk semua atribut HTML dan bukannya camelCase yang digunakan dalam JSX dan ini juga berfungsi untuk kelas, yang tidak disokong oleh React.

• Berbilang Elemen: Templat komponen Astro boleh menghasilkan berbilang elemen tanpa perlu membungkus semuanya dalam satu

  atau .

• Ulasan: komen HTML dan JavaScript disokong.

---

Kesimpulan

Sintaks Astro ialah set super HTML, yang membenarkan pembangun bahagian hadapan dari semua jenis berfungsi seolah-olah mereka menggunakan HTML atau JSX.
Ia menakjubkan, dan kini...

Selamat pengekodan!✨

---

Hai??
Nama saya Domenico, pembangun perisian yang meminati rangka kerja Vue.js, saya menulis artikel mengenainya untuk berkongsi pengetahuan dan pengalaman saya.
Jangan lupa lawati Linktree saya untuk menemui projek saya ??

Linktree: https://linktr.ee/domenikotenace

Ikuti saya di dev.to untuk artikel lain ??


Domenico TenaceIkuti
Ghairah tentang dunia IT dan semua yang berkaitan dengannya ✌? Vue dan Sumber Terbuka bersemangat ?

Jika anda menyukai kandungan saya atau ingin menyokong kerja saya di GitHub, anda boleh menyokong saya dengan derma yang sangat kecil.
Saya akan berterima kasih ?