Components & Templating

In React every component is a function that returns JSX. In Svelte every component is a .svelte file that combines script, markup, and styles in a single, familiar HTML-like format. No JSX, no className, no separate CSS file needed.

This module walks you through the core building blocks:

Lesson	Concept
This page	.svelte file structure vs React function components
Props	$props() rune vs React props destructuring
Template blocks	{#if}, {#each}, {#await} vs JSX ternaries and .map()
Events	onclick={fn} vs onClick={fn}
Snippets & children	{#snippet} / {@render} vs React children
Bindings	bind:value vs controlled inputs
Styles	Scoped <style> vs CSS Modules / CSS-in-JS

A .svelte file has three sections

flowchart TB
  file([".svelte file"])
  file --> script["<script> — component logic (JS/TS, runes)"]
  file --> markup["markup — HTML template (no JSX, no return)"]
  file --> style["<style> — scoped CSS (auto-scoped to this component)"]

The three sections of a .svelte file

Only the markup section is required. <script> and <style> are optional.

React component vs Svelte component

React

// Greeting.jsx
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}
export default Greeting;

Svelte

<!-- Greeting.svelte -->
<script>
  let { name } = $props();
</script>

<h1>Hello, {name}!</h1>

The markup in a .svelte file is the entire file body — no return statement, no parentheses, no JSX pragma.

Try it: your first Svelte 5 component

SvelteOpen in Svelte Playground ↗ (copies code)

<script> let name = $state('React developer'); </script> <h2>Hello, {name}!</h2> <input bind:value={name} placeholder="Type your name" /> <style> h2 { color: #FF3E00; } input { margin-top: 0.5rem; padding: 0.25rem 0.5rem; } </style>

🔀 React component vs Svelte component

• React: a function that returns JSX. Must import React (or use JSX transform).
• Svelte: a .svelte file. Markup is the template — no return, no JSX.
• React: CSS via CSS Modules, Styled Components, or className.
• Svelte: <style> block is automatically scoped to this component.
• React: export default function MyComponent.
• Svelte: the file itself is the export — no export default needed.

Where does component logic live in a Svelte file?

Inside a <script> block In a return() statement In a separate .ts file Inside JSX curly braces

How are styles scoped in a Svelte component?

You must add a CSS module import Svelte scopes <style> to the component automatically You use styled-components You add a unique className manually

Which Svelte 5 rune reads incoming props?

$state() $effect() $props() $derived()

Submit

Mark as complete