What is a Svelte Component?
Alright then, going. So like I said before, it would benefit you enormously to already have a basic understanding of Svelte before carrying on with this course. And if you want to learn Svelte in detail, then I've got a whole series that's going to teach you all about it from the ground up, so I'm leaving a link to that series down below the video. But I'm also going to use this lesson right here to give you a quick overview or refresher, if you like, on Svelte's components. If you don't need this, feel free to skip to the next lesson, but for the rest of us, what is a component?
Well, a component is basically a standalone section of a web page. For example, a navbar could be a component, an article on your web page could be a component, or a banner could be a component. In SvelteKit, whole pages are represented by components as well. So if you have an about page, we'd have an about component to represent that page, and if we have an index page, we'd have an index component to represent that page. And that's exactly what we have right here: an index component. And this index component inside the routes folder is the component which we'll see if we go to the index page of this website.
The Structure of a .svelte File
We'll talk about pages and routes a little bit more later on, but for now I just want to focus on the components themselves.
Now, Svelte components have to be named something.svelte. That way, SvelteKit knows that this is a Svelte component, right? And inside a Svelte component, we can essentially have three different things: an HTML template, which is the HTML that will be rendered to the browser; a script tag for any interactive JavaScript code for this component or any reactive, dynamic values that we want to inject into the template; and finally, a style tag for any CSS to style the templates. And that's pretty much it at the most basic level. Now, you don't actually need to have a script tag or a style tag, and a component can just be an HTML template. But most of the time you'll find yourself using these other things as well: a script tag and a style tag.
Modifying the Template and Styles
So let's take a closer look at this index component and play around with it. So the first thing I'm going to do is just change up this template a little bit. So let me get rid of all that and then we'll do a div, and I'm going to give this a class of index so that I can style it down here. And inside here—and by the way, generally when I have pages and components as pages, what I do is I give each one a class which represents that page so I can style that page, but you don't have to do that. Anyway, inside here we'll do an h2 with, you know, some title and then down here I'll do a paragraph tag with a load of lorem ipsum like so. And then let's just style this index div a little bit. I'm just going to paste this selector in and all we see is text align to the center, display is block, and margin top is 20 pixels, bottom is 20 pixels as well, also left and right. So basically everything is just going to sit in the middle of the page, center aligned and it's going to have a bit of margin top and bottom as well.
So now let's just save this and preview in the browser. All right and there we go, that's all worked. So we have the title and the paragraph and everything is centrally aligned and I didn't have to refresh the browser to see that change, it just automatically did it for me when it recognized that we changed a Svelte component and then saved the file.
Rendering Dynamic & Reactive Values
All right then, so what if we wanted to output some kind of dynamic value in the template as well? For example, we could have a variable up here which I'm going to name title, and we'll set it equal to 'Ninja Gaming Guides'. What if I wanted to output whatever the value of this variable is inside the template? Well, we can do that. We can output dynamic values inside curly braces like so. So curly braces and then the name of the variable. And now we're going to see this 'Ninja Gaming Guides' value inside the h2. And we can see that right here and we get the title, which is the value of that variable. Awesome.
Now when we use a dynamic value like this in a template that's coming from up here in the script, whenever this value changes of this variable to something else, then that change will be reflected in the template because it's a reactive value. So Svelte reacts to the changes in the value.
Handling User Events with on:click
So, let's do an example. Imagine we had a function which is then going to change this value. So let me create that function first of all, and I'm going to call it updateTitle like so, set it equal to a function. And then inside here, all we need to do is say, okay, we'll take the title and set it equal to 'Something completely different'. All right, so now it becomes this new string value.
Now that's fair enough, but when do we actually run this function to change the title? Well, if we wanted to we could run it in reaction to some kind of user event. So I could create a button down here for example, and that button is going to say 'Change the title'. And then if I wanted to add some kind of event listener to this, I can do that by saying on and then a colon and then whatever the event is, in this case click, and then we set it equal to something dynamic, so curly braces. Now we're setting it equal to something dynamic because we want to pass in a JavaScript function and that function is updateTitle, if we can spell it right, updateTitle like so. Now we don't need to invoke it because that's automatically going to invoke the function when we load the page. Instead we just want to pass in a reference so that when we click the button it then runs the function. So now when we click on this button, it's going to run this function and it's going to run this code, update the title to be this new value, and when the title updates that change is going to be reflected in the template. So let's give this a whirl.
All right so now we can see this button down here, change title and watch the value of this change right here. So this is the initial value of the variable title, right? If we click on this, we run that function and it updates the title variable. And when a variable changes that we use inside the template, then it's reflected in the template as well, that change.
Two-Way Data Binding with bind:value
Now one more thing I want to quickly show you as well and that's how to bind values or variables to input fields as well. So say for example, a user was to type into an input field. Whatever they type into that input field, I'd like to update the title to be that value. So if they type in 'hello' then the title becomes 'hello'. And then when this changes, obviously that title is going to update down here as well. So let me show you how to do that, how to bind values to inputs because this is something you'll probably do if you have some kind of web form when you're using Svelte or SvelteKit.
So let me do an input first of all, the type is text and all I need to do is come over here and add a bind attribute and then a colon and then what do we want to bind to? Well we want to bind to the value of this input. So you know input fields have value attributes and that controls what's displayed in the input. We're binding to that and we're going to bind a specific variable to the value attribute so that when the value of the input changes, then the variable will change to match that, and vice versa. If I was to change the title by clicking this button for example, then the value of this input would be updated to match whatever the title is. All right, so they both stay in sync with each other.
So we set this equal to not quotations but curly braces instead, and then whatever variable we want to bind to, in our case it's the title. So let's save this and check it out. So when we first load the page, we can see that the value already is 'Ninja Gaming Guides' and that's because we've bound the value of this input to be the value of the title itself. So the initial value of title, the variable, is 'Ninja Gaming Guides' and that value is then showing in the input. So if we change this though, if I delete all this, then it's going to bind back to the title and change the title to be now an empty string. And because that changed where it's outputting the template, we see an empty string as well. If I change this to 'hello' then it becomes 'hello' over here, and this still works. If I change the title, it's going to update it to 'Something completely different' and also that change is reflected down here because again, we've bound that variable to the value attribute of the input.
All right, so hopefully those different concepts give you a bit of refresher as to how Svelte components work. Again if you want to learn more about Svelte, definitely check out my full Svelte tutorial. The link to that is going to be down below the video. But now we know a little bit more about components. Next up, we're going to move on and talk about pages and routes in SvelteKit.
