Components & Templating

จาก “component คืออะไร” ไปสู่ “เขียนยังไง”

โมดูล Foundations ให้ mental model กับคุณไปแล้ว — component .astro คือฟังก์ชันที่รับ props แล้ว render เป็น HTML บน server โมดูลนี้จะซูมเข้าไปที่ตัว ภาษา template เอง — syntax ที่คุณใช้เปลี่ยนข้อมูลให้เป็น markup, จัด style, ใส่ behavior ฝั่ง browser นิดหน่อย และประกอบ component เข้าด้วยกัน

ไม่มีอะไรในนี้ที่ hydrate หรือส่ง framework ลง browser เลย นั่นเป็นเรื่องของโมดูลถัดไป (Islands) ตรงนี้เราอยู่ฝั่ง server ล้วน ๆ — expression, style, slot และ Markdown ที่ผลิต HTML ของคุณออกมา

โมดูลนี้ครอบคลุมอะไรบ้าง

บทเรียน	สิ่งที่คุณจะได้เรียน
Astro syntax deep dive	expression, conditional, loop, Fragment, `set:html`, spread attribute
Styles & scripts	scoped vs global CSS, `define:vars` และ `<script>` ทำงานยังไงจริง ๆ
Slots & composition	named slot, fallback content, เช็ค slot, สร้าง layout
Markdown & MDX	หน้า Markdown, ใส่ layout และการใช้ component ใน `.mdx`

flowchart LR
  data["props and data"] --> tmpl["template: expressions, loops, slots"]
  css["scoped styles"] --> tmpl
  tmpl --> html["rendered HTML plus scoped CSS"]
  html --> ship["shipped to the browser, zero JS by default"]

อะไรที่เปลี่ยน template ของคุณเป็น HTML ที่ส่งออกไป

เส้นเรื่องหลัก

ทุกฟีเจอร์ในโมดูลนี้คือวิธีอธิบาย HTML ให้แสดงออกได้มากขึ้น โดยยังรักษาสัญญา zero-JS-by-default ไว้ expression กับ loop ให้ข้อมูลขับ markup ได้ scoped style เก็บ CSS ไว้เฉพาะที่โดยไม่ต้องพิธีรีตอง slot ให้ component ห่อ content ที่ยังไม่รู้ล่วงหน้าได้ และ Markdown/MDX ให้คุณเขียน content เป็นร้อยแก้วแต่ยังหย่อน component ลงไปตรงที่ต้องการได้