Introduction & Setup
Why Svelte, the compiler model (no virtual DOM), the toolchain, your first component. Start →
Svelte for React Developers
You already know components, props, state, and hooks. This course maps all of it to Svelte 5 and its runes — what's the same, what's different — with live, editable examples that compile in your browser.
What you’ll learn
Section titled “What you’ll learn”React → Svelte: Same vs Different
Single-file components, compiler vs runtime, reactivity, scoped styles — what transfers. Compare →
Components & Templating
Props, conditionals & lists, events, snippets, bindings — vs JSX. Build →
Reactivity & Lifecycle (Runes)
$state vs useState, $derived vs useMemo, $effect vs useEffect — the runes↔hooks map. Learn runes →
Handling Data & Stores
Stores, module state, fetching, await blocks — vs Context/Redux/react-query. Manage data →
Routing with SvelteKit
File-based routing, load functions, layouts, form actions — vs react-router/Next. Route →
Tooling, Testing & Deployment
Vite, svelte-check, Vitest + testing-library, adapters & deploy — vs jest/RTL/Next. Ship it →
How this course works
Section titled “How this course works”Comparison-first
Every concept starts from the React you know, then shows the Svelte way — and flags the differences.
Runs in your browser
Editable examples compile with the real Svelte compiler client-side and render live in the page — no setup, no backend.
Quizzes & progress
Check your understanding after each lesson; your progress is saved locally.
Bilingual
Available in English and ไทย — switch anytime from the top bar.