From the course: React: Creating and Hosting a Full-Stack Site

The Axios library

From the course: React: Creating and Hosting a Full-Stack Site

Start my 1-month free trial Buy for my team

The Axios library

"

- All right. So at this point we have both the front end and back end of our full stack blog application, mostly complete, at least complete enough to actually start bringing the two ends together. Now to get ourselves started here. What you're going to want to do is open up both the front end and back end in your IDE. I usually like to open these up inside the same window, but you can also open them up in separate windows. So what I'm going to do in order to open them up in the same window is just change directories out to the containing directory, and run code dot. And that will open up both the front and the backend folders inside the same IDE window. Which will make it pretty easy to work with as you'll see. All right, so we have the front end and back end now. And our next task is to connect these things, right. Essentially what we want to do, is have our front end make the same types of requests that we were making from postman, but obviously the front end is going to need to make those requests using code. Now, there are several ways to get the front end to do this, but the way that we're going to be doing it, is using a library called Axios. Now, Axios is an incredibly popular library for making network requests, and it can be installed into either front end or backend projects, and used to make any type of request to pretty much any URL. So we're going to be using this library in order to have our front end make requests to the back end. So this is sort of our front ends postman, if you will. All right. So first things first let's install the Axios library, and we're going to want to install that into our front end directories. So let's open up a terminal, and you're going to want to make sure that you're in the front end directory by saying CD my blog. And once you're there, we're going to install Axios by typing NPM, install, Axios and hitting enter. Okay. So that will install the Axios library for us. So now let's talk about how the Axios library is actually going to be used in our front end application. Okay. So I'm just going to open up the app dot JS file here. And I'm just going to use this as an example. I'll just scroll all the way down so that I can use this as a sort of whiteboard, if you will. So the Axios library, it's actually incredibly simple. All you have to do is import it and once you've imported it, you can make requests to any URL you want by calling Axios dot, and then the type of request you want to make. So if you want to make a get request, all you need to do is say Axios dot get. And then the argument that you're going to pass to this, is going to be the URL that you want to make this request to. So in our case, we'll want to make the request to HTTP, colon slash slash local host, 8,000. And let's say we want to load the article data for some article, we would say slash API, slash articles, slash, and then we'd have the article ID such as learn-react, all right? And that function, called in the way that we're calling it right here, will make a request to our server. And in order to get the response that our server sends back, all you need to do is say const response, equals await, Axios dot, get, all right. So most of these functions that Axios provides, like get or post, you can also do Axio dot post, or Axio dot put, these are all going to be asynchronous, which means that you'll need to use the await keyword with them. All right. And that will give you the response, the way that you can get the data that the response contains. Right? So if we said response dot JSON, for example on the server side, we could get that by saying const, data, equals response dot data. And that's really all there is to it. All right. Now, there are other things that we might want to do, like add data to the requests that we're sending from Axios, but that's something that we'll take a look at a little later when we get there. So that's the Axios library. And as I said, this is what we're going to be using to tie our front end and back end together. So let's just delete this code here. And the next thing that we're going to want to do is take a look at how to start loading some data into our components.

Inhalt