React Axios CRUD with JSON SERVER | ReactJS Axios REST API | React Tutorials for Beginners

hey guys welcome back to another video in our react for beginners series so in this video we will continue to enhance our contact manager app and we will learn how to do crud operations in react using axios we will also set up the json server for our fake apis let me show you the demo that we are going to build in this video so this is the application that we are going to build and if we want to do the crud operation the first one will be the create so if you want to create a contact then i can simply take a name of test and test gmail.com and if i click on add then we actually make an api call as a post and the new record is created in our json server so if i want to edit it then i will click on the edit button and let's make this to test123 and let's click on the update so if i click on the update we are going to make an another api call for the update of the record and if i want to delete it then we can do the deletion and if i want to read all the records then i just refresh it and i get all the records and this is our json server and we have created a resource as contacts and if i click on this contact then you will see the data we have in our contact array so this is going to be a very interesting video and we will learn about the axios in react how to make the api calls fetch the data from the server and then update our states accordingly for the updated data so if this sounds interesting then stick around and also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one so let's get started alright guys so i am using the same application code which we have built in our previous videos the react fundamentals and react router if you are new and you have missed the previous videos then i recommend you to watch that first so what we are going to do first we are going to set up a json server so that we can have our fake apis so let me take you the github page of the json server so this is the github page of the json server and here you can see that the json server follows the restful api conventions so i'm going to explain you what the restful api convention is a little bit so that you can have a good idea and then you can see that my json server from here you can actually uh they have the steps to create the json server so we need to do an npm install of a json server and then we need to just create a db.json file and the resource which we want so let's go to our visual studio code and let's do the setup so i am in the visual studio code and first we will create a new folder and i'm going to name it as server api and then let's go to the terminal and from the terminal i'm going to go to the server api and we will do an npm init hyphen hyphen yes to create the packet.json file so this is going to create the package.json file and now if we see in the package.json file we have the default information about the uh package.json so let's install the json server so i'm going to do npm install hyphen hyphen save json hyphen server and this is going to take some while so meanwhile let's understand the rest api convention so let me show you a slide that will help you to understand the rest convention very easily so we are going to create a resource with the name of contacts and on this resource we can actually do the crud operations we can create a new resource we can update a resource we can delete a resource or we can fetch the resources so this is what the json server follows the restful api convention all right so now our json server is installed and next thing we will do is we are going to create a file called db.json so inside the db jason we are going to create our resource which will be a json object so if you don't know about json i have a complete crash course on json i will add the link in the description or you can click on the card above and jump to it directly so the name of our resource will be contacts so let's go and add the contacts and this will be an array so what we are going to do let's start our application first let's go to the terminal and i have already started i guess so yeah my application is already started so let's go and visit the application on the browser all right so this is our application and let me adjust the screens all right so now i have adjusted the screen and right now what we are doing is uh if we are adding any of the uh contact then the contact is being stored in the local storage so we will go to inspect it and we are going to go to the application and from the application i'm just going to copy this and then i'm going to use this in the json server so if i want to use it here i'm going to add this here and i will just remove this and i'm going to remove this all right so we have initially added some data in our contacts array which we can use it in the uh react application so we need to do one more thing we actually want to go to the scripts and we are going to remove this and instead of this we are going to add a start here and the value of the start will be json server hyphen p and then we are going to give a port number and we will write hyphen w so that we can watch our db json file whenever there is a changes all right now i have saved it and we need to do one thing we need to start our json server so let's go here and let's go to cd server api and now we are going to do npm start and this is going to start our json server so let the json server get start so it's already started at localhost 3006 and let's go and visit it uh alright so we can see the json server is started and if i click on the contacts i can see my two records so now what we need to do is we need to make changes in our react application so that we can fetch the data from the json server and not from the local storage so i'm going to go to the app.js so this is the app.js i'm going to minimize this all right so now we are in the app.js and we can see that here we we actually retrieve the contacts from the local storage so before we make any changes we need to install the axios so let's go to the terminal and install the axios cd contact app and i'm going to do npm install hyphen hyphen save axios so this is going to install the axios and after that we can use the axia so so meanwhile it gets installed i'm going to create a new directory here and i'm going to name the directory as api and inside this i'm going to create a new file and i'm going to name it as contacts.js so this file will be our axios base file so i'm going to import axios from axios all right and here we are going to do an export default axios dot create and this create will take an object and inside the object we are going to define our base url so our base url we can get it from this localhost 3006. so i'm going to copy this and i'm going to add this here all right and now our axios is installed so now we can make changes in our application so i will go to the app.js and inside the app.js this is the code where we actually retrieve our data from the local storage so i'm going to comment this out and instead of this what i will do i will first create a function which will be actually used for the fetching of the data so i will write here before that let's import the api so i'm going to import api from slash api slash contacts all right so now we have imported the apis and let's write the retrieve contacts so this function will actually retrieve the contacts i'm going to write constant retrieve contacts this will be equals to an arrow function and then i'm going to do a constant this is going to give me a response and i'm going to use the api dot get and this will be a get call so for the get call i'm gonna do the slash contacts and we are going to use the async and await because we want this to be an asynchronous mode and it should be returning a promise so if you don't know about async await and how to use them then i have a video on it i'm going to add the link in the description or you can click on the card above so i'm going to add an async keyword here and i'm going to add a weight here all right and this we are going to return the response from here so let's return the response from here all right and this will get the data in the response dot data and i will remove this because we are going to use it uh in the use effect so now let's go to the use effect and in this use effect we are going to write the so we have actually returned the retrieve contact function outside the use effect so that it can be reusable for other purposes as well so now here what i will do i'm going to create a constant and i'm going to write get all contacts and this will be an async and arrow function and this is going to return all contacts and these contacts will be equal to a weight retrieve i'm going to call the retrieve contact function here and then if this has the contacts then i need to update the state so we are going we are doing the same thing but in this case we are fetching the data from the server and not from the local storage so similarly we are going to do the set contacts and we are going to add the all contacts all right and now if i save it then i should be able to fetch the data but i'm not able to fetch the data because i need to call this function so let's call this function all right and now if i save it then i should be able to get the data so now this data we are fetching it from the uh from the api and not from the local storage so if i go and i delete the local storage all right now i have deleted the local storage but i still able to fetch the data because because we are getting this data from the api and we still see the data here and that is because that we are using the set item so if i comment this out then we will no longer be able to see it so i will remove this and now if i refresh it then we don't have any data in our local storage so let's go to the network tab and see the api all right so now if i refresh it then we see that we have the contacts now let's do and write the code for the add contact so that we can make a create operation so i will go to the add contacts and inside the add contact i already get the contact and here what i'm going to do i am simply going to create a new request first so i'm going to create a request and inside the request i'm going to have the id so i will have the id which will be generated from the uuid utility all right and then we are going to have the contact so let's have the contact here so i'm doing the restructuring of the contact so this is the same thing i am doing it but i'm keeping this in a separate constant variable which is a request and after that i will create the api call so i'm going to do a constant which will give me a response and i'm going to write the api dot post so this is the axios post call and we know the url so the url will still be the contacts as it's a rest convention so we have the same resource and the second parameter will be the request body which you want to send so i'm going to add the request here and we will be using the async await so i'm going to add a sync here and i will add the await here all right and once we receive the data which is the response we have to set this response in our state because our state will get changed so i'm going to copy this and i will add the state here so this response will be the new state so now let's save it and let's try to add something so i'm going to add a myth and here i'm going to add amazon gmail and if i click on add then i am not getting the data so that means something is wrong so if we see here all right so we we actually made a mistake so this should be data here response dot data and if i do the response dot data so let's add a new one so i'm going to add this time as mike and mike and if i click and i will be able to see the mic john and why we added this response.data we can see actually do a console.log and we can log the response here so let's log the response go here and do the inspect element in the console let's clear the console and i'm going to add as max and this will be max and if i click on add then oops i i made a mistake this response should be after the response is being initialized so now let's go back and go to the add contact do the inspect element and now add here max i'm going to add the max and let's click on add so we can see that the actual response is this and we get the data which is in the response dot data so this is our data so we need to add here as response dot data all right so now we have created two operations the one is the fetch all the data which is the get call and other one is the adding a new contact which is a post call let's do the delete one so for the delete we have already doing this part here the remove contact handler and we just need to do a small slide change to call the api here do the async first so this will be an async and inside this we are going to create an await because when we delete it we are not getting any response we are just going to get a status code so i'm going to do api dot delete this time and this delete method i'm going to do the backticks and this will have the contacts and we will have the id we need to pass the id which we want to delete so let me add the id all right and the rest thing will be the same so if i refresh it and if i do an inspect element i will go to the network tab all right and i'm going to delete the max so if i click on the max then you will see that we don't get anything back but in the status code we get the status code as 200 and the request method is delete so our max is deleted if i want to delete mike mike will get deleted if i want to delete amit amit will get deleted and for the the last one which is the update one so for that we don't have at the moment any functionality to the edit so let's create the functionality quickly so the edit will be very similar to the add context so i'm going to copy this and i'm going to paste this again and i will just rename this and this will become edit i will remove this all right and inside this we are going to change this to edit so this will become edit and this will become edit all right and then we will change this to update and we are going to change this to update all right we also need to go to the contact card and inside the contact card we need to add the edit icon so i'm going to copy this and i will add this again here and i will change this to edit outline icon and i will add here a margin so that we can get a space left of 10 pixel so we want to change the color so this color will be blue and when we click on the edit we need to add a link here and we are going to pass the same information because while doing the edit we actually need the id of the contact which we want to add it okay so we have the and the path will we will change the path to edit so this will be the edit and we will still need the props so that we can have the id so now let's go to the edit contact and make the changes on the edit contact what i will do i'm going to create a constructor and this constructor will have the props and inside the props we are going to add the super props all right so i want that when my i did component get initialized i need to add the state i need to change the state so for that the data which i passed from this state will be i can use that as a props so these props will help us to update the state so i'm gonna do a constant and i will do the destructuring of id name and email and this we will get it from the props dot location dot state dot contact so if if you don't know what i am doing then i would recommend you to watch the prerequisite video of this which is the react router because all this part is a part of react router let's initialize the state so the initial value of the state will be this id will be equal to the id which i am getting from the props the name should be the name which i'm getting from the props the email should be the value which i'm getting from the props and as the es6 we have the key and the value as same we can actually eliminate this we don't want to add this all right and let's save this so now we have added this and we don't have a route actually so let's go to the app.js and let's add a route here so i'm going to add a route here so i'm going to copy this and i'm going to add a route with then edit and this will become edit contact and we are going to pass a handler which will be the update contact so i'm going to change this to update contact and this will become update contact all right we have the update contact handler but we need to define the update contact function so let's go and write the update contact function so this is the add contact and here we are going to write the update contact so i'm going to do constant update contact handler will be equals to an arrow function all right so now we have it and now if i click on the edit i should be able to go to the edit so if i click on back again then if i click on edit then i should be able to edit but something is wrong and everything is getting deleted so let's go back to the contact card and inside the contact card we can see that we have this function which we just copy paste it from the trash icon so i don't need to do this one so i will remove this all right and let's save it and we need to add more contacts so i'm going to add the contact as nice nikesh and and add so we get this now if i click on edit i can see this if i go back and i can see this so we need to add two buttons here first the button for the added this should not be add this should be update so let's change this to update and the second thing we need to do is we need to make this as edit contact so i'm going to do an edit contact all right so now we have the edit and we have the update so if i click on the update we are going to get an error because this is the contact handler so we have to change this contact handler to the one which we passed so the contact handler which we passed is the update contact handler so let's copy this and let's add this here all right and now we have the update contact handler this is going to give the state which will contain the id name and email address all the three fills and then once we are done with it we are going to clear the fills and then we are going to go back to our contact list so if i click on the update now then it should be able to call this function which is the update contact handler so let's write this update contact handler so this update contact handler will get the state which is the contact and let's do it as a sync all right and then this will do a response of a weight and then we are going to do a foot call so this will be a put string literal so i'm going to write the contact slash and we need to pass the id so this id will be the contact which we received and i'm going to do the dot id all right and then what will be the new values the new values will be in the contact which we have passed so this will be the new value so we have taken the id of this contact here and we have added the contact here which will be the new values so once we make the update the next thing we need to do is we need to actually update the state with the new value because if i do a console log i will do a console log of the response dot data all right i'll save it and let's go to the inspect element let's clear the console and now if i click on the update you will actually see that we make an api call in network request and this is a put call with the 200 so the successful and in the console we see that we get the new updated value which we have updated in the database so what we are going to do we need to update our state with this new value so to update the state we are going to do a manipulation on the current state so to the manipulation on the current state we are going to use the set contacts and whenever you want to manipulate the data in the array you can actually use a map function so i'm going to take the contacts and then i'm going to map the context and this is going to give me a contact all right and this will be an arrow function and let's do the destructuring of the data that we are receiving from the response so i'm going to do a d structure of id name and email and these values will come from response dot data all right and the next thing we'll do is we are actually going to return the first we will make a check that if the contact which we have the id of it is equal to equal to the id which we have it here if it's equal equal to id then we are going to manipulate that object so i'm going to use the response dot data so this is the new object but if it doesn't matches then i want to return the old contact whatever it was all right and now if i save it then i should be able to see so now everything is okay and what i'm going to do i'm going to click on edit and i'm going to edit it as the cache singh all right and now if i click on update then it should update it immediately and we have made the api call so let's go and add a new contact so i'm going to do a mic john and this will become mic if i click on add then i'm able to add a new contact so that's how you can use axios and you can do the crud operations in react so if i want to delete it i can delete it if i want to edit it i can actually edit it immediately and everything is happening fine all right so i hope this video was very useful and because this is what you actually do when you are working on a real project you just need to do one thing if you have the real apis you are going to go to the contacts and here you need to change your base url once you change the base url your this code will be able to adapt the apis and the data from the actual server and will be able to do the crud operations so i hope you like this video a thumbs up is appreciated also i'm going to add the link of the code in the description so that you can download it and you can have a reference so that github repository will contain all the three projects but these projects will be in the branches so you will have a master branch you are going to have an another branch will be a react router and this will be a third branch will be a react crud axios so you can get the complete gold in those branches also don't forget to subscribe the channel and press the bell icon so that you don't miss the videos like this one also you can connect with me via facebook or instagram you can also follow me on twitter for latest updates and thank you thanks for watching

Channel: Dipesh Malvia

Views: 51,532

Rating: 4.8812551 out of 5

Keywords: javascript, react, react tutorial, learn javascript, javascript tutorial, axios tutorial, javascript for beginners, json server rest api

Id: 59z1_3-vTOk

Length: 26min 50sec (1610 seconds)

Published: Fri Feb 05 2021