Hopefully, as we go through these next few videos, it'll start to become clear exactly what this library is doing and how it allows us to take our local application, just our portfolio application and then have that communicate with an outside server and that is really, when it comes down to it, that is the way just about every application that you go to on the web or even with mobile devices works today.

So let's walk through exactly how to do this, and the process I'm going to follow is gonna be very similar to what I would do if I was learning about a new library like Axios. Instead of me having notes and simply typing out exactly what I am going to implement, I wanna show you how you can use the documentation so that later on when you're learning some other new library then you'll know how to apply that.

So right here I'm on the Axios documentation page and if I scroll down here, right after the installation instructions, I have an example.

This is really helpful because they give you a real-life example on how to perform an API query and so this very first one is exactly what we need. So I'm just going to copy this and switch over into Visual Studio Code and let's open up just the main application. I'm going to go here and we'll eventually move this but for right now let's just open up our app.js and see exactly what we need to do in order to make this work.

I'm going to, right under moment here, I'm gonna say I want to import Axios from Axios because this is a library we have installed in our node modules, and then I'm going to create a new function right above where it says render. Right here I'm just going to say something like getPortfolioItems and this is just a regular class function and then I'm gonna paste in that code that we got from the documentation. If I save, the prettier gem or the prettier plug-in will readjust and now this is all nice and formatted.

Let's see how we can communicate with that API. So now let's switch back to DevCamp Space here and grab the link that is at the top where it says all items.

Now because all items is something that doesn't have any type of confidential information, it's not something that we need to protect, it's open. So there are gonna be some APIs that you can simply call in the browser just like we've done right here. And then you're gonna have some APIs that require authentication. For example, you wouldn't want just anyone to be able to create new portfolio items for you, or else that could definitely be a pretty serious security breach, you wouldn't want someone deleting or updating any of your items.

So those are gonna require authentication, so we're going to wait until later on in order to implement that. But for right now, all items, so all of our portfolio items, we don't have a problem with that being nice and wide open. If someone wants to take a look at all my portfolio items, they are more than welcome to do that. This is a great first example of how to retrieve the data because this doesn't require any extra security.

So let's switch to Visual Studio Code and get rid of the code that they have there for the example, and just paste that URL in. Now the difference between my URL and yours is gonna be that you will have your own subdomain but everything else should be exactly the same. So after I've done that, I do need to make a couple of changes here that are specific to react.

So by default, their documentation has this function keyword but what I wanna do is, I'm gonna get rid of that and I'm going to just say response and then use an arrow function and the reason for that, if you remember back to when we talked about arrow functions and how they worked in modern JavaScript, remember that they change how this keyword is scoped and so that's gonna be very important when it comes later down the line when we want to update our state with this response, so this is very important.

If you do not make this change, you're gonna run into a lot of bugs and so I want you to be able to avoid that. So we're going to change these into arrow functions and that is all that we need to do for right now. You can see that we're gonna be console logging the response, in one of the next guides we'll see how we can render this on the page. But for right now, let's just console log this and right now, this is not being called at all, this is just a function that we're creating so now we need to call this.

And so for right now, just for testing purposes, I can call this inside of the render function but we also need to add a constructor, so I'm gonna say constructor here at the top and then make sure to call super and then we need to bind this method. So I'll say this.getPortfolioItems = this.getPortfolioItems.bind(this);.

So what this is doing is we're saying that we want the ability to call this method and then to be able to reference it as a method inside of this class so now, if I copy this and go down into the render function, right above return, I can say this.getPortfolioItems, hit save and now every time that this main app render function is called, it is then going to call getPortofolioItems, it's going to contact the API and then it's going to log out whatever the response is.

Now one key item here to keep in mind is that you need to go into your portfolio items here and make sure that you do have some test data, I have quite a few items here. If you don't have any, just go down to the form and then add a name, description, add any kind of data points you want, you can upload images, and just make sure that you have a few.

They don't have to be the final ones, you'll be adding and updating and deleting these as you manage your portfolio. But for right now, just do it so you have some test information, and as always, you can always test that out by just going to that URL.

So now that we have all of that, make sure that you have your server running and now come down, open up the console and let's see exactly what kind of data that we're getting back. So if you hit refresh here, you can see that we have something logged out. And if you want, you can always add some descriptors. So if I wanted to say something like, this is gonna be my response data. Make sure you separate this as a string, a comma, and then response, hit save and now you'll know exactly what is being sent back.

So we have response data and now we actually have real-life data coming in. So this is coming in directly into and from the API. So we're having our response data and if you click on the data key here, you'll see that it is bringing eight portfolio items.

And if you switch over to DevCamp Space right here, you'll see that I have eight records, so this is working out perfectly. I have these portfolio items, they're sent in an array and now I have this collection of each one of these data points.

So that means that our API is working, we set up Axios, we imported it, it is then going out to the server, to the DevCamp Space server, it's grabbing our portfolio items and then it's bringing them back. So if all of this is working out for you, then that means that you're bringing in real-life data into your application.

And so now in the next guide, we can set up our home page so that we can take this data, and instead of having these hardcoded values like we have right now, we're going to bring in our real data directly from the API.

Resources

• Source Code