First Svelte component - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a Svelte component?

A Svelte component is a reusable piece of UI built with HTML, CSS, and JavaScript combined in one file. It controls how part of a webpage looks and behaves.

beginner

How do you define a simple Svelte component?

You create a file with a .svelte extension and write HTML inside it. You can add styles in a <style> tag and logic in a <script> tag.

beginner

What does this Svelte code do?<br><pre>&lt;script&gt;
  let name = 'Friend';
&lt;/script&gt;

&lt;h1&gt;Hello {name}!&lt;/h1&gt;</pre>

It shows a heading that says "Hello Friend!". The {name} part inserts the value of the variable name into the HTML.

beginner

Where do you put CSS styles in a Svelte component?

Inside a <style> tag in the same .svelte file. These styles apply only to that component, keeping things neat and separate.

beginner

How does Svelte update the webpage when data changes?

Svelte automatically updates the parts of the page that use the changed data. You just change the variable, and Svelte handles the rest behind the scenes.

What file extension do you use for a Svelte component?

A .html

B .js

C .svelte

D .css

Svelte components are saved with the .svelte extension.

Where do you write JavaScript logic in a Svelte component?

A Inside a <script> tag

B Inside a <style> tag

C Directly in HTML tags

D In a separate .js file only

JavaScript code goes inside the