So let's go ahead and jump right in. I'm going to install Svelte using the commands outlined here in the documentation. So degit is a scaffolding tool, but you can also make use of vite, which also has support for Svelte. So we'll just grab this, let's go ahead and paste that in. Let's rename it to lcsveltexample, okay let's go into that, and we have to npm install and then npm run dev. Let's go ahead and open this in VS Code, and let me stop my other project here, and let's run npm run dev. And you can see it's using rollup as a bundler, but like I said vite will work as well.

run npm run dev. And you can see it's using rollup as a bundler, but like I said Vite will work as well. So let's go ahead and open this in the browser, and there's the default app. Let's go ahead and take a look at the default folder structure. So we have our src folder here, we have our entry point which is main.js, we are importing a default app Svelte component here, and we're creating a new instance of it here. So the target is document.body, and we're passing in a prop variable with the name name and the value world. So this target right here mounts it to an HTML page which you can find in public, I believe it's index.html, so you can see it's just mounting it to the body here.

So this target right here mounts it to an HTML page which you can find in public, I believe it's index.html, so you can see it's just mounting it to the body here. So the app will get injected within here. So in Vue and React, you'll often see this with a div with an ID of app, but here in Svelte, it's just attaching it to the body itself. Now if you take a look at the app.svelte component, you'll see a few things here. If you've used Vue single file components before, this should feel very familiar. So we have a script section where all of your JavaScript goes. In this case, we are accepting a prop named name, which is this right here. We have a template section, which is where all of your markup goes.

In this case, we are accepting a prop named name, which is this right here. We have a template section, which is where all of your markup goes. Again, if you've used Vue before, you'll see this within a template block, but in Svelte, you don't need to do that. And we also have a style block here for our CSS. And any CSS within here is scoped to this component only, which we'll take a look at as well. So if you're using VS Code like I am, make sure you have a few extensions installed for a better experience. The first one is for syntax highlighting, it's called Svelte for VS Code, again for

We'll work in split screen here, the hot module reload should work pretty quickly and should reload the browser as we make changes. Okay. So the two most important features for these modern frameworks, in my opinion, are reusable components and also reactivity. So let's take a look at those two. So we'll make a new component here called counter.svelte. And let's go ahead and make a script section here. And let's just put something here for our template counter here. Okay.

And let's just put something here for our template counter here. Okay. Let's go back to our app. We can import it as we usually would in modern JavaScript. So import counter from 'counter.svelte'. Okay. Save that. And we can use it wherever we like. So I'll just put it down here, say counter, close that out, and that should render. And there it is.

So I'll just put it down here, say counter, close that out, and that should render. And there it is. Now, if you want to pass props in, we can do that as well. Let's pass in a title. Let's give it a title of myCounter. Let's save that. And within our counter, to accept a prop, we can use the export syntax for a variable. So we can say export let title. And you can pass in a default value here if you want, say myDefaultTitle. But if you do pass in a prop, like we did, then that will be used instead.

So it will re-render the component with the updated value. So again, super simple. No need for boilerplate code, like useState or setState in React, or refs and reactive in Vue. Just declare a variable, and Svelte will take care of the rest. Let's go ahead and add our counter to our template. So we'll make a new div here. This will be where our count is. So count is count. And here is where we'll put our buttons to increment and decrement the count.

So count is count. And here is where we'll put our buttons to increment and decrement the count. So we'll make one for decrement. And we'll make another one for increment. So to listen for events, we can use the on syntax. So we want to listen for a click event for these two buttons. So we can say on:click. And we can either do it inline or specify a method. So let's specify a method here. This one will be called decrement.

So let's specify a method here. This one will be called decrement. And this one will be called increment. So we can declare that in our script section here. You can use an arrow function, but I prefer the function keyword. Let's start with decrement here. And we can just mutate the state directly and decrement the count. So let's do the same for increment, but increment it and change the name. So count++. And now our counter should work.

So count++. And now our counter should work. So let's give that a try in our browser. count is incremented and decrement works as well. So again, a minimal amount of boilerplate code required to get something reactive working within your application. If you want, you can even do it inline here. Just pass in a callback and then update your state accordingly. So count minus minus. And that should work as well.

So count minus minus. And that should work as well. Now let's take a look at reactive properties, which is similar to computed properties within Vue. So if you want to compute some sort of value that depends on other state, you can make use of reactive properties. So the classic example within a counter is to double the count. So let's do that. So the syntax is $, give it a name, so doubled. And in this case, we just want to double the count.

And it does work. And if you want, you can have multiple statements as well. So you can sort of use it like a watcher. Let me just paste in some code here. If you wrap it in curly braces, you'll see that we have two statements here. And we're just console.logging two things here. So anytime the count updates, this will be run. So let me save that. Let me open up DevTools here. You'll see that it ran once there.

Let me open up DevTools here. You'll see that it ran once there. And every time I increment the count, that will run as well. You can also make use of lifecycle hooks. So for example, if you want to do something when the component mounts, we can make use of the onMount function. So you can put this wherever you like. Let's say onMount. And I'm going to hit tab here. Hopefully that imports it.

And I'm going to hit tab here. Hopefully that imports it. And it does from Svelte. We can just provide a callback here and do whatever we like. So in this case, I'll just console.log component or counter mounted. And that should show once this component is mounted. So let me save that. Back to Chrome. Let's open up DevTools again. And you do see it logged there.

Let's open up DevTools again. And you do see it logged there. Let's take a look at two-way data binding, which is another common feature amongst these modern frameworks. So let me just go back to my template down here. Let's create a new section for a form. I'll just say form action is fine. Let's put an input type="text". And we'll put another div in here. So we can see the two-way data binding happening.

And we'll put another div in here. So we can see the two-way data binding happening. So I'm going to make a new variable named myText. And we'll just output it here. Let's go ahead and create that in our script section. So I'll put it right here. Again, just define a variable for it to be reactive. So let myText = ''; Or if I put something in here, you'll see it appear underneath the text box. Say hello.

Or if I put something in here, you'll see it appear underneath the text box. Say hello. Okay, there it is. But we want a two-way data bind it. So I'll just put it back to an empty string. And anytime we type into this text box here, then we want the variable to update as well. So again, very common in Vue, where you would make use of v-model. So pretty much the same thing, except the syntax is bind: value. And then we provide the variable name. So in this case, myText.

And then we provide the variable name. So in this case, myText. Now as I type into here, you'll see underneath it will output that as well. So again, very practical, especially when working with forms. Okay, now let's take a look at conditionals. About within our template, we add some text if the count is above a certain number. So I'm going to make use of my snippets here. So that snippet extension I showed you earlier. So if I type s-if, you'll see spelt if block here. So I'm going to hit tab.

So if I type s - if, you'll see spelt if block here. So I'm going to hit tab. And that's the syntax for it. So for the condition, let's say if count is greater than 5, then go ahead and output count is high. Let's save that. And let's increment it up to 5. And there you see the text appear. If you want to make use of an else block, we can do that as well. So the syntax is a colon else.

If you want to make use of an else block, we can do that as well. So the syntax is a colon else. We can say count is low for this case. No, okay. And there it is. And it should change to high after we pass 5. You can also make use of else if blocks if you have multiple conditions. So let's duplicate this. Let's use else if here. And the condition is going to be count is greater than 5.

Let's use else if here. And the condition is going to be count is greater than five. We'll change this to a higher number. And we'll add something in here as well. Let's say count is in between. And that should work. So I should start off low. And then it should go to in between after five. And then after 10, it should be high. Let's also take a look at how we can loop over data.

And then after 10, it should be high. Let's also take a look at how we can loop over data. So I'm going to go back to my script section, I'm going to add a new variable for toDos, which I'll just paste in, let's put it underneath here. So it's just an array of to do objects, and we want to loop over them and display them in the browser. So again, let's go back to our template. Let's put it underneath here. So underneath our form, we'll make a new section here. Let's say each to each.

So underneath our form, we'll make a new section here. Let's say each to each. And let's put it within an unordered list. So let's say ul. And to loop over something, we can make use of the each syntax, again, make use of the snippets extension. Let's say s-dash each, or each block, tit tab. And that is the syntax. So we have a list of to dos. We can refer to them as a to do for each iteration.

So we have a list of toDos. We can refer to them as a toDo for each iteration. And then we can just display them here. So we'll put it within a li element. And we can say toDo.title. And that should work. And there they are. Cool. If you want, you can also destructure certain properties from within here, say title, then we can just refer to it as title here, that should work as well.

If you want, you can also destructure certain properties from within here, say title, then we can just refer to it as title here, that should work as well. So if you wanted to add the ID as well, we can grab it from here. And use it right here as well. Save that. If you want to grab the index, you can specify it here, just add a comma, let's say index. And it's output the index as well, right before the ID. Save that. Okay. And although it's not necessary, sometimes you do have to specify a key, especially when

And one last thing on CSS, like I mentioned earlier, whenever we do have a style tag with CSS defined, it's only scoped to this component. So for example, within the app component, we have an h1 tag here, which has these styles here. But if we use an h1 in here, you'll see that it won't have those styles. So if I change this each to an h1, you'll see that it doesn't inherit those styles, because they are scoped to that specific component. So if you do want global styles, you can still import CSS the traditional way. So let's go ahead and take a look at that. Let's make a class named hello, which will be global.

So let's go ahead and take a look at that. Let's make a class named Hello, which will be global. This is global. Let's add this to our app.svelte as well. So it shows here, let's put it somewhere in app.svelte as well. So we'll put it right here. Now we have to define a Hello class that's global. So we can say, or we can make a new file here, style.css.hello, let's just make it color green, and that should be global. So let's save that if we import it into app.svelte.