Learning Svelte 101

What is Svelte

Let’s Begin

Declaring Variables

<script>
const hello = "Welcome to Svelte"
const myVar = "I just declared this!"
</script>
<main>
<h1>{hello}</h1>
<h2>{myVar}</h2>
</main>

Props

<script>
import Other from "./Other.svelte"
const hello = "Welcome to Svelte"
const myVar = "I just declared this!"
</script>
<style>
main {
font-family: sans-serif;
text-align: center;
}
</style>
<main>
<h1>{hello}</h1>
<h2>{myVar}</h2>
<Other />
</main>
<div>
<h1>Hello World</h1>
</div>
<script>
export let myProp
</script>
<div>
<h1>{myProp}</h1>
</div>
<script>
import Other from "./Other.svelte"
const hello = "Welcome to Svelte"
const myVar = "I just declared this!"
</script>
<style>
main {
font-family: sans-serif;
text-align: center;
}
</style>
<main>
<h1>{hello}</h1>
<h2>{myVar}</h2>
<Other myProp="cheese" />
</main>

Events and Reactive Data

<script>
export let myProp
let count = 1
const handleClick = () => {
count += 1
}
</script>
<div>
<h1>{myProp}</h1>
<h2>{count}</h2>
<button on:click="{handleClick}">Add One</button>
</div>

Iterating over an array

<script>
export let myProp
let count = 1
const nums = [1, 2, 3, 4, 5, 6] const handleClick = () => {
count += 1
}
</script>
<div>
<h1>{myProp}</h1>
<h2>{count}</h2>
<button on:click="{handleClick}">Add One</button>
{#each nums as num}
<h1>{num}</h1>
{/each}
</div>

Bottom Line

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store