Why components are the building blocks in Svelte - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Svelte component render?

Consider this Svelte component code. What will be shown on the page when it runs?

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>
<button on:click={increment}>Click me</button>
<p>Count: {count}</p>

A A button labeled 'Click me' and a paragraph showing 'Count: 0' initially, updating the count each click.

B A button labeled 'Click me' but the count never changes from 0 when clicked.

C A button labeled 'Click me' and a paragraph showing 'Count: 1' initially.

D Only a paragraph showing 'Count: 0' with no button visible.

💡 Hint

Think about how the count variable updates and how Svelte reacts to changes.

The component shows a button and a paragraph. Clicking the button runs the increment function, which updates the count variable. Svelte automatically updates the displayed count in the paragraph.

🧠 Conceptual

intermediate

Why are components considered building blocks in Svelte?

Which statement best explains why components are the building blocks in Svelte?

A Components replace the need for HTML and CSS entirely.

B Components are only used to style the page and do not contain logic.

C Components encapsulate markup, styles, and behavior, making code reusable and easier to manage.

D Components are only useful for large applications and not for small projects.

💡 Hint

Think about what a component contains and why that helps developers.

Components group together HTML, CSS, and JavaScript logic. This makes it easier to reuse parts of the UI and keep code organized.

📝 Syntax

advanced

Identify the syntax error in this Svelte component

What is the syntax error in the following Svelte component code?

Svelte

<script>
  let name = 'Alice'
</script>
<h1>Hello {name}</h1>

A Missing semicolon after let declaration causes a syntax error.

B The <script> tag must be self-closing in Svelte.

C Curly braces around {name} are incorrect in Svelte templates.

D No syntax error; the code is valid and will render 'Hello Alice'.

💡 Hint

Check if semicolons are required in Svelte script blocks.

In JavaScript, semicolons are optional. The code is valid and will render 'Hello Alice' correctly.

🔧 Debug

advanced

Why does this Svelte component not update the displayed message?

This component tries to update the message when the button is clicked, but the displayed text never changes. Why?

Svelte

<script>
  let message = 'Hello';
  function update() {
    message = 'Goodbye';
  }
</script>
<p>{message}</p>
<button on:click="update()">Change</button>

A The <p> tag cannot display variables in Svelte.

B The on:click attribute uses quotes and parentheses incorrectly; it should be on:click={update}.

C The function update is missing a return statement.

D The message variable is not reactive and cannot change after initialization.

💡 Hint

Look at how event handlers are attached in Svelte.

In Svelte, event handlers use curly braces without quotes or parentheses. Using quotes and parentheses treats it as a string, so the function is not called.

❓ state_output

expert

What is the final output after clicking the button twice?

Given this Svelte component, what will the paragraph show after clicking the button two times?

Svelte

<script>
  let count = 0;
  function increment() {
    count += 1;
    count += 1;
  }
</script>
<button on:click={increment}>Add Two</button>
<p>Count: {count}</p>

A Count: 4

B Count: 2

C Count: 1

D Count: 0

💡 Hint

Each click adds 2 to count. Two clicks add how much total?

Each click runs increment, adding 2 to count. Two clicks add 4 total, so count becomes 4.

Practice

1. Why are components considered the building blocks in Svelte?

easy

A. Because they break the app into small, manageable parts

B. Because they only handle CSS styling

C. Because they replace JavaScript functions

D. Because they are only used for routing

Solution

1. Step 1: Understand the role of components

   Components divide the app into smaller parts that are easier to manage and understand.

2. Step 2: Recognize the benefits of components

   This division helps in reusing code and updating parts without affecting the whole app.

3. Final Answer:

   Because they break the app into small, manageable parts -> Option A

4. Quick Check:

   Components = small parts [OK]

Hint: Components split app into pieces for easy management [OK]

Common Mistakes:

• Thinking components only handle CSS
• Believing components replace JavaScript functions
• Assuming components are only for routing

2. Which of the following is the correct way to define a Svelte component file?

easy

A. A JavaScript file with .js extension only

B. Separate files for HTML, CSS, and JavaScript only

C. A CSS file with .css extension only

D. A file combining HTML, CSS, and JavaScript in one .svelte file

Solution

1. Step 1: Identify Svelte component structure

   Svelte components combine HTML, CSS, and JavaScript in a single .svelte file for simplicity.

2. Step 2: Compare with other options

   Other options separate concerns or use only one language, which is not how Svelte components work.

3. Final Answer:

   A file combining HTML, CSS, and JavaScript in one .svelte file -> Option D

4. Quick Check:

   Svelte = combined file [OK]

Hint: Svelte uses one file for HTML, CSS, JS [OK]

Common Mistakes:

• Thinking Svelte requires separate files for each language
• Confusing Svelte components with plain JS or CSS files
• Assuming components are only JavaScript

3. Given this Svelte component code:

<script>
  export let name = 'Friend';
</script>
<h1>Hello {name}!</h1>

What will be displayed if used as <Greeting name="Anna" />?

medium

A. Hello {name}!

B. Hello Friend!

C. Hello Anna!

D. Error: name not defined

Solution

1. Step 1: Understand prop passing in Svelte

   The component exports a variable name with default 'Friend'. Passing name="Anna" overrides this default.

2. Step 2: Evaluate the rendered output

   The {name} in the template will show 'Anna' because the prop was passed.

3. Final Answer:

   Hello Anna! -> Option C

4. Quick Check:

   Prop passed = displayed value [OK]

Hint: Passed props override defaults in Svelte [OK]

Common Mistakes:

• Ignoring the passed prop and using default
• Thinking {name} prints literally
• Assuming an error occurs without explicit declaration

4. What is wrong with this Svelte component code?

<script>
  let count = 0
  function increment() {
    count++
  }
</script>
<button on:click="increment()">Click</button>
<p>Count: {count}</p>

medium

A. Missing semicolons cause error

B. Event handler syntax should not use quotes

C. count variable should be exported

D. Function increment must be async

Solution

1. Step 1: Check event handler syntax in Svelte

   In Svelte, event handlers use on:event={handler} without quotes around the handler.

2. Step 2: Identify the error in code

   The code uses on:click="increment()" with quotes, which is incorrect and causes a syntax error.

3. Final Answer:

   Event handler syntax should not use quotes -> Option B

4. Quick Check:

   Event handler = no quotes [OK]

Hint: Use curly braces, no quotes for event handlers [OK]

Common Mistakes:

• Adding quotes around event handlers
• Thinking semicolons are mandatory in Svelte
• Believing variables must be exported to update

5. You want to create a reusable button component in Svelte that changes its label based on a passed prop and applies a CSS style only inside the component. Which of these is the best approach?

hard

A. Create a .svelte file combining HTML, CSS scoped to the component, and export a label prop

B. Write HTML and CSS in separate files and import them into a JavaScript file

C. Use global CSS and hardcode the label inside the component without props

D. Create a JavaScript function that returns HTML string with inline styles

Solution

1. Step 1: Understand Svelte component best practices

   Svelte components combine HTML, CSS scoped locally, and JavaScript in one file, making them reusable and encapsulated.

2. Step 2: Match requirements to approach

   Exporting a label prop allows dynamic text, and scoped CSS ensures styles don't leak outside the component.

3. Final Answer:

   Create a .svelte file combining HTML, CSS scoped to the component, and export a label prop -> Option A

4. Quick Check:

   Reusable + scoped CSS + props = Create a .svelte file combining HTML, CSS scoped to the component, and export a label prop [OK]

Hint: Use .svelte file with props and scoped CSS [OK]

Common Mistakes:

• Using global CSS causing style conflicts
• Hardcoding labels losing reusability
• Separating files unnecessarily in Svelte