Supercharge Your React App: Master CRUD Operations with Axios, Router & JSON Server

hi everyone this video is about card operation in react.js okay it is from scratch and we will explain step by step to you okay so let's see yes it will be the end result of our example this that we will get in this video let's first of all click anybody card okay right now we have 11 ID so let's add yummy Jamila gmail.com and let's add a phone number so let's submit it because if you press back we will go back to the homepage let's submit it see the twist record has added see okay if you would like to read a record press the read button CV read the record if you press back we will go back if you press the idiot we will go back to the 88 page we can edit that back option let's come back for example let's update this one okay let's press the edit the Gmail back Holly and let's update this Colleen and also let's update it see the record has updated if you would like to delete the record press the delete would you like to delete yes see the third card has deleted so it is all about card operation reactors we will go step by step and we will explain all the steps so just watch the video till the end you will understand how it works let's get started so for this crad operation we will go step by step and I will explain you every step to you okay first we should create your react app okay if you didn't so you should create your react app after that install these packages okay npm install reactor down it is used for routing to go through one page to another page and this axis is a library for to post data which data will give you this access you can use pitch API also bootstrap is for Designing in the Json servers we will use the server to post our data to the server and fetch data from it and editing it and delete from this server okay so now now let's go [Music] let's first check our packages let's come here see the axis bootstrap ESN server react to third down so now let's first of all set up our Json server so for that in this root folder okay uh in our project I will create a folder by the name of DB dot Json you can name it whatever okay it will be Json format I will not send data in this file yeah this is the data in our DB digestion for for file okay we will read update delete this data okay these are 10 records so after that now let's move to create our components the first component would be the whole the GSX the second one would be we should create our component inside SRC folder home.jsx and the second one would be create Dot j6 the third one would be the update.j6 and the fourth one would be reader j6 so now let's write some data inside the react function component export and also excite update web functional company export and inside create and inside home now let's create our routing okay to route from one page to another so for that let's come to update j6 we will import first of all our react router now import browser router from laptops enter to the routes in route now let's create our routes so for that I will light browser router and after that I said this I will write routes and inside it I will drop three drops okay this has to property the first one is the path path for this for the home would be just slash this is the route and the element will be and that would be home that change okay is equal to oh yeah we should write it in like this after that we will move to the great hooking we will create an element here a record so for that the path would be great and here we should update it to create we have request to create one and after that we have the update update we will pass in ID to a B2K piece and idb Bill for four of our patients so we will pass an ID to that we will like like this and we will move to the update component and after that we have the delete the sorry the read we will read database and the idea also say that would vary it entry component okay so this is the our routes okay so we will go from this if we run we will by default goes to Hope because it is slash it means the home then we will move if you write crit we will move to the create if you write um uh updates in ID we will move to update so let's let's perform it okay let's learn our server NVM all right demo we will check our routing first then we will start our Cooling so let's move to this URL see by default I came to home page okay so now let's write for example uh read slash second one okay we came to direct section okay read let's write update see we came to the update if we write create we should come to the crate company see we came to the great one so it was uh our routing so now let's move to write our coding the first thing is that I will fix the records okay from this server from this file and I will display them on our page bar in our home page okay so for that first I should run this debit.json server so for that I will write Jason server watch db.json yeah it will learn now we got an error so let's seek it data must be an object so that should be Json format so let's let's just wrap our array in this object so let's come here to the end you will write curly braces here and we will assign anime also let's assign anything at the start before the array we will write users okay so let's save it now and let's run it on it again yeah our server is running now so let's move to this URL we will teach our user regards see these are our regards that we have so now let's close it come back here we will come to the home component yeah to fix the regards let's come here first so first I will import the bootstrap so let's come here I will import that inside the app .jsa import bootstraps slash s slash CSC slash I mean just import the CSS part okay let us input it so now let's move to our create yeah inside create uh inside home sorry yeah here let's assign some classes yeah I wrote this classes for these are the bootstraps classes okay when we bring these items to the center and also the height is vertical and the right height it will take out the screen the background is light now let's try it here in H1 tab list of users and after that we will display our data in a table so let's first of all create a table we will create a new element we will assign class some classes to this so I wrote these classes for this leave element so now let's first of all check our application how it looks like let's move back to home see our home looks like this but let's add something else here Flex column yeah the fix should be in the column see it we should looks like now we will add our data here in this tube so now let's come here to fit our records from our file let's come here we will run use effect hook and inside that we will create a function and here we will write our ID array dependency which is used for um whenever you would like to update your records right now if you write here a data when that is updated so we will update our we will call this again this means right now okay this mcre means that it will later just for the first time whenever we write our application so now let's write we will access our data we will use access Library okay for getting our data start it and we will use the URL that we previously run okay we will use this URL let's come here this URL again you will get our data from this URL remove this space we may get the data then we will assign the data to a variable we will store that there result foreign let's move to the console and check our data to the console see we have our objects the data which we have pitched okay this is our data that we will use let's now let's create an object a variable State variable accounts is equal to use statehook I will use usd2 for that and it is array type with us now let's assign our data to that variable we will write sit data result data we will assign result that the data okay previously you saw that here I will show it is important let's come here first we will come here to the result okay then the data let's come here see first we will come result in the data in the data we have our array our objects so after assigning this now let's create a table and we will display our data inside that yeah I wrote this code okay this code we will this is the heater okay the heater row ID name email phone induction I mean the action is used for deleting edit options okay but we will display these four things from our data so now let's pitch our data uh means to display that okay so let's use our data object that we have working this one data that Mark I will use map function for that it's like our data and index here if you use this currently this parenthesis we don't need in the return statement but if we write this parenthesis is then we read the return statement okay is to write let me use those okay so now let's print our data here personally like the key is equal to with the index and here we will write our table data and first we will print the ID D dot ID after that let's check which records we have yeah we have the ID in the name either name email let's check it the code is okay let's yeah ID email ID name and phone the phone is too longer instead upon if we display the website or use the name it will be okay okay it will take yeah okay no problem delete first one will be for the edit second version it's a sense of classes to this button button is in button primary last name button same button let's check it now see we printed our data here okay see it is our data that we have spread it so let's assign a class name to our table bootstrap class name table Steel [Music] conducting which was that last name I forgot that yeah it looks like this right now let's add a read button also in the right side and this would be striped try try and that's the other button here copy this and paste it here this will be read button should be improved yeah it looks like this now so now whenever let's create a button and stop in the top to add a new record so to create a new button I will come here just here okay on the top of this inside this table I will just assign some classes to this so I wrote this these classes so now we will create this as a link okay whenever we click on this we should move to the create route okay we should come to foreign [Music] same button button success see it looks like this now so whenever we place this we should close to create now see we came to the create section so here I will create a photograph and to add a new record to our file Json file so let's come to the create so I have created this design okay this for my upgraded okay this is the outer EU in this is inside the tube okay this one and in other record this is the Forum email info and last we have the submit button and the back button okay the back view is linked and we will go back to this route okay we will go back to home page so let's check it how it looks like yeah it looks like this whenever we enter the data we should store that in our variables and when we press the submit button we should store that in our file so let's do it first I will create an object cast videos set values is equal to use state and this is an object with us inside this we have a name by default nothing then we have email and email tool so now let's come here and we will write here unchange whenever we change the values so we will just update our object we will like like this sit videos see we will call this method okay sit videos sorry it is true City videos and we will just update our object we will like the previous videos and now we will update our name will be like that is either Target e dot Target dot name and we will assign it here we will just update need sorry name either Target dot value we will assign to the name the target the value that we are including and we will write the same thing for our email and phone number here we will just update our email here we will just update the code update the code yeah whenever we update these videos we store them in this videos object then when we submit this button so we should store and send that to the DB file okay so let's whenever we submit we should call a function on submit by our submit and submit we will call angle circuit for example okay let's create this function Al submit is equal to your detain event let's create an arrow function event dot prevent default submission after that we will call our API as we have did in our home company like this okay so now we will post the data let's copy this and paste it here instead we will change it to the post because we are posting the data and here we will cross our data values and after that we will get a result so if there is that first okay so then we should move to back our home component so to move back to our home component for that I will write let's write console.log result and to move back to the home component I will use navigate navigate is used how far right is a reactor dog hook which will move navigate to the routing okay to the routes so I will use first navigate is equal to use navigate okay from reactive to Dot and now let's use it here and I will like navigate I will go back to the home page now let's try it and check it yeah let's try it use up so gmail.com this is okay yeah let's press the submit button uh we didn't came back and also the method uh let's check it where is axis.host and we posted our videos or submit handle submit premium default is okay so we should import the axis the axis was not important let's promote it yes I think the problem was that let's check it again let's come to the council and let's write and let's press the submit button uh again not posted and here clicking but it should be post uh we have written this name wrong default that is a yo okay default so now let's check it we will enter press the submit button see we came back to our home page let's get the delivery card see this record has added okay new record has added so now whenever we place this read button we should read the detail of this object okay whenever we press unread we should see the detail of that so now let's come here to back to our home page in the home page you will come here to the read and this is linked with us let's change it to the link and we will import react router down link and it's imported here yeah that has imported and now let's move to 2 is equal to we should go to slash read slash you will pass the ID okay to pass the ID for that I will write something like this okay yeah now we will pass our ID here we like like this D dot ID whenever we pass our ID and which it goes to the rate component to this component inside this component we will read the object based on the ID so I will create something seemed like I will fix the data here let's come here to the rate and I will come here to the home page I will copy the same thing like this okay and compared to the rank and here I mean just now get the data based on the ID I will write slash so to get the ID from this URL okay that we are passing here we are passing for example slash user slash read slash one okay so to get that data we will write we will attach the ID we will import the ID using use Forum book of react router Dom let's write counts ID is equal to use it will pitch the data from the URL we will get that ID it will give us the ID from URL and so now here will be light plus ID based on this it will give us the record so now let's display the record so to display the records we will use our bootstrap now here so I use this strict code okay whenever we fix the data result the data will be assign that to this data variable uh now in here I made that record okay that's just data.net because that is an object with us data.name that email that phone okay of that user in the finally we have two buttons one for edit we can edit that and one for back to go back to the home page so what is the code for the read so now let's move and check it so let's read for example this C this is the record that we have uh we pitch based on the ID that record okay and here if you would like to go edit we will go back to the edit if you come to back we will come back to the home page so it was all about sheet so now let's press edit or array edit here so we should edit that record let's come here to the update so for the update first I will create a forum as we have created for the create as we created this forum we will create the same Forum okay let's copy this one and we will edit that later I'm copying because it do not take the time okay it is not hard to write the code from scratch okay because we wrote once so let's declare those all those videos also as we read the record we will read so first of all we will when we come to the update we should read a record okay we should take the videos of a record and we should display that in Forum so I will do that later okay once I will show you ceremonies remove this and also remove this let's remove this and just come here yes let's I will show you the update um four so we'll set it here let's import the link yeah it looks like this so now we should change this text and also we should have the data that we would like to update in these forums update user so for that to get the editor related to that ID we will write the code same to us we wrote for the radio okay let's copy this because we are reading the record based on that ID and we will pitch that to the data and then we will write here the value is equal to with the data.name and here data dot email and here data.com let's check it now let's import access and also use effect and used it yeah I imported all those things here is the hero they put it to link also use effect used it access what is what else is remained I use Forum okay you should import use Forum also let's take it now yes see we have that regard okay so let's come back we need to replace this back we should come back let's read this one okay here check lipstick uh soon you should edit it see we have that it recorded So now whenever we update it and we submit that let's then change the name of that we should update that record so whenever we submit this before that we will handle we will get the values okay as we work out as we wrote the videos here and change so the same we will write for that let's copy this one and we will update the videos and change here we will change the name and here we will change the email here we will change the pool so after changing this video we'll replace this update button we should go to a function then on submit event you should call handle update let's create that function here const handle a bit is equal to we will get an event or opens an event dot prevent default submission now we will update our record so for the mission again let's come here and as we did here we will copy this code just one thing we should change that is to change the post method to put okay axis and everything is imported and we will pass our values okay users but here we will update our data based on the ID so let's pass our ID here slash class ID and we pass the menu if it is yeah so let's navigate we should import the navigate also const is that you put it or not now that is not him okay is equal to use navigate yes that is okay so now let's come here so let's go back and we press for example the first one let's edit it and in your ground form uh we can't update our videos so instead of that so whenever we pitch the data instead of using this data we should use these videos Okay so let's come here and update our venues instead of updating that I will remove that one okay so just let's remove comment it down and come here I will just call set values and result dot data but come here and using instead of video I will use I will use videos that name and also videos that email and we'll use dot com let's check it now see again we have let's come back and read it see edit it let's change it even our win we will change that to the update have ate it and also let's try this updated and let's remove this whole number so let's press the update button what happened see this card has updated successfully see the phone number this one and also updating this one okay so now let's perform the last functionality whenever we press this delete button we should remove that record let's come back to our home page or we should change this to the link okay after changing this Mission goes to the 2 is equal to a 0 this will goes to instead of that to update let's check it and the home page let's place this edit see we came to the edit page this path next to the delete we will call here on click evit uh whenever we click handle delete it will call this function and we will pass our ID to this function in our row function and we will pass our ID to this data ID let's create that function down okay after the return const handle delete we will get in ID sorry is equal to okay so let's declare a variable const control is equal to window dot confirm what you like to delete if the user press the OK button if that was confirmed so then we should delete that record if confirm let's try that now we will call a use axis dot delete and we will write our route here that is shroud and we will just use our ID plus ID dot then we will get a result and we should go back to navigate and let's create Navigator [Music] navigate let me get it goes back to the home page if there was any error so dot cloud here so let's move this code to the top handle and click should call that object okay so now let's come here when you replace this delete button press the delete would you like to delete okay so I think that the card has deleted but that need to refresh okay so for the refresh let's come here we will light so instead of navigate we will use location Dot reload method we will call this one so let's come here back let's resisting it yes see the delay the record has deleted so it was all about adding reading editing and deleting a record using Json server in react cheese I hope this video was helpful for you if you like this video don't forget to subscribe our YouTube channel and I like this video and comment down thanks for watching

Channel: Code With Yousaf

Views: 63,153

Keywords: react js, crud operations with react js, crud operations with react, crud operations in react, react, axios with react, redux in react js in hindi, react js crud operation, react js tutorial, react js crud, react crud operations, perform crud using react router dom in react js, crud operation in react js with react-bootstrap, install react router dom with routes in react js, crud with axios and react router dom, redux in react js for beginners, how to use axios with react

Id: SYv61aPSiOo

Length: 37min 56sec (2276 seconds)

Published: Thu Mar 23 2023