Svelte Learning Notes (with Vite and Svelte 5 Runes) ✨🚀

Start the Journey 🐴 ->

This collection of notes provides a beginner-friendly guide to learning Svelte, focusing on projects set up with Vite and utilizing the Svelte 5 Runes API for reactivity and props.

Learning Path

1. Introduction to Svelte 🌟

   • What is Svelte?
   • Key differences (Compiler vs. Framework)
   • Why choose Svelte?

2. Project Setup with Vite 🛠️

   • Prerequisites (Node.js)
   • Creating a new Svelte + Vite project
   • Running the development server

3. Understanding the Project Structure 📁

   • Overview of the default directories and files
   • Purpose of key files (index.html, main.js, App.svelte, vite.config.js, svelte.config.js)

4. Svelte Component Basics 📦

   • The structure of a .svelte file (<script>, Template (HTML-like markup), <style>)
   • Basic template syntax ({expression})
   • Handling events (on:event)

5. Reactivity and State with $state ⚡

   • What is reactivity?
   • Introducing Svelte 5 Runes
   • Using $state() for reactive variables

6. Component Props with $props 🔄

   • What are props?
   • Passing data down to child components
   • Using $props() to receive props (Svelte 5 Runes)

7. Client-Side Routing with svelte-navigator 🧭

   • What is client-side routing?
   • Introduction to svelte-navigator
   • Installation and basic usage (linking concepts, not a full tutorial yet)

8. Data Flow Between Components 🔄

   • Imports and exports in Svelte applications
   • Component communication patterns
   • Working with utility functions
   • Stores for global state management
   • Context API for component trees

(These notes assume you are using Svelte 5 or later, which introduced the Runes API like $state and $props.) 🧙‍♂️