✳flâneur — a map of the web's best reading

Svelte tutorial note

sung.codes · 6,922 words · saved by 1 readers

on:click on looks like a directive and click is the event name. States are reactive, closure under script tag re-renders whenever the state value changes. https://svelte.dev/tutorial/reactive-declarations Computed/derived states need to be declared using a special syntax, $:. Useful when it needs to be access multiple times. Instead of {count * 2} everywhere, you can use {doubled} instead. https://svelte.dev/tutorial/reactive-statements $: isn't limited to expressions (reactive values) but also to statements. https://svelte.dev/tutorial/updating-arrays-and-objects A simple rule of thumb: the name of the updated variable must appear on the left hand side of the assignment. Or assign a new reference like you do in React. https://svelte.dev/tutorial/declaring-props For passing data to another component(s). Same concept as it does in React. In React, components receive props but in Svelte, you export a variable. Nested.svelte App.svelte imports Nested component and passes the answer like f

This is a note as I wrote down as I was going through Svelte tutorial . Might be of helpful for some but foremost, this is a note for myself :) 1. Introduction Creating a new Svelte project https://svelte.dev/blog/svelte-for-new-developers 1 npx degit sveltejs/template new-project-name VS Code Install following extensions Svelte Svelte Intellisense 2. Reactivity a. Assignments https://svelte.dev/tutorial/reactive-assignments on : click on looks like a directive and click is the event name. States are reactive, closure under script tag re-renders whenever the state value changes. 1 < script > 2

Explore this link on the map →

saved by

related reading