Author -  Sai gowtham

Intro to the Svelte Reactivity

In this tutorial, we are going to learn about reactivity in svelte.

Svelte brings the reactivity into the language itself to keep up your app state sync with the dom.

Let’s see an example

App.svelte
 <script>
    let name = "react";

    function changeName(){
        //updating the state
        name = "svelte"    }
 </script>

 <h1>{name}</h1>
 <button on:click={changeName}>Change Name</button>

In the above code, we have created a local state name in App component and we interpolated that data in html markup.

Inside the changeName event handler, we are updating the state by assinging a new value name= 'react', so wherever we used that state inside the dom also updated with the new state.

Reactive variables

If we place $: in front of a variable that will become a reactive variable in svelte.

example:

 <script>
    let a = 1;
    let b = 2;
    $: c = a+b; //reactive variable</script>

<h1>{c}</h1>
<button on:click={()=>a += 1}>Increment a</button>

In above code , we have created a reactive variable called c so that whenever its underling property changes it automatically revaluates the logic and updates the dom, like if we click on a Increment a button reactive variable c will be updated.

Debugging

We can also make our console logs reactive by using $:.

In below example, we are logging the num value wherever it changes.

example:

<script>
  let num = 1;
  $: console.log(`Incremented value is  ${num}`);</script>

<button on:click={() => (num += 1)}>Inc</button>

svelte-debugging-reactivity

We can also group statements together with a block.

  $: {
    console.log(`Incremented value is ${num}`);
    console.log(`Yeah num its updated`);
  }

We can even use $: in front of conditional statements.

 <script>
  let num = 1;
  $: if (num > 10) {    console.log(`The limit is over`);  }</script>

<button on:click={() => (num += 1)}>Inc</button>

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2023 (Beginner + Advanced)
JavaScript - The Complete Guide 2023 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY