Svelte vs React vs Vue comparison - Hands-On Comparison

Svelte vs React vs Vue Comparison

📖 Scenario: You are building a simple web page to compare three popular frontend frameworks: Svelte, React, and Vue. This page will show a list of frameworks with their key features so users can understand their differences easily.

🎯 Goal: Create a Svelte component that displays a list of three frameworks (Svelte, React, Vue) with their main features. You will start by setting up the data, then add a filter to show only frameworks with a certain feature, then display the filtered list, and finally add a heading to complete the page.

📋 What You'll Learn

Create a list of frameworks with exact names and features

Add a filter string variable to select frameworks by feature

Use a Svelte {#each} block to show only frameworks that include the filter feature

Add a heading element to the component

💡 Why This Matters

🌍 Real World

Comparing frontend frameworks helps developers choose the right tool for their projects by understanding key differences clearly.

💼 Career

Frontend developers often need to present or explain technology choices. Building such comparison components is a common task in documentation or marketing sites.

1

DATA SETUP: Create the frameworks list

Create a variable called frameworks that is a list of objects. Each object must have name and features keys. Use these exact entries: { name: 'Svelte', features: ['No virtual DOM', 'Compile-time'] }, { name: 'React', features: ['Virtual DOM', 'JSX'] }, { name: 'Vue', features: ['Virtual DOM', 'Templates'] }.

Svelte

# Create the frameworks list with exact entries

Need a hint?

Use let frameworks = [ ... ] with objects inside the array.

2

CONFIGURATION: Add a filter feature variable

Add a variable called filterFeature and set it to the string 'Virtual DOM'. This will be used to filter frameworks by this feature.

Svelte

let frameworks = [
  { name: 'Svelte', features: ['No virtual DOM', 'Compile-time'] },
  { name: 'React', features: ['Virtual DOM', 'JSX'] },
  { name: 'Vue', features: ['Virtual DOM', 'Templates'] }
];

// Add the filterFeature variable below

Need a hint?

Use let filterFeature = 'Virtual DOM'; to create the filter string.

3

CORE LOGIC: Display filtered frameworks using {#each}

Use a Svelte {#each} block to loop over frameworks filtered by checking if filterFeature is included in each framework's features list. For each matching framework, display its name inside a <li> element.

Svelte

let frameworks = [
  { name: 'Svelte', features: ['No virtual DOM', 'Compile-time'] },
  { name: 'React', features: ['Virtual DOM', 'JSX'] },
  { name: 'Vue', features: ['Virtual DOM', 'Templates'] }
];

let filterFeature = 'Virtual DOM';

Need a hint?

Use {#each frameworks.filter(fw => fw.features.includes(filterFeature)) as fw} to loop only matching frameworks.

4

COMPLETION: Add a heading to the component

Add an <h2> heading above the list with the exact text Frameworks with Virtual DOM feature.

Svelte

let frameworks = [
  { name: 'Svelte', features: ['No virtual DOM', 'Compile-time'] },
  { name: 'React', features: ['Virtual DOM', 'JSX'] },
  { name: 'Vue', features: ['Virtual DOM', 'Templates'] }
];

let filterFeature = 'Virtual DOM';

// Add an  heading above the list


  {#each frameworks.filter(fw => fw.features.includes(filterFeature)) as fw}
    {fw.name}
  {/each}

Need a hint?

Simply add <h2>Frameworks with Virtual DOM feature</h2> above the list.