React Axios Tutorial: Axios in React JS (Get, Post, Put, Delete) Requests

hi everyone this video is about how to use axis inside our react app so let's get started let's come to our base code and here I have created my react app and after creating your react up just simply install um the axis npm install axis okay by pressing enter so it will install the axis inside you will react up let's see kit I have already installed that see this is the axis which I have installed so now let's test it let's come here to the let's hit uh file first of all app.jsx for example inside that let's write some code react functional component export and here we will write some code so let's first of all to test our axis Library so first of all we should come here and this is the fake API and we will test with this okay first we will get some posts okay let's get users okay first we will get users from this API so let's just come here and first we should import it import access from axis yeah the axis has imported so now let's use the use effect hook whenever we run our application so it should be run okay that should be rendered so let's write use effect hook or a dependency inside this now we will use our axis Library axis so we will use the get method to get something from our API okay git and here we will write our URL so our URL is we should copy this after copying this we should write this also okay to request in the response we will get something like this see the request and that is the response slash API slash get ticket what is the URL users and page 2. page is equal to two so it will just get us something the response will be like this okay so after that we will just use the Callback function dot then and we will get a result here so let's cancel the result cancel that log result if there was any error so let's catch that cancel that log here so now let's run our application let's write something here so let's send our application we would like NVM Rundle let's press enter so it should learn our application react app that has done let's present this URL let's move to Chrome inside Chrome our application will learn new now let's move to console we will get the answer in canceled okay let's compare to the console see in the console we got this result okay let's check it what we got this is the data that we got okay let's come to the data and the data that we wanted we access that one okay seven eight nineteen eleven to twelve three cards and six regards total okay let's secret the response that we got from this see we got total 6 and 12 total twill and these are the data that we got okay this was the response it means that the git request that we used right okay this was the get request that we used with the axis so whenever you get the data you can store them that in a variable how you should write that let's check it okay I will just explain you it is very important const data is equal to zip data is equal to use statehook it is an array type it as so you should write like this set data it should write result.data dot data why I should do it like this let's check it okay first of all we got the result then we should come to the data again to the data and we will access all these records okay so our records will be stored in this data variable I will just pass the video and write the code to not take time I just printed the email of them okay this code I wrote data.map I use map function for that correct it and this is the variable and also we can write with this like this okay D for example that is an instance whatever your light it is the index and here at the parent you can write T is equal to with the index or you can assign d dot ID also so we just printed the emails okay the purpose is that we should display the data so let's check it see we got all the emails that we displayed so now let's check our post request how to post data with access so to post the data we will just come here and after this we will change it to the let's write post and inside the post we will write let's stick it okay let's come here to this API and we would like to post the data okay post we will use this API and the result would be this something like this okay so let's come here post and our URL would be like this and here we should attach our data you should get the data from your forum and store them that in an object or in Array like okay an object as we have stored this you should create a forum and Pitch the data store that somewhere else then you should pass that here okay for example like data but now we don't have any Forum so we should pass it mean well we should write something like this okay simply come here to this API and just copy this okay we will pass this data just copy the names I will update the name instead of disability Yusuf and here job developer okay we will pass this data now and in the response let's print the response what will be the response console.log result in the response we should get this okay something like this so let's check it I think everything is okay let's comment this yeah you commented that let's come here now let's refresh it from scratch to see just the result that we wanted see let's check it what we got let's come to the data see we got that user developer id27 and this is that it created data okay so it was the post request so now let's use the put request means update request okay to use the update request let's come here to the put ok to the update we will update our data okay for example we should use like this we would like to update the second user okay to update the second user you should pass the IDL so for example I would like to update the second user and there I should have passed our updated videos again we should take the videos from forum and then pass that here so I will just update for example right for instead of that array shopkeeper okay I wrote this so it will update now the second is there for us and we will see that in the response I think I didn't update this I should write put instead of post and in the result we will see something like this let's come here see we got this data okay if you refresh it you will see that from scratch yeah let's come here to the data back to the data see a real shopkeeper and updated at this date so it was all about update so let's see the the delete what we will get in the delete we would like to delete a user let's come here to the delete request we will post something and your API will looks like this and the response we will get just 204 let's for example we would like to delete this second user we will not post any data to this and in the console we will get 204 response let's change it to the delete so let's check it let's refresh it again what we did see we got this data the response statuses to o4 that we got okay nothing from a delete site as mentioned here okay so it was all about using access with the uh in react.js okay you can use the Ascend away with it uh a little but it was The Beginner's level how to use the axis get in post update and delete the data so I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel like this video and comment down and thanks for watching

Channel: Code With Yousaf

Views: 4,268

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

Id: 42qFJ67E-ws

Length: 9min 26sec (566 seconds)

Published: Sun Apr 02 2023