Single-File Components

ใน React “component” คือไฟล์ JavaScript ที่มีฟังก์ชัน return JSX มักจับคู่กับไฟล์ CSS แยกต่างหากหรือการตั้งค่า CSS-in-JS ใน Svelte component คือ ไฟล์ .svelte เพียงหนึ่งไฟล์ ที่รวม logic, markup และ style ไว้ในที่เดียว โครงสร้างนี้จะรู้สึกคุ้นเคยทันทีหากคุณเคยเขียน HTML ธรรมดา

สามส่วนของไฟล์

ไฟล์ .svelte มีสามส่วนที่เป็น optional เรียงตามลำดับใดก็ได้ (ตามธรรมเนียมคือ script → markup → style):

<script>
  // Component logic — reactive state, props, functions
</script>

<!-- Markup — the template, like JSX but real HTML -->

<style>
  /* Scoped CSS — automatically applies only to this component */
</style>

มีแค่ markup section เท่านั้นที่จำเป็น Svelte component ที่ valid สามารถเป็นแค่ <p>Hello</p> เพียงบรรทัดเดียวโดยไม่มี <script> หรือ <style> เลยก็ได้

ไฟล์ React vs ไฟล์ Svelte

// UserCard.jsx
import styles from './UserCard.module.css';

export default function UserCard({ name, role }) {
  return (
    <article className={styles.card}>
      <h2 className={styles.name}>{name}</h2>
      <p className={styles.role}>{role}</p>
    </article>
  );
}

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

<article class="card">
  <h2 class="name">{name}</h2>
  <p class="role">{role}</p>
</article>

<style>
  .card { border: 1px solid #ccc; border-radius: 8px; padding: 1rem; }
  .name { margin: 0; font-size: 1.25rem; }
  .role { margin: 0; color: #666; }
</style>

สังเกตความแตกต่าง:

ไม่มีไฟล์ UserCard.module.css แยก — style อยู่ในไฟล์เดียวกัน
className กลายเป็น class (HTML attribute จริง ๆ)
Props ประกาศด้วย $props() แทน function arguments
ไม่มี export default — ไฟล์เองคือ export
ไม่มี JSX return — markup แค่อยู่ตรงนั้นเลย

ลองเล่น: Svelte single-file component

SvelteOpen in Svelte Playground ↗ (copies code)

<script>
  let { greeting = 'Hello' } = $props();
  let name = $state('React developer');
</script>

<div class="card">
  <p class="greeting">{greeting}, <strong>{name}</strong>!</p>
  <input bind:value={name} placeholder="Change my name" />
</div>

<style>
  .card {
    border: 2px solid #FF3E00;
    border-radius: 8px;
    padding: 1.25rem;
    font-family: sans-serif;
  }
  .greeting { font-size: 1.2rem; margin: 0 0 0.75rem; }
  input { padding: 0.3rem 0.6rem; font-size: 1rem; width: 100%; box-sizing: border-box; }
</style>

🔀 React JSX + CSS Modules vs Svelte single-file component

React แยก logic (Component.jsx) และ style (Component.module.css) ออกเป็นไฟล์แยก Svelte รวมทั้งสองไว้ในไฟล์ .svelte เดียว
React: className="foo" (JSX attribute) Svelte: class="foo" (HTML attribute จริง ไม่ต้องเปลี่ยนชื่อ)
React: export default function MyComponent({ name }) {} Svelte: let { name } = $props(); — ไฟล์คือ export ไม่ต้องมี function wrapper
React: CSS Modules scope style ด้วย hashed class name ตอน build time Svelte scope <style> โดยใส่ unique attribute ลงในแต่ละ element ตอน compile — ผลเหมือนกัน zero boilerplate
React: ต้อง return (...) JSX Svelte: markup คือ template body — ไม่มี return ไม่มี parentheses พิเศษ