Complete React Tutorial (& Redux) #29 - Using Axios

or right there my friends so typically when we're creating a website we'd like to at some point reach out and grab some data from somewhere to make our site more dynamic and show data to our users and this could be from some kind of REST API on your server or some other third party API or a service like firebase going direct to the database now we'll be hooking up a react app to firebase in a playlist coming up directly after this one but for now what we'll do is just use a third-party REST API to get some fake dummy data from and that API is called JSON placeholder so I'll leave this link down below so you can go and check it out but essentially what this does is give us access to some REST API endpoints to receive some dummy data so for example if we type in this or try to fetch this it's get a grubbles a to-do in JSON format or if we grab this right here and then follow it up by any of these things down here posts comments albums etc we get that data so as an example let me just paste this in here and then go to forward slash posts and you can see all of this data right here that's what we'll be getting back in JSON format so this is the URL right here that we're going to be using to grab some dummy data for our application and we're going to display that to a user in a presentable way so how are we going to do this well we're going to use an HTTP request library called Axios you might be familiar with that already but to do that we're going to have to install it as a separate package so new terminal and then CD into the current directory which is pokey times and then we'll say npm install Axios alright then so now we have Axios installed we can now use it inside this component to go out and fetch data from an external source now then how do we want to do this inside this component well if you remember back to when we talked about lifecycle hooks I said that a good place to go out and get external data was in the lifecycle hook component did mount that is when the component has then mounted to the Dom so we're going to use that lifecycle hook to go out and grab data using Axios now to do that to use a lifecycle hook inside this component we have to convert this component into a class-based component because functional components cannot use lifecycle hooks so first of all let's import components from over here and then get rid of this stuff and say class home extends components like so so now we've turned this into a class-based component but right here where we return some JSX we have to embed that in the render method inside a class-based component remember so let's cut that and do our render method and inside this we'll paste that back in ok cool so let's create that component did mount function right here now inside this this is where we'll use access to go out and grab the data so first of all let's import Axios from Axios this is the thing we just installed and by the way we could have used fetch to do this I'm using Axios because I just prefer it so we could say Axios dots gets and you could use post or another method if you prefer but we're using a get request to get some data so right here we're going to paste in the URL the endpoint that we need from this thing right here so it's this so I'll paste that in and then it's forward slash posts because we want the posts okay so this task right here it's gonna get some data this is asynchronous meaning it takes some time to go and do it doesn't happen automatically it might take half second a second or more so we don't know when this is done we can't just go underneath this and say ok now we'll use the posts this right here returns a promise and a promise basically means okay this action will complete at some point in time and when we get a promise like that we can tack on a dot then method and this dot then method fires once this has completed so any code we run inside the dot then method that will only run when we have completed this so inside the Doppler method we pass a callback function which is fired when it completes and that callback function takes the response object from this as a parameter so we have that response now inside this function and we can log that to the console and see what it looks like so console dot log response save that and check this out in a browser and now over here we can see all of this stuff logged to the console so you can see we have a property called data and this is where all the data we just received is being brought to us so we have 100 posts there each one an object with the user ID ID title and other stuff over on the right so what we need to do now is grab that data and output it to our template somehow but how are we going to do this well I think the first step would be to create a state locally to this component and inside the state will have a posts array now to begin with this component will have an empty array for the posts object right here because we don't have that data yet then when we receive the data what we'd like to do inside here is take that data and add it to this posts array so that then we can cycle through it inside the template and output it so let us now say this dot set state then inside we want to set the posts now then this is going to be equal to the response dot data remember it was all on the data object inside the response now that is gonna add 100 items to this array right here but I don't really want to add all 100 so I'm going to use the slice method to get the first 10 so we'll go from position 0 it's a 10 all right then so now we've set this property of the state right here so what we could do is cycle through that state now inside the template so inside the render method first of all I'm going to use a bit of destructuring to get the post to property from the state much like we did with props in previous tutorials so I'll say Const and then curly braces posts is equal to this dot States so all that is doing is grabbing the posts property from the state now the next thing we want to do is check if the post has any data inside the array because when the component first starts we don't have any data we have to wait until this is complete and we only want to cycle through those posts if we have data in them so to check this we're going to use the ternary operator so I'll say Const and then post list is equal to posts length and this is going to be either true or false if they have no length then it's going to be false if they do have length it will be true so question mark then this is the stuff will return if it's true if we do have posts and then : and then this is the stuff we return if it's false if we don't have posts remember we return JSX for each one of them if we want to dependent on whether we have to post yet so let's do this one first of all when we don't have any posts yet so all we'll do is write a div with a class name of center and then we'll output no posts yet okay so next up we'll do this one and in here if we do have posts we want to cycle through those posts first of all so we'll use the map method to do that will say posts dot map then inside fire a function for each post so we'll take that post and inside the function we like to return a snippet of JSX for each individual post so return and then inside parentheses we'll do a div to surround all this with a class of post and also a class of card that card class is a materialized CSS class just going to make things look a bit prettier okay now remember the surrounding div here this needs a unique key property in react and since we have an ID property on the posts that we get back we can say this is equal to post ID I'll show you those quickly you see we have an ID 2 3 4 5 6 7 all the way up to 100 and so we can use those for the key right here ok inside that another div with a class of card content and that again is a materialized class to make things look nicer then a span with a class of card title and then inside here will output the post title so we have a title property on the these objects over here if we scroll across we can see that title we also have a body property which is all of the text so we'll output that as well underneath so underneath here do a P tag and then output post dots and body alright then so without putting this JSX for each individual post and we're storing that JSX array inside this post list variable so now down here we don't want to output all this stuff instead will output the post list like so so that's either gonna be a series of this stuff or this stuff if we don't have any post yet before it's made that request so let's save this and check it out in a browser and we can see now that we have all of those posts on the page the title and the body right here as well okay and there should be ten of them because we slice that array and we used only ten of them on the state now if you refresh quickly you should see that all the message flash up this thing right here before we retrieve the posts so that's when that shows when we don't yet have the data we show this when we do have the data we show that it's a very quick but if you refresh you might just quickly catch that little message okay so there we go my friends that is how seriously easy it is to use a lifecycle hock component did mount to go out and grab data using Axios store it to the state then cycle through that data in the template

Channel: Net Ninja

Views: 138,275

Keywords: react, react tutorial, react tutorial for beginners, beginners, tutorial, redux, redux tutorial, react & redux, react redux, react and redux, axios, react axios, axios tutorial, axios vs jquery, react axios tutorial, axios componentdidmount, componentdidmount, react componentdidmount, react component did mount, component did mount, axions component did mount, axios get, react async

Id: 4uzEUATtNHQ

Length: 10min 25sec (625 seconds)

Published: Mon Aug 27 2018