rghvdberg / svelte-tutorial-for-beginners

Files for The Net Ninjas Svelte Tutorial

The Net Ninja's - Svelte Tutorial for Beginners

• 1 - Introduction
• 2 - Setting up a Svelte App

  npm install -g degit
  degit sveltejs/template myproject
  cd myproject
  npm run dev

• 3 - Svelte Basics

• variables/data/logic in the <script></script> section
• {var} calls the vars/logic

• 4 - User Input & Data Binding

• one way data binding
  • <input type="text" on:input={handleInput}
  • <input type="text" value={beltColour} />
• two way data binding
  • <input type="text" bind:value={beltColour} />

• 5 - Reactive Values

• reactive value
  • $: fullName = ${firstName} ${lastName};
• reactive statement
  • single line
    • $: console.log(beltColour);
  • code block

    • $: {
        console.log(beltColour);
        console.log(fullName); // reacive name!!
      }
      

• 6 - Loops

  • {#each myArray as myObject (myObject.id)}
      {myObject.myProperty}
      {:else}
      <-- do something -->
    {/each}
    

• 7 - Inline Event Handlers
  • <button on:click={() => handleClick(person.id)}> delete </button>
• 8 - Conditionals

  • {#if condition}
      // do stuff
      {:else if condition}
      // do other stuff
      {:else}
      // fallback
    {/if}
    

• 9 - Components
  • create NewComponent.svelte
  • import NewComponent from "./NewComponent.svelte";
  • <NewComponent />
• 10 - CSS & Conditional Styles
  • global css in /public/global.css
  • component css in myComponent.svelte -> <style> </style>
  • conditional css class:myCondition={bool}
• 11 - Props
  • prop variables in component
    • <myComponent propValue="value"/>
  • in Components script
    • export let propValue;
    • usage: {propValue}
• 12 - Event Forwarding
  • on:click in component (no function calling)
  • 
  • in <myComponent on:click={myFunction}>
  • 
• 13 - Event Modifiers
  • self
    only trigger handler if event.target is the element itself
    
  • once
    remove the handler after the first time it runs
    
  • https://svelte.dev/docs#template-syntax-element-directives-on-eventname
• 14 - Slots
  • Unnamed Slots
    • in App.svelte
      • <myComponent> <!-- content here --> </myComponent>
    • in myComponent.svelte
      • content is rendered at <slot/>
  • Named Slots
    • in App.svelte
      • <div slot="myNamedSlot"> <!-- content here --> </div>
      • content is rendered at <div name="myNamedSlot"/>
• 15 - Forms (part 1)
  • bind variables to input elements
    • <input type="text" bind:value={myVar} />
      • if type is number the variable will be a number
    • preventDefault prevents the form reloading the page
      • <form on:submit|preventDefault={myFunction}>
• 16 - Forms (part 2)
  • bind:group={myArray} add value to myArray[]
  • <select bind:value={var}> bind value of <option> to var
• 17 - Dispatching Custom Events
  • in myComponent
    • import { createEventDispatcher } from "svelte";
    • <form on:submit|preventDefault={handleSubmit}>
    • in handleSumbit => dispatch("customEventName", myObject)
  • in App
    • <myComponent on:customEventName={myFunction}/>
    • const myFunction = (e) => { // do stuff };

---

• 18 - Starting the Polls Project
  • 
• 19 - Header & Footer Components
• 20 - Reusable Tabs Component
• 21 - Poll Form Component
• 22 - Custom Button Component
• 23 - Custom Form Validation
• 24 - Adding New Polls
• 25 - Poll Details Component
• 26 - Card Component
• 27 - Casting Votes
• 28 - Vote Bars
• 29 - Introduction to Stores
  • create store
    • import { writable } from "svelte/store";
  • subscribe to store
    • import Pollstore from "./Pollstore.js";
    • PollStore.subscribe(myFunction);
• 30 - Lifecycle Hooks
  • A. import { onMount, onDestroy } from "svelte";
    • onMount(() => {}); / onDestroy(() => {});
  • B. use $PollStore
• 31 - Updating Store Data
• 32 - Deleting Polls
  • note: Button component needs on:click
• 34 - Transition Basics
• 34 - Tweens & Animations
• 35 - Wrap Up
  • https://svelte.dev/tutorial/basics
  • https://svelte.dev/docs