The Complete Svelte 5 Course For The Most Loved JavaScript Framework

Thank you Sentry for sponsorsing! Check out Sentry at https://sentry.io/. 🔴 Patreon:   / joyofcode   💬 Discord:   / discord   ⚓️ Links 🔗 Starter: https://github.com/joysofcode/learn-s... 🔗 Post: https://joyofcode.xyz/learn-svelte 🔖 Timestamps 0:00 Intro 0:35 Sponsor 2:02 Requirements 2:34 Project Setup 4:22 What Is Svelte? 6:46 Single File Components 8:32 Dynamic Attributes 11:42 Component Styles 11:53 The Style Directive 13:40 Scoped Styles 14:21 Global Styles 18:02 Dynamic Classes 21:56 Reactive State 23:26 Deeply Reactive State 24:55 $state.raw 25:44 $state.snapshot 27:15 Destructuring State 28:10 Derived State 29:41 Deriveds Update When They Change 31:03 Derived Dependency Tracking 32:32 $derived.by 34:36 Effects 36:54 Values Read Asynchronously Are Not Tracked 39:11 Untrack 40:53 Effect Dependency Tracking 42:52 $inspect 43:15 When Not To Use Effects 45:44 Using onMount Instead Of Effects 47:02 When To Use Effects 50:20 $effect.pre 53:47 State In Functions And Classes 54:52 Reactive Properties 56:17 Reactive Containers 58:58 Universal Reactivity 1:00:09 Passing State Into Functions And Classes 1:02:25 Reactive Global State 1:04:16 This Keyword 1:04:45 Why You Should Avoid Effects 1:07:40 $effect.root 1:08:45 $effect.tracking 1:08:57 Effect Orphans And Root Effects 1:11:38 Side Effects In Event Handlers 1:12:29 How Svelte Reactivity Works 1:19:20 Using Template Logic 1:19:32 Conditionals Rendering 1:21:51 Looping Over Data 1:28:10 Working With Asychronous Data 1:30:26 Asynchronous Svelte 1:31:16 Recreating Elements 1:32:33 Template Variables Using Local Constants 1:34:45 Listening To Events 1:40:16 Using Data Bindings 1:41:07 Two-Way Data Binding 1:43:45 Function Bindings 1:46:46 Media Bindings 1:48:08 Readonly Bindings 1:48:57 Svelte Components 2:11:38 Component Composition 2:11:56 Component Nesting 2:17:25 Snippets 2:19:55 The Context API 2:23:01 Module Context 2:27:22 Transitions And Animations 2:27:30 Transitions 2:30:32 Local And Global Transitions 2:32:13 Autoplaying Transitions 2:34:59 Custom Transitions 2:35:07 CSS Custom Transitions 2:37:41 JavaScript Custom Transitions 2:39:21 Coordinating Transitions Between Different Elements 2:43:10 FLIP Animations 2:45:11 Custom Animation Functions 2:46:46 Tweened Values And Springs 2:51:09 Using Third Party Libraries 2:51:21 Component Lifecycle Functions 2:53:32 Effects Versus Lifecycle Functions 2:54:14 Creating Components From Third Party Libraries 2:56:42 Element Lifecycle Functions Using Attachments 3:00:17 Special Elements 3:02:09 Window Bindings 3:02:36 Reactive Window Values 3:03:14 Reactive Data Structures 3:05:47 Reactive Events 3:12:04 Legacy Svelte 3:13:52 Using Svelte With AI 3:14:24 The End #joyofcode #svelte #course