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.5 Working With Props and Lifecycle Functions

Web applications rely upon external data. In this lesson, you'll learn how to fetch data from the server and supply it to a component with props.

2.5 Working With Props and Lifecycle Functions

In this lesson, we're going to create a generic list component, something that we can provide the data to, and it will simply list them in the browser. And this is going to give us the opportunity to look at two things. First, how to declare and consume props, and then how to use one of the few lifecycle events. Because we are going to eventually retrieve data over HTTP and provide that to our list. So let's go ahead and get started by creating a new file inside of our Components folder. Let's just call it List.svelte, and let's start with a title. So not only is our list going to of course, display a list, but let's also have the ability to have a title. So if we wanted to display a list of guitars, we could at least have a title of my guitars or my wish list or something like that. So let's have an h3 elements, we will display the title there. And then let's go ahead and write our onOrdered list. So we will use an each loop here and the syntax is more like PHPs for each instead of JavaScripts for ints. And I have to tell myself that because, well, it's just backwards to me. So for each items as item. And then let's go ahead and close the each loop and then we will simply have our li element and the item inside of that, there we go. Now, we do need to specify that we have two props here, we have title and items and we do that in our JavaScript and it's very simple, we just simply export those values. So we will have export let title, export let items. And that's it, that's how we declare our props, although let's also provide some default values. Because especially in the case of our items and since we are iterating over the items we would get an error in the console, because it would attempt to iterate over an undefined value. So if we give it a default value of an empty array, then well, that goes away. All right, so that's our list component, very simple and straightforward. So let's go to our app component and let's import that. And then we will also comment out our use of the ManualList. So that we just have our new list inside of the browser. So there we go, we have our List, and we have that title, so we can go ahead and say title, and this is a lot like all of the other frameworks if you're familiar with reactor view. I mean there are some little differences here and there but for the most part, we just simply say title is a prop that we want to supply data to, and anything inside of the curly braces is a JavaScript expression. So if we wanted to create a variable called title, and we can say My guitars, we could use that as the title here. Let's say that, let's look at the browser and of course, we see my guitars. And something else we can do is just have a string literal here that says My Guitars as well. And notice that this has an uppercase G as opposed to a lowercase g. And so if we go to the browser, we can see that is indeed what we have. So we could do one of two things, we could assign this string value to a variable, and then refer to that variable here or we can just use a string literal. And then we have our items, and we can do essentially the same thing. We could harp code this array here. So that we have a Les Paul, I cannot type Paul for whatever reason. We could have a Vela, we could have a Strat. And let's save it, let's go to the browser, we have our list there. All right, so we have declared props, we are consuming them. So now let's retrieve a JSON file, and let's use its contents as the items. So let's first of all creates that JSON file. This needs to go inside of the public folder. And let's call this guitars.json. And I'm just going to paste this in, of course, this is incorrect because this is JSON. We need some double quotes here. So let's change those, let's also have another item here. So we'll have Les Paul, Vela, Strat, and Talman. So this is the data that we want to retrieve. And then the question is okay, how do we go about doing this? I mean, because we can't immediately just go ahead and retrieve that information because this components might not be fully loaded yet. So just as all of the other frameworks have lifecycle hooks or lifecycle events, svelte does too. And what we want to do is issue our HTTP request whenever this component is mounted. So we need to import the onMount function. This is going to give us the ability to hook into this lifecycle event. This is of course, from svelte. And then we will use the onMount inside of our JavaScript. So we will have onMount, and let's make this all async, so we'll have an async function, and we will fetch that guitars.json. So let's have our response = await fetch('guitars.json'). And then, we need our items don't we? So let's have our items set to an empty array. And then, after we have our response, we will call the JSON method. So of course, this is using the Fetch API, if you're not familiar with that, well, you don't have to. I mean, if you want to use Axios or anything like that you can, but since Fetch is easy enough to use here, in this case, especially with await, I just chose to use that. So we are fetching guitars.json. Then we are converting that data into a JavaScript array from JSON. And that should give us exactly what we want. And so the last step then is to say that this items prop is going to be the value of the items that we defined up inside of our JavaScript here. So if we go to the browser, we have our four items. And if we wanted to add a fifth, let's go ahead and open that file again. I don't have this guitar, but I really want an Explorer. So if we go back and refresh, we can see that it is successfully pulling in that JSON file. It's converting the JSON into an array, thanks to the Fetch API. It is assigning that array to items which is being passed as a prop to the items prop for the list component, and it is iterating over those items. And so, there you go, it is following the same ideas and concepts that are used in all of the other frameworks.

Back to the top