Day 1: Svelte Basics and Reactivity | Svelte in 5 Days

How Svelte Is Different

React, Vue, and Angular ship a runtime to the browser. That runtime interprets your components and updates the DOM. Svelte is a compiler — it analyzes your components at build time and generates precise DOM update instructions. The result is smaller bundles and faster apps.

Terminal

npm create svelte@latest my-app
# Choose: Skeleton project, No TypeScript (for now), ESLint
cd my-app
npm install
npm run dev

Your First Component

src/routes/+page.svelte







Hello, {name}!


Count: {count} (doubled: {doubled})

💡

The $: label is Svelte's reactive declaration syntax. It re-runs whenever any variable it references changes. It's the most elegant reactivity system of any frontend framework.

Conditionals, Loops, and Events

Component




{#if show}
  Visible
{:else}
  Hidden
{/if}


{#each fruits as fruit, i (fruit)}
  {i + 1}. {fruit}
{/each}


 e.key === 'Enter' && addFruit()} />

Props and Component Communication

Card.svelte




  {title}
  {count} items

Parent

📝 Day 1 Exercise

Build an Interactive Counter App

Create a Svelte component with a counter, increment, decrement, and reset buttons.
Use $: to create a reactive isNegative declaration that's true when count < 0.
Conditionally apply a CSS class based on isNegative.
Add a history array that records every count value. Use $: to push to it on every change.
Display the history list with {#each}. Limit display to the last 10 entries.

Day 1 Summary

Svelte is a compiler — it generates optimized vanilla JS, no runtime overhead.
Assignment triggers reactivity. count += 1 is all you need to update the DOM.
$: value = expression is a reactive declaration — recalculates when dependencies change.
Export a variable with export let propName to receive props from a parent.

Day 2: Svelte Stores

→