SvelteKit Demo

Going to github first

Creating new repo cloning it

Create App
npm create svelte@latest my-app

cd
cd my-app

npm i
npm install

running it locally
npm run dev

CHANGING HOME PAGE / BASE ROUTE

ADDING COUNTER ROUTE

BASE SCRIPT FOR COUNTER --- THIS IS REACTIVE AS COUNT IS CHANGED AUTOMATICALLY AND WE DO NOT NEED TO UPDATE THE DOM

<script>
    let count = 0;
</script>

<button on:click={() => count++}>
    count is {count}
</button>

CHANGE THE SCRIPT TO LOOK NICER

<script>
    let count = 0;
</script>

<div> 
    count is {count}
</div>

<button on:click={() => count++}>
    add
</button>

<button on:click={() => count--}>
    subtract
</button>

Components

add components folder and add component

Now adding it in the other pages

<script>
    import Nav from "$lib/components/nav.svelte";
</script>
<Nav/>
<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

looping

<script>
    let array = [1,2,3,4]
    import Nav from "$lib/components/nav.svelte";
</script>
<Nav/>
<div> ABOUT</div>
{#each array as i }
    {#if i >2 }
    <h1> {i}</h1>
    {/if}
    <div> {i} </div>
{/each}