React Axios Crud App with JSON server | ReactJS Axios Rest API | React Crud App with JSON server

hi in this video we will create credit application with Json server the Json server is useful to test our application without a real API um we don't need a real API we can test our application to fetch and post and delete and update the data with the server so for so so let's get started so first of all we will create our app after creating react app so we will install bootstrap I am using WhatsApp for Designing and also react Auto dump so after that installing those packages so we will create a Json server to create the Json server first of all we need to create a file dot Json file okay I have created this file in react up db.json okay see that and I so I have recorded a few records in it see it it is adjacent server file so for now we will install Json server so to install the Json server we'll just write npm install ER after installing this now we will run our server to run our server what we will write we will write decent my I have already started the server okay Json server watch tv.json okay the file name is DB dot Json and run it on Port 3030 it will run input 3030 so when we run this so let's see it now come to the Chrome see it we have these users records in our db.json file so after creating the Json server so the first thing is that to pitch the data from this server okay these records that we have we will fetch the data and we will display that in a table so to do these task let's get started so first of all I will create a table I will assign a class name table and the class name here container projector five and here I will I will fix data columns and the data dynamically okay [Music] which is the columns dynamically to pitch the data we just first come to use effect I will use use effect and I will fetch the data from our Json server I will write I will use access for getting the data okay I have already installed the access access.get now we will let our URL here so which URL we should write so we will write this URL okay to give the users data and we would like it here and now we will get a response so what we will do with response so now I will I will store The Columns and also the data in our label and I will create States accounts first columns set columns simply to use it is array type with us and also now recharge it because is equal to use it so after creating these two variables what we will do now we will just write sit columns and we will assign the result dot data in the first oh sorry we will write object object dot Keys it will just what it will do it will fits the keys from the means the header from the our data okay just the here are the keys and the keys now we will first hit result dot data and from the 0 Row from the first row is the keys and now we will set records we will assign result dot data to that so now we will pitch first of all the header here we will just write columns dot map and here I will use column and the index so here I will just first of all I should write a table row after this and here I will write table T8 okay th assign a key index and I will print the column name after printing that now we will print the data so it is stated with this sorry now let's come to the tea body and here I will print the records so to print that I will use data.map data and index here we will use table loop I will assign a key name to that table root that would be high and now we will use TD and we will pitch our print our data here D dot ID first of all and also name and ID name and email now let's check how it looks like our table so I will run the server to delete it and create a new one and name starts so the data is not defined so you should use three cards okay here it is records over here after this Tweed line yes it records oh sorry so let's check our server yeah the Json server is not running so let's run it again so it's okay now so let's refresh it see it we have the data and we fit the data from our Json server from this server okay so now we will create an ad here so we create another column here for Action we will create update and delete button in here to perform the action and also we will use the react router okay react router Dom we will use that for placing the creating single page application and before that I will see it follows the column and after this I will create a th by the name of action and here I will create another TD after everyone now I will just write update slash delete okay I will just simply write like this see it we have the section and we will later design that so now we will create the button and the talk at the top we will create a button by clicking that button we will create another records we should create a record so let's first of all click the button before creating the button I will come to the react router down so let's create a use react Auto down so for react auto Dom first I will create app router react function component export and also import browser router routes and route from reactor to Dom after importing these so let's just try it browser router inside it I will first import our app here okay after enforcing your error app I will write now routes in the router I will write just route and Route path would be slash and element will be um this app okay this app would be the element so and that's what the second one would be for create Slasher great the element would be element I will add the element later now leave it empty [Music] so now let's back to the updates I will create a button and the top of the table Yeah here I will create a button I'll add a class name text another button add a class name here too yeah it should be a link sorry it should be a link from react router now we should import the link total Dom and it should go to two to slash create and also here we will write create Plus all right and let's assign a class return buttons so let's see it how it looks like it doesn't work let's comment this oh sorry we didn't import the app router in index okay let's come to the index uh index.js I will import our router instead of app so let's check it now see it it looks like this so now let's add an element here create another one add that is that functional component export add so now I will come to our router and here the limit would be is equal to with the um so I should read these are stack so this one foreign so let's refresh it now let's see we have this data okay but if we now come to the create here we have discrete so let's click on the create yeah we go to the add component so now I will add a forum here for that too let's come to the Rd here I will create a forum class name D5 clicks with hundred height under it I will just create a forum and design it using bootstrap classes so then I will show that so I have designed this form okay using both subclasses this is the art component so now whenever we are changing data in this input field so we should get that data for that I will create an object against input data set input data is equal to I will use U State hook and it should be an object we have name empty the initial value and email and now we will add data to this whenever you are writing here so for that I will just use on change event and changeable create an arrow function I should situ input data input data and now I will create an object the previous input data and now I will add I will change the name property e Dot target.com value name I will write for and the second email yeah we store maybe we should store the video in email property so after updating the video whenever we click the submit button so we should post the data to our server file so let's uh we didn't create the form so let's create form here yes and now I will unsubmit file and submit handle submit I will create this function here enter submit to individ event dot prevents default submission prevent fault and now I will just post the data using access Library if it is access Library imported access dot post and use the URL the URL that we have pitched the data I will use the same URL here copy this and let's come to the head and paste it here and now we will add our data so we should add this data okay input data input data so after that we will get an object dot dot then an object we can give a message alert data edit and also we can we will use navigate hook now so let's create a navigator first 8 is equal to use the widget hook okay after that I will use that navigate and I will move to the home page back okay navigate it will move us to the home page so now let's check it if there was any error he will catch that here yes so let's check it what happened let's come here and back up to the home page and let's click this add button let's add a new record ing press submit button uh data added successfully so let's press OK let's see it see the top 18 is 51 this cell This Record has added so it was all about adding a record so now we will create here two buttons update and delete and then we will I use them for deletion and application so let's come to the up.js and here we will create two buttons instead of button I will create links okay I will use link the first one would be two update and it should be update and the second one would be for delete setup class here button button sixes and add a class name to the delete full answer Danger so let's check it see it we have added these buttons so now whenever we press that so we should change to the button smart so to make the buttons smaller we should write the class return this in so far this one they will looks like smaller now a little bit give one it's okay now so now whenever we click the update so we should go to the update we have to this link so let's add this update to our app router we will write here subtlet this should be a date and also with an ID we should pass the ID to this and after creating this so now we will create the limit by the name of it and let's create that element edit that GS ome so let's import react from react and also so let's say put it here we have imported that um so in idiot we should write let's so let's check it whenever we click the edit button so it should goes to the place she it should move to the we didn't pass the ID so let's come to the approaches into this link and we will pass the ID to it okay so to pass the ID we will write something like this so we will pass the ID to pass the ID for saving the rapid in curly braces then I will write this quotation and here I will write slash D dot ID so now let's click on it so let's click on this third one see we have the ID of third so after getting the data so now we will go to the edit component let's come to the edit here I will create a forum same to create as we have created a photo so now we will create a form for editing that okay so let's here come here and just copy this form and paste it here but we have missed I think yeah we don't have input okay [Music] I have copied the Forum so now we will to update the data first we will get fetch that data okay so to pitch the data we have passed our URL we have passed an ID clicking that ID so to get that ID we will use use for hook import use for a book for react router down so after that we will get ID from this hook const ID is equal to is equal to use for so figure ID so now we will pitch the data the data that we had okay we will pitch that [Music] so here I will use axis dot getter I will use the URL that I have passed and I will just use this URL plus the ID that we have okay so when we get the data so I will just get the result say then that will store the result uh we never label in a State cursed data set data is equal to use state a retype and let's store the data in that object Center data and that would be a result of data cage if there was any error so let's start yeah just we should write a slash here and now just we will remove this data after removing that what we should do we will just assign a video property value is equal to with the data that we have set right now okay this dataobject.name and also we should set it for email data Dot so now let's check it we have an error we should remove this handle submit Let's see we have the data for the first user let's click on this user we have this data for this user so now also we should display the ID okay for ID we will disable that property I will just disable this property disabled okay and data.id and change this name to ID and now change this to update so whenever we press this update button so we should update the data so let's call and submit event handle submit and let's create this function we will get an event and here event Dot 3 wind default default submission and now we will update our data whenever we are so to update Data before that whenever we are changing these values so we should uh update that data so to do that I will just use and change event and here I will use Arrow function and I will call here the city data OKC data function this okay to update the data see data I will use this to update the data set data so now I will write something like this the previous data and update name here name is equal to e Dot Target dot value the same thing for the this is data it's just started for the email I can't update the data the ID here we just cut it and bring it to the name email so now we will we updated our data so now we will use axis dot put method and we will paste our API here and then we will pass the data data then we will get the response the plane here I will give you an alert data updated sexes fully and I will just use the navigate to go to back to the um home page okay I will use navigate here because it is equal to use navigate from react down okay to the hookup reactor make it also foreign so now let's try it uh C Theta is not defined so let's check it tested data and also set it let's come here so now let's first of all update this one I will just try new data new okay let's see this update data updated successfully okay see it the data has updated successfully also we can update this at [Music] see this has added with this so it was the operation functionality so now let's perform the deletion functionality so whenever we click on the delete button here let's come okay and this link so you should perform that task so for the deletion first of all I will change this to the button and after that I will remove this too and I will call a function and click enter submit and that's why we pass the ID so we'll pass the ID here that will be data ID and now I will get that function here enter submit okay ID now we will print up confirmation message window dot confirm do you want to delete everything assign a booting value to this and here I will just write F confirm if it was okay if you clicked OK button so then we will perform the deletion so we will write access that delete and here we will put the URL in this urine let's write this Theory and plus ID you will get a result they will just write here under God has deleted and I will refresh back the page if there was any error so print that to me oh my God here in console.log here so just let's use the navigate to back refresh the page let's come here and you can't navigate and after reporting this get and welcome to the home so let's try it so let's first of all delete this the first card that is the delete button do you want to delete okay so the Navigator didn't work so let's refresh the page and not delete it let's see what's the problem yeah we didn't write the slash here so we should write the slash here yes so now let's press this button do you want to delete okay record has deleted see now so let's refresh the record then navigate it into work see the record has deleted let's click on the third one delete okay T card has deleted see the third one has got so it was the deletion functionality and we completed our current operation with Json server so if you have liked this video so I can request to Simply subscribe our YouTube channel if you are new and also like this video thanks for watching

Channel: Code With Yousaf

Views: 50,663

Keywords: crud app in react js, crud application in react js, crud application, react crud with json server, react crud rest api, react crud app tutorial, react crud app, axios with react, how to use axios with react, react with axios, react, json server rest api in react js, react crud app with json server, axios, react axios, react js crud operations using json server, react axios crud, react axios get request, react axios put request, react axios http request, reaxt axios crud app

Id: Rm4__WgPncI

Length: 35min 4sec (2104 seconds)

Published: Mon Feb 06 2023