Declaring props with export let in Svelte - Mini Project: Build & Apply

Declaring props with export let in Svelte

📖 Scenario: You are building a simple Svelte component that shows a greeting message. The message should come from outside the component, so you need to declare a prop to receive it.

🎯 Goal: Create a Svelte component that declares a prop called greeting using export let and displays it inside a <h1> tag.

📋 What You'll Learn

Declare a prop named greeting using export let

Use the greeting prop inside an <h1> tag

The component should render the greeting text passed as a prop

💡 Why This Matters

🌍 Real World

Props let you create reusable components that can show different data depending on where they are used, like greeting messages, user profiles, or product cards.

💼 Career

Understanding how to declare and use props is essential for building interactive and modular UI components in Svelte, a popular modern frontend framework.

1

Create the Svelte component file

Create a new Svelte component file and add the basic <script> and <h1> tags.

Svelte

  // Your code here

Need a hint?

Start with an empty <script> block and an empty <h1> tag below it.

2

Declare the prop with export let

Inside the <script> tag, declare a prop called greeting using export let greeting;.

Svelte

  // Declare the prop greeting here

Need a hint?

Use export let greeting; to declare the prop inside the <script> block.

3

Use the prop inside the component

Inside the <h1> tag, insert the {greeting} expression to display the prop value.

Svelte

  export let greeting;



  

Need a hint?

Use curly braces {} to insert the greeting variable inside the <h1> tag.

4

Complete the component for use

Ensure the component is ready to receive the greeting prop and display it. The final code should have export let greeting; and use {greeting} inside <h1>.

Svelte

  export let greeting;


{greeting}

Need a hint?

Double-check that the prop is declared and used correctly in the component.