Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Svelte Basics: Getting Started and Core Concepts

Go to class Write review

Overview

This course introduces Svelte, a modern JavaScript framework that simplifies UI development through compile-time optimization. Learn to create projects, build components, and master reactivity with Svelte's $state API. Explore control flow with #if and #each directives. Discover how Svelte's declarative approach makes state management more intuitive than traditional frameworks.

Syllabus

Unit 1: What is Svelte?

Observe Svelte in Action

Unit 2: Creating Your First Svelte Component

Create and Integrate Svelte Component
Combine and Style Svelte States
Enhance Your Svelte Component

Unit 3: Reactivity in Svelte

Reactive Greeting with Svelte
Building a Reactive Counter
Reactive Parity Checker in Svelte
Reactive Number Array in Svelte
Reactive Text Transformation in Svelte

Unit 4: Control Flow in Svelte: Using `#if`, `#else-if`, and `#else`

Toggle Visibility with Svelte
Toggle Visibility with Conditional Rendering
Adding a Moderator Role
Handle Unrecognized User Roles

Unit 5: Optimized List Rendering with Keyed `#each`

Keyed Each Block Conversion
Sorting with Keyed Each Blocks
Adding Items to Keyed Lists
Random Removal in Keyed Lists
Updating Keyed List Items Efficiently

Unit 6: Universal Reactivity and State Inspection in Svelte

Reactive Store and State Logging
Reactive Store Expansion in Svelte
Reactive Cart Summary Component
Enhance Cart with Total Cost
Enhance Cart with Discounts

Reviews

Start your review of Svelte Basics: Getting Started and Core Concepts