Svelte vs React vs Vue comparison - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a reactive variable in Svelte.

Svelte

let count = 0;

function increment() {
  [1];
}

Drag options to blanks, or click blank then click option'

Acount++

Bcount += 1

Cthis.setState({ count: count + 1 })

DsetCount(count + 1)

Attempts:

3 left

💡 Hint

Common Mistakes

Using React's setState or hooks syntax in Svelte.

Trying to use this.setState which is not valid in Svelte.

In Svelte, you update reactive variables directly by assignment, like count += 1.

2fill in blank

medium

Complete the code to bind an input value to a variable in Svelte.

Svelte

<input type="text" [1]={name} />
<p>Hello, {name}!</p>

Drag options to blanks, or click blank then click option'

Abind:value

Bvalue

Con:input

Dbind:input

Attempts:

3 left

💡 Hint

Common Mistakes

Using React's controlled input pattern with onChange.

Using incorrect binding syntax like bind:input.

Svelte uses bind:value to create two-way binding between input and variable.

3fill in blank

hard

Fix the error in the Svelte component to conditionally show a message.

Svelte

{#if [1]
  <p>Welcome back!</p>
{/if}

Drag options to blanks, or click blank then click option'

AisLoggedIn

BisLoggedIn()

Cthis.isLoggedIn

DisLoggedIn === true

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the variable as a function like isLoggedIn().

Using 'this' keyword which is not used in Svelte templates.

In Svelte, you use the variable name directly in the {#if} block without calling it as a function or using this.

4fill in blank

hard

Fill both blanks to create a reactive statement that updates doubled when count changes.

Svelte

<script>
  let count = 0;
  let doubled;

  $: [1] = [2] * 2;
</script>

Drag options to blanks, or click blank then click option'

Adoubled

Bcount

Ccount + 1

Ddoubled + 1

Attempts:

3 left

💡 Hint

Common Mistakes

Using expressions like count + 1 instead of count.

Trying to update the wrong variable on the left side.

The reactive statement uses $: doubled = count * 2; to update doubled whenever count changes.

5fill in blank

hard

Fill all three blanks to create a Svelte component that loops over items and shows their names.

Svelte

<script>
  let items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Cherry' }
  ];
</script>

<ul>
  {#each [1] as [2] ([3])}
    <li>{item.name}</li>
  {/each}
</ul>

Drag options to blanks, or click blank then click option'

Aitems

Bitem

Citem.id

DitemsList

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong variable name for the array or item.

Omitting the key or using an invalid key.

The {#each} block loops over items as item using item.id as a key.