Learn Svelte

1. Introduction

   1. Basics

      Hello world!

   2. Adding data

      Hello Svelte!

      Hello SVELTE!

   3. Dynamic attributes

      

   4. Styling

      This is styled paragraph.

   5. Nested components

      This is a paragraph from nested component

      The answer is 100

   6. HTML tags

      this string contains some <strong>HTML!!!</strong>

      this string contains some HTML!!!

2. Reactivity

   1. Assignments

      Count is 0

      Increment count Decrement count

   2. Declarations

      0 doubled is 0

      0 doubled is 0

   3. Statements

                  
                  $: {
                    console.log("the count is " + count);
                    if (count > 0) alert("I SAID THE COUNT IS " + count);
                  }
                  $: if (count >= 10) {
                    alert("count is dangerously high!");
                    count = 9;
                  }
                  
                

   4. Updating arrays and objects

      1 + 2 + 3 + 4 = 10

      Add a number

3. Props

   1. Declaring props

      This is a paragraph from nested component

      The answer is 42

   2. Default values

      This is a paragraph from nested component

      The answer is 100

   3. Spread props

      The svelte package is blazing fast. Download version 3 from npm and learn more here

4. Logic

   1. If blocks

      Log in

   2. Else blocks

      Log in

   3. Else-if blocks

      7 is between 5 and 10

   4. Each blocks

      • Keyboard Cat
      • Maru
      • Henri The Existential Cat

   5. Await blocks

      generate random number

      The number is 0.5773719027900985