Reactive blocks for side effects in Svelte - Mini Project: Build & Apply

Reactive blocks for side effects

📖 Scenario: You are building a simple Svelte app that tracks a user's score and shows a message whenever the score changes.This is like a game scoreboard that updates the message automatically when the score updates.

🎯 Goal: Create a Svelte component that uses a reactive block to show a message whenever the score changes.

📋 What You'll Learn

Create a score variable initialized to 0

Create a message variable initialized to an empty string

Use a reactive block $: to update message whenever score changes

Display the score and message in the component

💡 Why This Matters

🌍 Real World

Reactive blocks help keep your UI in sync with data changes automatically, like updating a live scoreboard or showing notifications.

💼 Career

Understanding reactive blocks is key for building interactive web apps with Svelte, a popular modern framework used in many companies.

1

Set up initial variables

Create a variable called score and set it to 0. Also create a variable called message and set it to an empty string "".

Svelte

let score = 0;
let message = "";
// Your code here

Need a hint?

Use let to declare variables in Svelte scripts.

2

Add a reactive block to update message

Add a reactive block using $: that updates message to the string `Score is now ${score}` whenever score changes.

Svelte

let score = 0;
let message = "";

$: message = `Score is now ${score}`;  // Your code here

Need a hint?

Use $: followed by the assignment to create a reactive block.

3

Display score and message in the component

In the component's markup, add a <p> tag that shows the text Score: {score} and another <p> tag that shows the {message}.

Svelte

let score = 0;
let message = "";

$: message = `Score is now ${score}`;

Score: {score}

Need a hint?

Use curly braces {} to insert variables in Svelte markup.

4

Add a button to increase the score

Add a <button> with the text Increase Score that increments score by 1 when clicked using on:click.

Svelte

let score = 0;
let message = "";

$: message = `Score is now ${score}`;

Score: {score}
{message}

 score += 1}>Increase Score  

Need a hint?

Use on:click to handle button clicks in Svelte.