Benjamin Schachter: Learn Svelte Using React

[@DmitryShpika]

First, at 720p I can barely read anything, and there are no higher resolutions available. Second, Benjamin's explanations don't explain anything. I'm sorry to say that, but I had to open and read through the tutorial myself to be able to understand what he talks about. I don't mean it to be a personal attack, but he needed to write a script with a proper explanation before shooting this video. Just to be fair, here's my take on explaining these "Keyed each blocks": Let's imagine our Thing components have names when they are mounted: Alice, Bob, Charlie, Dilan, Earl. The "things" is an indexed collection of shirts - each shirt has an index in the range of [1..5] written on it. Initially, Alice gets the shirt #1, Bob gets #2, Charlie gets #3, etc. Then we call `shirts.slice(1)`, removing the first shirt (shirt #1), so now we have shirts 2 through 5 left. Svelte also removes one of our guys *from the end*, so we left with Alice, Bob, Charlie, and Dilan, since Earl was the last one and got removed. But now, Alice gets the shirt #2, Bob gets #3, etc. The shirts are "shifted" by one. We call `shirts.slice(1)` again, left with shirts 3-5, and now Dilan has to go, we have Alice with the shirt #3, Bob with #4, Charlie with #5. The shirts are "shifted" by two. We call `shirts.slice(1)` again: Alice gets #4, Bob gets #5. Last call: Alice gets #5. It happens because, by default, Svelte doesn't know which shirt belongs to which person. We tell it by passing a key, which matches the person to a shirt, so that when we remove the shirt #1, it knows that it Alice's shirt and it removes her, not Earl. I know it's a childish explanation. Here's a technical one: props are passed as arguments to a function call, while inner variables in a component are bound upon the component initialization, and never change after (unless they are reactive). Since Svelte by default has no mapping between `Thing` component *instances* and values inside the `things` array, it simply removes the last component instance (and hence its DOM node), causing the values from `things` to shift each time we slice the array, since we're slicing from the other end.

[@bunny_the_lifeguard9789]

Watch at 1.5x speed.

[@57_piyushkushwaha37]

My first framework was svelte, after learning i found that in my locality no jobs available to have to switch react 😑

[@rallisf1]

svelte is too new/niche for most companies to use. It's my frontend framework of choice for over a year now. Freelancing has its perks I guess :)