Components & Templating

ใน React ทุก component คือ function ที่ return JSX ออกมา ส่วนใน Svelte ทุก component คือ ไฟล์ .svelte ที่รวม script, markup และ styles ไว้ในรูปแบบเดียวที่หน้าตาคล้าย HTML ที่เราคุ้นเคย ไม่ต้องมี JSX ไม่ต้องมี className และไม่ต้องแยกไฟล์ CSS ออกไปต่างหาก

โมดูลนี้จะพาคุณไปรู้จักกับ building block หลัก ๆ ดังนี้:

บทเรียน	แนวคิด
หน้านี้	โครงสร้างไฟล์ .svelte เทียบกับ React function component
Props	rune $props() เทียบกับการ destructure props ของ React
Template blocks	{#if}, {#each}, {#await} เทียบกับ ternary และ .map() ใน JSX
Events	onclick={fn} เทียบกับ onClick={fn}
Snippets & children	{#snippet} / {@render} เทียบกับ children ของ React
Bindings	bind:value เทียบกับ controlled input
Styles	<style> แบบ scoped เทียบกับ CSS Modules / CSS-in-JS

ไฟล์ .svelte มีสามส่วน

flowchart TB
  file([".svelte file"])
  file --> script["<script> — component logic (JS/TS, runes)"]
  file --> markup["markup — HTML template (no JSX, no return)"]
  file --> style["<style> — scoped CSS (auto-scoped to this component)"]

The three sections of a .svelte file

มีแค่ส่วน markup เท่านั้นที่จำเป็นต้องมี ส่วน <script> และ <style> นั้น optional

React component เทียบกับ Svelte component

React

// Greeting.jsx
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}
export default Greeting;

Svelte

<!-- Greeting.svelte -->
<script>
  let { name } = $props();
</script>

<h1>Hello, {name}!</h1>

markup ในไฟล์ .svelte คือเนื้อหาทั้งหมดของไฟล์ — ไม่มี statement return, ไม่มีวงเล็บ, ไม่มี JSX pragma

ลองเล่น: Svelte 5 component ตัวแรกของคุณ

SvelteOpen in Svelte Playground ↗ (copies code)

<script> let name = $state('React developer'); </script> <h2>Hello, {name}!</h2> <input bind:value={name} placeholder="Type your name" /> <style> h2 { color: #FF3E00; } input { margin-top: 0.5rem; padding: 0.25rem 0.5rem; } </style>

🔀 React component vs Svelte component

• React: เป็น function ที่ return JSX ออกมา ต้อง import React (หรือใช้ JSX transform)
• Svelte: เป็น ไฟล์ .svelte ตัว markup คือ template เลย — ไม่มี return, ไม่มี JSX
• React: ใส่ CSS ผ่าน CSS Modules, Styled Components หรือ className
• Svelte: บล็อก <style> ถูก scope ให้ component นี้โดยอัตโนมัติ
• React: export default function MyComponent
• Svelte: ตัวไฟล์เอง คือ export อยู่แล้ว — ไม่ต้องมี export default

logic ของ component อยู่ตรงไหนในไฟล์ Svelte?

อยู่ในบล็อก <script> อยู่ใน statement return() อยู่ในไฟล์ .ts แยกต่างหาก อยู่ในวงเล็บปีกกาของ JSX

styles ถูก scope อย่างไรใน Svelte component?

คุณต้อง import CSS module เพิ่ม Svelte scope <style> ให้ component โดยอัตโนมัติ คุณต้องใช้ styled-components คุณต้องเพิ่ม className ที่ไม่ซ้ำกันเอง

rune ตัวไหนของ Svelte 5 ที่ใช้อ่าน props ที่รับเข้ามา?

$state() $effect() $props() $derived()

Submit

Mark as complete