Build React Crud App with JSON Server | React Crud Operation with API using Axios | React-Router

hey everyone in this video tutorial we will create a current app creation read delete and update operation in react.js with Json server Json server is useful that we would like to locally test our application to pitch API to which data store and delete and update without real API because we don't need internet connection or an API we can make a Json server in our own app react app or code just by creating a single file json.json file okay by creating this file we can create a server in our app so let's start so first of all to create a Json server in our application so we need to create a Json file okay I have created dp.json in my app so see I have recorded a few records in it see it a few regards are here and after that we will install the Json server to install install the Json server we will simply write npm install Json server here simply install this by using this command after installing the Json server you will have that infected Json let's stick it here see g sensor we have that so now to run this server we will just write Json server watch db.json file okay that we have created and run it and put 3030 run our server on Port 3030. so now let's go to here we will go to direct by let's go to this link our server has run so let's come to the slash users we have users record in our dbg75c it is the Json data when you fetch data from an API that it looks like the same like this okay we have our reset our server so now let's start is to create our credible so to create cut up first we will we need a reactor turn down okay to for routing so for that we will install a react router down see I have already installed that see reactive data we will install this package so now let's create first of all the app touch is will come here react functional component export and here we will use our reactive return for routing I will import first of all a few components from reactive to down browse the router routes in also route so now I will use this the first one is browser router we will use this the second one is the routes and the third one the route in inside that what we will do so now we will pass our path to this working path the path what will be the part for example for whom our path is directly slash and the element would be which element you would like to render in this path okay we will create an element in this folder on.cs attack function company to export so now I will import that home after importing that I will use that here okay we have set our um around now for home components so now let's come to the home component we will first of all render the data from this dbj adjacent file so for that first of all we will enter the data with the effect we will just use effect talk here I will use for getting the data and posting and deleting updating the data access Library okay you can use fetch API as JavaScript feature API so I will use the access library for that access the access is imported dot gate and here we will add the URL from which URL we would like to fetch our data so this is the URL from here we would like to fetch the data so let's try this after this we will hit a response so that response for Safari we will display that in console okay so we don't need to check that okay by default I will create a state variable and assign to that const ant data is equal to average used it good points it is at array type with us and here I will use C data response the data I will assign this to that if there was any error I will case that and find that on the classroom yeah we have done we fixed our data so now we will display the data to display the data I will just come here and class name container project R5 and here I will create a table I will just assign a good stuff class name to this would be table and here I will just try it T hit enter here what we will write so we have you can fix the columns dynamically okay from this data but I will write memory that we have ID name and email after writing this now we will display the data dynamically so let's come to the tea body so I will use data that Mark then we have data in the indexed we will return in our array arrow and I'm going to assign a key to this that will be high in front here a TD table data and just write here D dot [Music] D dot ID name and email so now let's turn our server what we did in the result so the server has get the data okay for us see it is the table and this data we got this data foreign another hit component of a column that would be for Action okay which action we would like to perform update delete and read and here after favorite I don't hear I will just write for now I will just simply write and let's create buttons first one would be for the update foreign so now we will hit a button here on the top and anywhere to fix that so we should get the data we should create a record foreign [Music] foreign so here we should assign to property two and we should go to our crit slash create foreign that one this would be great and we should go to the create component so let's create that here create.js and let's import the create will be directed a photo from Grand r so now let's check it let's finish this see we came to the 320 see it so now we will create a photo here first of all I will create a form and I will design it then the submission I will do that okay I will just create a forum to notice the time yes so I wrote this design see let's check it see I have created this design so now I will just click name end email after writing this which are pressing the submit button we should submit that to the Json file that we have here okay so let's do this stuff so first of all whenever I am writing the data in this input field so I should store that so to store that I will create an object data set input data is equal to use State hook then it is in object type with us and here we have name an email property empty by default and now let's change the data and change eventually we will use whenever we are changing the data and putting the data so it will call this function we will create an anonymous function Arrow function and let's call that set input data the function that we have created before okay this is okay this we will show data in this object see data and call this here use the object input data the previous data and now we will update the um I need name is equal to e dot Target dot event awesome the video from this here Target .com same I will do for email [Music] so here I will just update the email so now we will replace the submit button so we should post the data so here I will use submit on submit event so here I will handle submit so now let's create that function and then you submit and we will get an event sorry click Arrow function event for the supply submission so we will prevent the default submission reinvent default and here so here I will post the data I will use axis again axis.post data post and I will use the URL in where I got the video where I pitched editor of this URL now the method is changed the method is post and also I will pass the data I will pass this input data input data so now we will get a result so I will print the result I will just give an alert to the user alert data posted successfully and here I will use the Navigator Farm navigate hook to go back to the home so what I should do I will just import use navigate from react out or down okay after that you will hit Logic for that comes in any gate is equal to use Navigator okay after that let's use the navigate go to the Home Route so now let's try it see it we have this kit so let's create a new record that will be new data and then data type Gmail dot new so let's press the submit button data posted successfully and let's press OK see now we will should have the new data see new data new data gmail.com yeah before now we have exit cards okay we have 80 cards if I refresh it so then after the card will add it here see the ninth record has added here so it was about the posting our data so now whenever we click the update so we should update the data so let's add a route here so before updating I will just add to one another functionality that is uh if it has okay you will read the data also and now let's make it a link okay and you have total Dom link and whenever we click on this we should go to update two the router should be so now we should pass the ID okay based on ID we should do the application so what we should do we will just write slash up to date and slash ID we will pass the ID now um the ID what will be the ID so let's write the ID here I will just join the ID with it foreign [Music] I will pass the ID to this route let's create this route let's come to the app okay come here just to update slash and we have an ID right so whenever we click so now let's create the create component the sorry that update component update to Let's scoot first of all that [Music] let's come here and just create a big.js and in update.js UMC tag function company and just come to the and use here the app yes we got the update yes it's okay so now let's to update the data to update I will just copy them Forum of Crete okay I will just copy this photo because we haven't had to do something the same like this and also um these things okay because we are doing something like that but at the first we will pitch the data okay the only difference is that at first we will pitch the data foreign so first we will get the ID based on that ID we will get the data so to get the ID values for our out of react auto loan so now let's get the ID advanced ID is equal to use power up so from this we will get the ID up route okay and the route we have passed so after getting the ID now we will pitch the data based on that we will use use effect hook so let's use effect hook and and here we will just change the data based on that ID let's use access learning it and we will use the URL this URL plus ID that we have okay based on that ID we will repeat that card that then we will get a result and we will store that result set input data okay we will store that in this variable set input data and I will pass result.data after that we will catch statement there was any error cancel the error yes so after pitching the data so now let's first of all update this so by default we should have we should heard the video the value would be the data data name and this would be the default video okay we should get the data and display that input Fields then we will update that data let's add this update and also our what else what else so now let's update okay by pressing this button update button so we should call handle submit and in handle submit we will just use the post and here we will just join the ID with that plus ID okay based on that ID here also we should sign this slash and we should pass the input data and we will get a result the data update updated successfully and we will go back to the home so let's try it let's try use take use navigate yes let's import this state you state and also use navigate for this and now let's see it the data is not defined I also be instead of data we have this input field so let's use the input field on input data see it we have so let's just design this uh we should come to the home and just design here's the Home and Design is we will add a class name to this class name in a text decoration name technical and also it should be button button SM and button success yeah we have this so now let's click on this see we came here and we would like to edit this one okay so let's change setting to studying updated underscore let's press the update button and after update button we didn't get the response so yeah so we should add so just let's create last let come here and just add one another input field and we will store the ID in that okay we will store the ID in that in fulfill this would be ID and also this should be disabled disabled time should be number Name ID Forum control in 15. ID and also we should update the SE yeah let's come to assign the ID also the ID is by default the ID that we have okay this ID we are fetching from there used for from URI and let's remove this we are not changing this data yeah let's check it let's come back and refresh it yes after refreshing so let's change this Salim press this one see it is disabled and we have the data ID number one and study uh deleted let's press update we didn't get the result again so let's say by pressing this button set input data it is amazing okay handle submit and let's come here and the submit every development access.host users plus ID input data so we should use put method okay instead of using the post method okay because we are updating the data here so now let's come here I am back up here VP free separate button C data updated successfully and see the data has updated so now let's we'll replace the delete we should perform the deletion let's come here and just I will design it same to this and also the URL should be delete no we don't need a it is okay button it should be a button yes it should be a button any of these okay so whenever we click on this button we should delete that again so let's call and change event and click event on this and click we will just call handle e hello section and delete then I will pass the idd.id to this function handle delete file okay so let's create the handle delete function here foreign ID so first I will fix the data then I will delete that data so I will just use access.kit and I will use the URL dot delete method we should use slash plus ID okay this ID we should delete this one and we will get a result the result will be that alert so first we will take a confirmation we do window here here we will take a confirmation window dot confirm what do you apply to delete do you like to delete if is equal to if it was okay the response was okay so then we will use this okay yes okay then we will delete that record so let's alert here after deletion we will go back to navigate we will use navigate hook okay let's come here to use the name kit go back to home so let's try it and let's press this button the first one delete do you like to delete okay so let's appreciate again it didn't work here record didn't delete it if confirm access dot delete okay this is the name is okay name let's appreciate and press the delete okay record delete it so let's appreciate the navigation over here see the record has deleted so now let's we never will press on the read so we should do you go to the right this should be primary button and also we should go to read and based on the add ID let's create a function by the name operate and here IFC we will read first we will pitch the data we will use this param hook to take the ID from URL also we will use use navigate hook first navigate and first we will fetch the data then we will display that type events so let's use usable tool so we will just come here and to the update and you will copy this one okay to the return axis and after that we will just sit data say data so now I will delete that yes use the map button . D data and let's read the editor in a the dot ID and let's Translate and let's create a button we should go back linked and go back so let's check it so let's read it uh we didn't treat the data IDs per on so let's go to the home so we didn't create that out so let's create route or route so here we will call read complete so now this is comfortable hear me how ears in here that is caused so we didn't reported the link so let's push the data very strong again we have the hero and the problem is that it is not in hurry with us we will just easily remove this because it is just a single record and just simply read it as dot ID internet just come now see we have reached the data let's read this record see I will go back come to the home do this back sorry so it was a all about reading and deleting everything the record in practice with Json server so if you like this video please subscribe to our YouTube channel and thanks for watching

Channel: Code With Yousaf

Views: 18,403

Keywords: react, react crud with json server, react crud app with json server, react crud, crud operations with react, crud operations with react js, react js crud, react application json server, react js, json server react, react json server, react using json server, react crud operation, react tutorial using json server, crud operation in react js, react crud operations, react crud operation with react router dom, axios, react crud api call, react-router-dom, crud with axios in react

Id: RNpwGFjih0Q

Length: 35min 44sec (2144 seconds)

Published: Thu Feb 09 2023