Axios with React JS | Get Request from REST API

hi you welcome to youtube channel i'm harissan today in this lecture we are going to learn x use with react.js that how can we use x use with reac js so it's similar like which we have used for the fetching data and posting data in the react so why we are using axios with react so because it's a fast way of getting those operation so maybe you will be familiar with the what uh xus does but let me tell you about that it's a fast way for fetching posting datas on the server as you can see here written that promise base http client for the browser and node.js so we'll see it practically today so you will learn all these stuff so for that you have to create it you have to create app as i have created this app using npx create react app so if we run this you can simply uh see let's use x use with regis on the browser so first of all we have to visit the x use mpn as you can see here so first of all we will uh install the mpm ixos if you are using npm package uh mean if you have created your app using npm so you can uh write in the terminal npm and style x use while i have uh used yarn so i will type here uh yarn add axios so it will add x use in my package.json so let's wait so it has been successfully installed now type yarn start if you are using mpm so you should to write mpm start you know that so let's use xcos with rig just has been displayed because we have written this text over here so what we'll do next so we will use a peak restful api for using axios to see x use an action we are using the free fake response api that is just in placeholder if you type just in placeholder uh on the search bar you will see this result so click on this and see what's inside the json placeholder so as you can see here this is what you can see here that is it has been used switch here it is because this is the general way to use this fake restful api but we will use it using axios so if you scroll down you can see here we can create post we can post post comments albums photos to do's users all these things so these are the roads post post and post slash one if you want all the post for example if i click on the post you can see the all data in the json format as you can see here but we will access these uh dummy data in our project using axios so let's get started without further delay so this is the main.js file so let me remove this so the first thing is we have to import x use hex use from xios sorry and the second thing that we will be using this x use over here for for example we wanted to use here so the it is a simple way to use axios sorry we will use it here in the use effect hooks you will be familiar with the use effect hooks we use it for the side effect so use effect hooks which takes two argument an arrow function and dependency array use effect sorry spill mistake it's a little bit typo use effect still it has issue y is the case so we will import x use we can say import use effect use effect from react this is something we will import from react so everything is clear you will be familiar with the world use effect it's just like we use in the class component that is component did mount so after mounting so this is the similar hooks you will be familiar with this we use it for the side effect for fetching data so for example i fetch those record which we can see over here on the browser so how can i display these data in the table especially in our react app so this is this is the goal of our today lecture so dot we can use x use like that x use git here we will add the url so let's come here and copy this url jsonplaceholder so if i paste it here this is something it will give bus this is the main thing over here is that's return promises so we will write here then response because we want to show the response over here so i can simply console.log for now the response that are we getting the response.data or not so response.data should be console.log then we have another uh chain that is car cage which returns any type of error if we have in fetching data so i can also console log that error so that should be error so let's make it ctrl s and come to the come over here nothing change here so click f12 our right click and click inspect so you will see here on the console screen that what use effect bring for us yes as you can see over here our data is here these are the full as you can see here we're on the browser these data has been now in our react app that's quite awesome if you now the the next thing is to make it render how we will render this data so for example i want to render this data here in the table so let's create a dummy table type a simple html table so if we write here html table so the very first result you will see let's grab this from the w3 school today we are not focusing on the any css framework or anything else but to grape the code it's easy to write by ourself too but it's better to grape from this source that is not take the time so this is something we need to grab okay body so i i need the table so i will just copy the table come down okay okay no matter now we have to cross this come over here paste here and you can see this dummy data here in our app this is clear that we are getting data now we will deal with it don't worry okay this is uh what table but there is no borders because it's a borderless table we are not concentrating over this but let me remove some of the rows from here because we are rendering it using we will be rendering this using map so here first of all we have to uh we are getting the data so we need to store this data in an array so we will define here a hooks called this uh data let's and that would be a set data is equal to u state so we will also import u-state from react u state these are the very useful hooks okay use stats that would be as indicated here that would be array as you know so and then we are getting this data console log now we want to display this data to send this data to our data hooks as we have created now so we we will be consoling log as well as we will be sending to the set data so what we are sending we are sending result.data so we can also write here a text here for example by writing here getting from server getting from getting from like that they leave the other text world here so there will be something shows on the console screen through which we can identify the thing easy so guys so let's see that we are getting or not okay well or guys there will be fun in this lecture stay tuned with so as you can see over here are getting prom we are getting a so inside this array we have a user id uh we have user id we have other id we have title so we are actually only grabbing for example for instance id and title and body these three things we can grip so for example the heading we are say id title and this will be body what audi okay now we used to render this so for rendering console dot log sorry not console.log constant um i will say array equal to our data which is come from the server is now in the data mean we have stored it using set data in this data which is a hook you are familiar with so let's make this so we will get for example here data and another one will be index for instance sorry this should be inside like this data and another one is index and now we will be returning what that will be actually ah what we will be returning we will be returning this thing uh this one this row we will be returning that's ctrl x come over here ctrl v now what we will be doing here by the way so we will be using we will be using uh data dot id data dot id will be rendered over here data dot id while it's gone away let me bring this okay ctrl c here we go ctrl v and here will be titan title and here will be body so we are actually want to show these three attributes from so this will do what this will render our data which is now stored as a maf in the array so if we call here array by writing this so it will display all the render data so ctrl s and see the user so come to the browser and let's see wow that's awesome as you can see the data has been rendered oh how cool is that as you can see here these are all the data which were here in the jazz environment and we have displayed it using xu that's awesome guys that's really awesome there were 100 forced so we were only rendered these three uh we can see columns or attributes from this jason placeholder array so the uh that was was that how can we use it for the getting data x use so this video is getting long so we will do the delete and as well as how we how we can post a data using x use in the next lecture till that is

Channel: Code Splitter

Views: 37,588

Keywords: react axios get request, how to use axios with react, react axios get request with headers, react, axios, react axios, react axios get json data, react axios tutorial, react axios post request, react axios http request, axios react, axios get request, react with axios, react axios put request, react axios cors, react axios get bearer token, react tutorial, axios with react, axios react hooks, react js, react axios api tutorial, react axios crud

Id: fHNsAyX8kck

Length: 14min 21sec (861 seconds)

Published: Sat Oct 02 2021