This course teaches Svelte from component fundamentals through reactivity, lifecycle management, stores, actions, slots, transitions, component APIs, and server-side rendering. It also explores integrations with Redux, XState, RxJS, Immer, and other state-management approaches within Svelte.

Syllabus

⌨️ Introduction
⌨️ Writing your 1st Svelte component
⌨️ Style your Svelte component
⌨️ Adding data to Svelte component
⌨️ Reactivity in Svelte
⌨️ Attaching events in Svelte
⌨️ Reactive Declarations and Statements
⌨️ tick
⌨️ Component and props
⌨️ Component events
⌨️ Forwarding component events
⌨️ class: directive
⌨️ Binding
⌨️ bind:group
⌨️ bind:this
⌨️ Component Lifecycle
⌨️ onMount
⌨️ {#if} block
⌨️ {#each} block
⌨️ keyed {#each} block
⌨️ keyed {#each} visualized
⌨️ {#await} block
⌨️ {#key} block
⌨️ Context
⌨️ Communicating through Context
⌨️ Intro to Svelte store
⌨️ Writable store
⌨️ Readable store
⌨️ Svelte store contract
⌨️ Redux store as Svelte store
⌨️ Valtio state as Svelte store
⌨️ XState as Svelte store
⌨️ DOM events as Svelte store
⌨️ Immer for immutable Svelte store
⌨️ derived Svelte store
⌨️ tweened Svelte store
⌨️ tweened and spring
⌨️ Higher Order Store
⌨️ RxJS as Svelte store
⌨️ Reactive class property using stores
⌨️ Undo / Redo with Svelte store
⌨️ Reactive Context
⌨️ 3 tips to manage complex store
⌨️ get Svelte store value
⌨️ Store vs Context
⌨️ Intro to Svelte action
⌨️ Dynamic parameter in Svelte action
⌨️ What if Svelte action does not exists?
⌨️ Integrating UI library with Svelte action
⌨️ Reusing event listeners with Svelte action
⌨️ Creating events with Svelte action
⌨️ The order of Svelte action
⌨️ use:clickOutside
⌨️ use:tooltip
⌨️ use:viewport
⌨️ use:popper with Popper
⌨️ use:lazyImage
⌨️ Ensemble Actions
⌨️ slot
⌨️ Passing data across slot
⌨️ Slot forwarding
⌨️ $$slots
⌨️ Infinite List
⌨️ Tabs
⌨️ $$props and $$restProps
⌨️ Lazy Component
⌨️ svelte:component
⌨️ svelte:self
⌨️ svelte:window
⌨️ svelte:body
⌨️ svelte:head
⌨️ svelte:options
⌨️ Passing CSS Custom Properties to Component
⌨️ {@html}
⌨️ {@debug}
⌨️ script context="module"
⌨️ Intro to Svelte transitions
⌨️ Coordinating transitions
⌨️ Transition Events
⌨️ Easing
⌨️ Accessible transitions
⌨️ Solid color swipe transition
⌨️ Flipboard transition
⌨️ Client-side component API
⌨️ SSR component API
⌨️ Svelte compiler API
⌨️ Svelte preprocess API
⌨️ Hydrating Svelte component
⌨️ svelte/register
⌨️ Conclusion