Svelte สำหรับนักพัฒนา React

คุณรู้จัก component, props, state และ hooks อยู่แล้ว คอร์สนี้จับคู่ทุกอย่างเข้ากับ Svelte 5 และ runes — อะไรเหมือน อะไรต่าง — พร้อมตัวอย่างที่แก้ได้และ compile สดใน browser

เริ่มที่นี่ ข้ามไป Components

สิ่งที่คุณจะได้เรียน

บทแนะนำ & การติดตั้ง

ทำไมต้อง Svelte, โมเดล compiler (ไม่มี virtual DOM), toolchain, component แรกของคุณ เริ่ม →

React → Svelte: เหมือนและต่าง

single-file component, compiler เทียบ runtime, reactivity, scoped styles — อะไรย้ายมาได้ เทียบ →

Components & Templating

Props, conditional & list, event, snippet, binding — เทียบ JSX สร้าง →

Reactivity & Lifecycle (Runes)

$state เทียบ useState, $derived เทียบ useMemo, $effect เทียบ useEffect — แมป runes↔hooks เรียน runes →

การจัดการข้อมูล & Stores

Store, module state, การ fetch, await block — เทียบ Context/Redux/react-query จัดการข้อมูล →

Routing ด้วย SvelteKit

File-based routing, load function, layout, form action — เทียบ react-router/Next นำทาง →

เครื่องมือ ทดสอบ & Deploy

Vite, svelte-check, Vitest + testing-library, adapter & deploy — เทียบ jest/RTL/Next ส่งงานจริง →

คอร์สนี้ทำงานยังไง

เทียบกับ React ก่อนเสมอ

ทุกแนวคิดเริ่มจาก React ที่คุณรู้ แล้วค่อยแสดงวิธีของ Svelte — พร้อมชี้จุดที่ต่างกัน

รันใน browser

ตัวอย่างที่แก้ได้ compile ด้วย Svelte compiler จริงฝั่ง client แล้ว render สดในหน้า — ไม่ต้องติดตั้ง ไม่ต้องมี backend

แบบทดสอบ & ความคืบหน้า

ทบทวนความเข้าใจหลังแต่ละบท ความคืบหน้าถูกบันทึกไว้ในเครื่อง

สองภาษา

มีทั้งภาษาอังกฤษและไทย — สลับได้ตลอดจากแถบด้านบน