The Complete Svelte 5 Course For The Most Loved JavaScript Framework

Thank you Sentry for sponsorsing! Check out Sentry at https://sentry.io/.

🔴 Patreon: https://www.patreon.com/joyofcode
💬 Discord: https://discord.com/invite/k6ZpwAKwwZ

⚓️ Links

🔗 Starter: https://github.com/joysofcode/learn-svelte
🔗 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

Видео The Complete Svelte 5 Course For The Most Loved JavaScript Framework канала Joy of Code