Why components are the building blocks in Svelte - See It in Action

Why components are the building blocks

📖 Scenario: You are creating a simple Svelte app to understand how components help build user interfaces by breaking them into smaller parts.

🎯 Goal: Build a Svelte app with a main component and a child component that displays a greeting message. Learn how components work together as building blocks.

📋 What You'll Learn

Create a main Svelte component file named App.svelte

Create a child component file named Greeting.svelte

Pass a name prop from App.svelte to Greeting.svelte

Display the greeting message inside Greeting.svelte

Use component import and usage syntax correctly

💡 Why This Matters

🌍 Real World

Web apps use components to build complex interfaces by combining small, manageable parts.

💼 Career

Understanding components is essential for frontend development jobs using modern frameworks like Svelte, React, or Vue.

1

Create the child component Greeting.svelte

Create a Svelte component file named Greeting.svelte with a name prop and display the text Hello, {name}! inside a <h2> tag.

Svelte

  // Declare a prop named name


Hello, {name}!

Need a hint?

Use export let name; to declare a prop in Svelte.

2

Set up the main component App.svelte

Create a Svelte component file named App.svelte. Import the Greeting component from ./Greeting.svelte. Create a variable userName with the value "Alice".

Svelte

  // Import Greeting component
  // Create variable userName with value "Alice"

Need a hint?

Use import Greeting from './Greeting.svelte'; to import the child component.

3

Use the Greeting component in App.svelte

In App.svelte, add the <Greeting /> component tag and pass the userName variable as the name prop.

Svelte

  import Greeting from './Greeting.svelte';
  let userName = "Alice";

Need a hint?

Use <Greeting name={userName} /> to pass the prop.

4

Add a wrapper element and export App component

In App.svelte, wrap the <Greeting /> component inside a <main> tag. This completes the main component structure.

Svelte

  import Greeting from './Greeting.svelte';
  let userName = "Alice";



# Your code here

Need a hint?

Use a <main> tag to wrap the child component for semantic structure.