By now, we have covered all the bits you need to know in order to get started using components in your applications. Before you do that though, it's best to do some practice so that you commit what you've learned to memory, since the best way to learn code is by writing code. When you are working on a website, you usually have a template or you use a CSS framework like Bootstrap, Bulma, or Symantec UI. Breaking the template or common elements into components is one of the most common use cases.
Just for the exercises, I will be using semantic UI that comes with a ton of UI elements. If you prefer to use another CSS framework that you are more familiar with, then do that. One drawback of semantic is that it requires jQuery in its JavaScript library, though we will just use their CSS, so we don't need anything extra. The element that we will use in this exercise is the card.
The goal is to create a component that displays a person's GitHub profile. Like so. This will be the user's avatar. This their name.
Here we can use the date that the user registered. Here the bio. And lastly we can display the number of followers the user has. We can also fix the links.
to send to the user's profile page and followers page. You can copy the markup if you click this little icon over here. Don't forget to include semantic UI in your page. I recommend you grab their full CSS file from a CDN.
The goal of this exercise is to create a component like GitHub user card that accepts the user name of the user to display. Something like this. Now, As you're probably thinking, the component needs to make an AJAX call to GitHub's API in order to retrieve the user's details. You can do that using the fetch method or the Axios library in a component's lifecycle hook.
com slash users slash whatever the username is. I've included some boilerplate code here. js, Axios, and Symantec UI's CSS. You will find the link in the description of the video.
Okay, it's time for you to pause the video, do the exercise, and come back to see the solution when you are ready. If you struggle solving this, don't worry and don't give up easily. It might take a while if this is the first time that you've written a component. or if you're just starting out with you.
If that's the case, I advise you to try as hard as possible to solve this and the next exercise by yourself before looking at the solutions so that you can truly understand the concepts. If you have any questions, you can leave a comment or chat about it in our Slack workspace. Okay, go on. I'm waiting.
Welcome back. Let's see how we can implement the GitHub user card component. I like to begin with the JavaScript of my components and make sure I have all I need before I tackle the components template. To get started, I will register the component and give it a prop that is username that we need in order to know which user to look for.
The username should be the type of string and it will be required. The functionality of this component is to make a call to GitHub's API to get the user's details in order to display them. So, let's add a data property to store the user object in. Now it's time for the fun part.
We will do the AJAX call once the component is created and before it's mounted to the document. For this stage, we will use the created hook. get method to make an AJAX request. This will allow us to grab the user from GitHub using the past username.
Then, I will change the created lifecycle hook to async so that we can await the response from GitHub. Finally, I will set the response data to our user data property. Looks good, since we already used the component. in the HTML.
If we open the DevTools, we can inspect the component's instance and confirm that the user object is here. Great! We can also take a look at its properties that we will use in the component's template. Okay, let's fix the template now.
I will create a template and use its ID to assign it to our component. Let's move the HTML for the card inside here. and then I'll just move the template down with the other scripts. Lastly, I'll register the template on the component.
Inside of the template, we have access to the user object, so I will replace the hard-coded values with what we get from the API. If you want to see the available data, you can either check the DevTools or open the GitHub API in the browser. For the links, we can add them directly in the template or create computed properties. I will just put them in the template.
Great, our component is ready. Let's check it out. Whoops, we need the hashtag selector here. Great, it works.
Now we can create as many GitHub cards as we want. If we want to create many GitHub cards, we can create an array in our data. And then we will use v4 to loop over each item in the array. creating a card for each.
Cool. Now we have all these people here. By now, we have covered all the bits you need to know in order to get started using components in your applications. Before you do that though, it's best to do some practice so that you commit what you've learned to memory, since the best way to learn code is by writing code.
When you are working on a website, you usually have a template or you use a CSS framework like Bootstrap, Bulma, or Symantec UI. Breaking the template or common elements into components is one of the most common use cases. Just for the exercises, I will be using semantic UI that comes with a ton of UI elements. If you prefer to use another CSS framework that you are more familiar with, then do that.
One drawback of semantic is that it requires jQuery in its JavaScript library, though we will just use their CSS, so we don't need anything extra. The element that we will use in this exercise is the card. The goal is to create a component that displays a person's GitHub profile. Like so.
This will be the user's avatar. This their name. Here we can use the date that the user registered. Here the bio.
And lastly we can display the number of followers the user has. We can also fix the links. to send to the user's profile page and followers page. You can copy the markup if you click this little icon over here.
Don't forget to include semantic UI in your page. I recommend you grab their full CSS file from a CDN. The goal of this exercise is to create a component like GitHub user card that accepts the user name of the user to display. Something like this.
Now, As you're probably thinking, the component needs to make an AJAX call to GitHub's API in order to retrieve the user's details. You can do that using the fetch method or the Axios library in a component's lifecycle hook. com slash users slash whatever the username is. I've included some boilerplate code here.
js, Axios, and Symantec UI's CSS. You will find the link in the description of the video. Okay, it's time for you to pause the video, do the exercise, and come back to see the solution when you are ready. If you struggle solving this, don't worry and don't give up easily.
It might take a while if this is the first time that you've written a component. or if you're just starting out with you. If that's the case, I advise you to try as hard as possible to solve this and the next exercise by yourself before looking at the solutions so that you can truly understand the concepts. If you have any questions, you can leave a comment or chat about it in our Slack workspace.
Okay, go on. I'm waiting. Welcome back. Let's see how we can implement the GitHub user card component.
I like to begin with the JavaScript of my components and make sure I have all I need before I tackle the components template. To get started, I will register the component and give it a prop that is username that we need in order to know which user to look for. The username should be the type of string and it will be required. The functionality of this component is to make a call to GitHub's API to get the user's details in order to display them.
So, let's add a data property to store the user object in. Now it's time for the fun part. We will do the AJAX call once the component is created and before it's mounted to the document. For this stage, we will use the created hook.
get method to make an AJAX request. This will allow us to grab the user from GitHub using the past username. Then, I will change the created lifecycle hook to async so that we can await the response from GitHub. Finally, I will set the response data to our user data property.
Looks good, since we already used the component. in the HTML. If we open the DevTools, we can inspect the component's instance and confirm that the user object is here. Great!
We can also take a look at its properties that we will use in the component's template. Okay, let's fix the template now. I will create a template and use its ID to assign it to our component. Let's move the HTML for the card inside here.
and then I'll just move the template down with the other scripts. Lastly, I'll register the template on the component. Inside of the template, we have access to the user object, so I will replace the hard-coded values with what we get from the API. If you want to see the available data, you can either check the DevTools or open the GitHub API in the browser.
For the links, we can add them directly in the template or create computed properties. I will just put them in the template. Great, our component is ready. Let's check it out.
Whoops, we need the hashtag selector here. Great, it works. Now we can create as many GitHub cards as we want. If we want to create many GitHub cards, we can create an array in our data.
And then we will use v4 to loop over each item in the array. creating a card for each. Cool. Now we have all these people here.