Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:9Length:56 minutes
First look at svelte javascript framework 400x277
  • Overview
  • Transcript

2.2 Creating Components and Binding Data

Like other front-end frameworks, Svelte is built around components. You'll learn how to create a component and bind data inside of it in this lesson.

2.2 Creating Components and Binding Data

In the previous lesson, we created a Svelte project. And we did so by what is essentially copying the latest commit of the template repository on GitHub and using that as our project. And of course, we didn't manually do that. We relied upon the Git to do that for us. And then we very briefly went over the of our project. We know that the entry point is main.js because that is what is defined inside of the config file for the input file that is set to main.js. So if we wanted to change that we could and then we have this app component. And components in Svelte are a lot like components in other frameworks except that we aren't working with JSX. So we are not bound to the rules of XML, we don't need a root element. And I don't know about you but I really like that. Because there are some components that I just didn't wanna have a root element or a containing element because that just muddied up the markup. So we don't have to worry about that in this case. And one thing that you might have picked up on that I didn't point out is unlike Vue and React, we aren't working with an object that represents this component. If you'll notice this name variable is defined inside of the JavaScript and then it's referred to inside of the markup just by using that identifier. It's not this.name, it's just name. So in a lot of ways, you can think of this as a file that is wrapped inside of an immediately invoked function. Because just about everything that we define inside of this file, including the CSS is scoped to this component. And that's really nice change as well, at least in my opinion. So in this lesson we're going to create a new component and include that inside of our add component. Because we obviously don't wanna define everything here inside of app so lets create a new folder inside of source. Let's call it components, and let's create a new file. And we'll call this HelloForm so this is going to be a form that a user can input their first name and last name and we can display that. It's not going to be super useful but it's at least going to give us something to work with. And let's have an h3, no, an h4 that says Tell Us About Yourself. Now we don't have to have any scripts or CSS or anything. All we need is a file and then we can include that inside of our app. So I just have some markup here so that we can actually see that that is going to be brought in. And Svelte is not going to complain because it doesn't have JavaScript or anything like that. It's just going to work. So let's call this HelloForm. And this is of course, inside of components and then HelloForm.svelte. And then we just use this identifier as an element name. I'm going to get rid of this p element. And we will just have HelloForm. So if we go to the browser, we can see the Hello world that was done for the template, and then Tell Us About Yourself. So we are bringing in that component. And so now we just need a form and let's have two fields here. I'm just going to paste that in because you do not want to see me type this. [LAUGH] But it's very simple. We have a form, we have two fields, one for the first name and one for the last name. So let's put this at the top. We'll have a p element that says Hello. And then we will output what is typed in for the first name and last name. So if we look at this in the browser, we see Hello World and then Tell Us About Yourself, and then Hello. Let's do this. Let's comment out the Hello World. And as you'll see, just normal HTML comments are perfectly valid. We can see that we no longer see the Hello World, so that's nice there. All right, so we have two fields. We essentially want to bind those to some variables so that we can then use them. And so all we need to do then is write some JavaScript, so we will define a firstname variable. Let's initialize it as an empty string. We'll do the same thing for lastname. And then we will bind these variables to these input elements. So we do so with a bind directive. And then we specify after a colon the name of the attribute that we want to bind to so we want to bind to the value attribute. And in this case, that's going to be firstname. So we are binding the firstname to the value attribute on this input element and we will essentially do the same thing for the lastname. So now we have these variables and we can refer to them inside of our markup. So we could say Hello, and then firstname, followed by lastname. And whenever we go and look at this in the browser, we can type in whatever we want so we can see that the value in the DOM is automatically being updated. So as the values of our variables or the state of our component changes, the DOM is also updated as well. But now let's say that it's great that we have firstname and lastname. But we also want something that would be the fullname, which would be a combination of the firstname and lastname. That way, whenever we wanted to use the user's full name, we could just use this fullname variable. Well, we can do that with what's called a reactive declaration. And this is a little bit different. It starts with a $ sign followed by a colon. And then we have the name of the identifier that we want to use, fullname, in this case, equals and then, whatever it is that we wanted to equal. So we are going to have firstname concatenated with lastname. And that is going to work. So whenever these values change, the value of fullname is going to change. And we're going to end up with the same result. So if we go back to the browser, and in this case, let's say Joe Smith. Once again, we see Hello, Joe Smith and the DOM, which is really what we should expect to see. Now this syntax might take a little bit of time to get used to. I know it certainly has for me, but the more I use it, the more I like it. It may not be very clear, but it is very succinct, just two keystrokes. Well, a little more if you count the shift key but that's it. You don't have to define the function or anything like that. It's just automatically being done for you. Now in the next lesson, we are going to look at events because events are arguably the most important part of a web application.

Back to the top