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.

Start here Jump to Components

What you’ll learn

Introduction & Setup

Why Svelte, the compiler model (no virtual DOM), the toolchain, your first component. Start →

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

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.

Versions verified: this course’s Svelte and React code samples, runes, and framework claims were checked against Svelte 5.57, SvelteKit 2.70, and React 19.3 (npm latest at time of writing). All Svelte snippets compile with svelte/compiler in runes mode (generate: 'client', runes: true).