React JS CRUD - Complete react crud using laravel api from scratch tutorial | React CRUD operation

hey guys welcome back so guys in this video we are going to start with the react crud application using laravel API okay so guys basically we have developed the API in laravel and the link is given in the description so you can find how to create a rest API in laravel and after that creating the rest API in laravel then you can continue with the react crud application okay so now guys as simple let's get started from the scratch so now guys as simple let's go to docs and move to this sidebar here create new react app so let's click on it and here is a command so let me move below create a react app with this help of command so make sure your node version is above then 14 and npm is 5.6 so it should be greater than this requirements done guys and now let us get back here is a root folder which is point of a byte inside this I want to create a project so for that let us create one folder named react react crud so now guys let us open this in our vs code editor so let's open with code okay so now guys let's start with the new terminal so open your new terminal and begin with creating your react app so now you can now let's get back and just copy this command so here make sure you are copying this npx create react app and this will be your app name okay let's get back and paste here and the app name I am going to install this react app in the same folder so I'm going to just add dot here so hit enter and let me fold width here creating new react app in this path as simple now let us just wait guys until it gets installed so now guys our react app is successfully installed so now guys you can just run this mad npm start and start the application so let me minimize first and here let's type as npm start and hit enter okay so here our server is started guys on the localhost 3000 so it will automatically open it so you can see here perfect so our application is served guys and now let us begin with creating the pages so you need to go back and go to your package.json and there you need to check guys does it have react router Dom and we don't have a router to navigate the pages so guys what we need to do we need to install the react router Dom that is version 6. to open a new terminal here so let's install the react router guys here so npn install react hyphen router hyphen Dom okay just hit enter so here you see are the react router is installed and the version is now 6.8.1 okay so we are on the latest version right now let's close the package file and get back to the first terminal and now guys let us begin with creating the pages so as simple first we are going to app.js file and see what is happening over there so here we are just the design of this react app so now guys I don't require this I'm going to remove this totally so let's move back and start with a simple div open and close div okay and I don't need the CSS and Logo so let's remove it not required anything and now guys here in this index.js okay what is happening over there so in this index.js you see that app has been called okay this app h2 tag hello Fonda and now let's save it and now you should see hello Funda it's visible okay so now guys let's get back and now let us begin with creating the pages so in the SRC folder I am going to create one new folder with the name pages so Pages hit enter and now inside this I am going to create a files that is home.js and again one new file named about dot JS and another file named contact.js dot Js done so these three files are created and now guys let us write the function here function the function name is home and let's export this export default home and here just return open and close bracket and start with your div tag and here you start with H1 tag enter home page and let's copy this guys completely and paste in our about us page and here you change to about just do Ctrl d d three times it will select all and now guys let us copy this and paste in your contact.js so in my contact.js file I am going to control DDD and do contact okay all set so now guys you can get back to your app.js file and here what I'm going to do I am going to call home.js file okay home so you need to import this I'll show you import home from the path okay so from current directory I am going to Pages slash home or you can add this dot JS also okay so it's not mandatory but you can add let's save it and now you should see I am home page refresh perfect home page and now guys we need to route to the particular pages so for that you can just follow up one more step you go to your app.js file and before that you need to index.js file here it is a react strict mode instead of react straight mode we have to make it to browser mode okay so let's comment this either you add it here or in your app.js file no worries okay and now guys I am going to add it here itself that is your browser router so let's import that first browser router react router Dom now you can copy this and paste here open and close and here your browser ends and between this you have to paste your app component okay and now you get back to your app.js file and here we need to Route it so for that create one separate file in your SRC folder create a folder named as router and inside this router I am going to create a index.js file index.js file and here create a function let's keep name as my router export default my router all set and now you can return whatever you want from here so now guys we are going to write the routers over here let's get back on the app so now we are going to use a a tag so instead of e-tag we have to use a link tag and it is going to 2 equal to where home this is going to be home and then about as and then contact us as simple and this link you have to import it guys okay so import first import the react react from react and then you import this link so import open and close curly brace where inside this you have to add link from react router Dom okay save it let me Zoom it guys and now we need to write the routers guys so you need to go back import and close calibrase from react router Dom what are you going to import that is routes comma route here inside this return open tag and tell all the routes so all the routes we are going to write inside this routes tag and here inside this all the route you are going to Define it okay without tag path equal to forward slash and here element equals to open and close curly brace and what element so this is this element is nothing but you are calling your pages that is your components okay so as we have called in app.js this is our component home page so this component you should call in your router routes okay on that route you have to call the Home component so here you paste that and import that also what you have imported it let's control X and paste in your router index so make sure you are following the correct path so same way guys for the about let's go and paste here for the about and then again contact and here also you are going to tell contact as simple let's copy this paste paste two times and which is going to call on about and the component what you have made here paste it contact okay so now guys you just need to change the route so about and contact so instead of our about or let's make it to us here about us contact us save it and now guys you just need to get back to your app.js and call the route my route so what was the function name my route and end it so let me copy it here my router okay let's copy this and paste it my routers here import that what is that my router from router index.js here from the current path go to router and then move to index.js save it compiled successfully and now let's get back refresh and let's navigate guys so this is my home page and let's go on about okay it's not linking let us see from the URL path about hyphen s here if you enter it goes to about a space perfect so guys I think we have missed that but let's go here okay we have added only the Home Path okay so now if you save now get back refresh code so let's click on contact perfect so home about and contact us and now guys let us install the bootstrap to make more better design okay let's get back to our react app and just move to your new bash here and install the bootstrap so let us go to the getbootstrap.com and install the latest version okay so here is a npm command guys let us copy this and paste here hit enter or bootstrap is successfully installed and now you can get back here to the first Bash so guys now we need to import the bootstrap so you just move to your index.js and user import code Import in single quotes just add bootstrap and get back to and there we have to create a navbar so for that you can just create a component step guys so let us create one folder inside your SRC named compo Nets okay hit enter and inside this I am going to create one file called navbar.js okay and now guys you can copy the navbar code from your catbootstop.com go to your Docs and move to navbar here we go let's copy this first nav bar and remove the unwanted things which we don't require let us paste it so first I don't need this form so here you make it about us and let us copy this and paste again for the contact us so guys in react there is one common thing instead of class they use class name okay so what we have to do just Ctrl C Ctrl F find it and replace it okay so just type class name equal to double quotes and paste it all set and then guys instead of a tag you have to make it to link tag link tag and if your link tag is changed you have to import the class a simple so let us change this first and here I make it to link let us remove this so if the link comes means what you have to do instead of href you have to add to and give a path forward slash so here you copy this and make sure you're pasting for the navbar also so I missed that and now you can get below change for this about as forward slash about hyphen s and make it to link link tag and again let me copy this paste here and let's change these two contact okay all set and here let us remove this drop down we do not require just Ctrl X save and now guys what we have to do just Ctrl a control X and I have just cut that create a function named null bar open and close function return open and close bracket and paste here so a number is done now guys what we have to do export the navbar export default navbar and you are using a link inside this number so make sure you are importing it import link from a react router Dom save it and now guys I just want to add a simple class here shadow and instead of container fluid just make it to container save it so now guys you can get back on your app.js and instead of this we can use the nav bar so let's remove this link and add nav bar and close that import it guys import nav bar from where go to the path and from the current directory go to the components and then navbar so components forward slash navbar dot JS and here we are not using link you can remove it save it and now guys you can get back okay can't resolve this let us see what is the mistake oops we have made a file name mistake here instead of let's rename this file navbar.js so now guys we have successfully changed that file name and now it is compiled successfully okay so now we can get back and check so bootstrap is noted loaded so what we can do let's get back on the index.js file and import the path so inside node modules just search for bootstrap boot stop so here is a bootstrap and then go to dist CSS and then bootstrapment.css bootstrap dist slash CSS then bootstrap dot Min dot CSS okay save it now you can get back let's refresh perfect so here you see guys that number has been loaded bootstrap is loaded and you can again get back to your nav bar and just move that let me close this not required everything okay and here you just need to add one simple code instead of margin and auto margin start Auto let's save so our navbar moves to right side and now if you refresh cool so let's click on home page home about and contact us perfect so guys we have successfully learned how to install our react application and install our react router also and create a component create a pages with the bootstrap design and integrated navbar also okay so guys in this video that's it and now guys let's get started with the crud application in next video okay so now guys in this video we are going to create a student page and fetch the data of the students from the laravel API okay and now guys this record only we are going to show in a HTML table format so now guys let's get started so guys let's move to our react Cloud application so now guys you can continue here if you have not watched this video how to install and set up the react crud application and the pages with the bootstrap are shown here okay so you can watch out the video link given in the description so now guys let's continue back so as simple guys let me close everything and now guys let's move to SRC and Pages inside that pages I am going to create a student.js file so student dot JS file and then create a function function named as student and let's export default student the and now let's return open and close bracket design with from the container part add a class name container let's copy and paste again row paste again which is going to be a column md12 and then paste again a simple card then the card header let's paste it again design a card header and then inside this header we need a H4 tag students list and inside this only H4 tag I want a link for the add student Okay so Go slash so mention as ADD student and now guys let me arrange this all set let me minimize here and now guys you can start with the card body here your form starts so before that here you need to import the link guys so import from react router Dom all set and now guys let us insert this we have to start with the table design okay open and close table give a class name equal to table hyphen table striped and then here you begin with table hat T head and then table row table heading which is ID name course then email and then phone and one edit option and another for delete option okay and now guys the body table body okay and now you are going to append the data over here so before that let us check the output okay let's go back and move to your react app so we have not created the route let's add the route and that link in the nav bar so as simple let's go to our router index.js file here I am going to add one route named as students okay so this is my students route and create the component student student list copy this and import student list from the path so we are we have already created that student.js so just go one step back and then move inside the pages and then go for the file student.js are simple let's save it guys and now you can get back and refresh okay we have not added in the navbar and now guys let's get back to the nav bar so inside my components I have created that navbar let's move below and here we copy this and paste here change the route that is students and a route should be students so here you see in the index what is here okay so same route we have pasted that path and now you can get back to student.js save it now if you refresh perfect so we have got that student URL guys let's click on that students cool so here you see comes okay and now guys let me just design this button and move to this right side and let's give a space from Top go to up and here you add a class name button button primary and float and and margin top five done guys and now let's begin with fetching the record from the API so all done let's inspect here first get back let's begin with the mounted okay so in react we don't call mounted instead we call use effect okay so here we enter and you need to import the class guys so you just have to import react and give comma and open and close curly brace from react okay and this you have to Define here use effect inside your top and then here we are going to remove this third and do not require this return we are going directly inside this use effect so now guys let us fetch the data so guys to fetch the data we have to use some HTTP call request okay so either you can use Ajax or axios or fetch directly JavaScript functions okay so now guys we are going to use axios to fetch the data from the API so guys for that let us just install the axios so npm install hit enter so guys here you see our axios is successfully installed and now we can use the actual axios dot get method use then function inside that response of open and close curly brace where you are going to get the data so now to use the actions you need to import the axios import axios from axios okay let's save and here inside your tilt symbol let's open the tilde symbol copy the API and paste here so now guys let's copy this response and paste in a console log so console DOT log function and paste that response so now what happens if you let me get back here on the main bash so let's see that it is compiled or not okay compiled successfully now we can get back on your react app let's move to our console and refresh it's loading so here you see guys that the data has been come okay so inside your data function here you get your students records that is the detail okay so all these details whatever there in the API you get here so now guys let us print this data in our HTML table let's get back so now guys what we have to do we have to store this data in our state variable okay inside one variable so for that to store the data in a variable you have to use use State okay so let me just type use state hit enter and here guys I am going to define the array and here we need to set the variable so my variable name is going to be a students so in students and here we are going to set as set students make this Capital also so let's copy this and move inside your axios function and paste here hit enter and you get the response so response dot data dot students okay so this student's record will be stored inside your students variable perfect so now guys let us copy this and get below and before your return your HTML return you have to check that and loop it let's create one variable called student details which is in beginning it is going to be null and now I am going to take the student details variable equal to your student the students what we have set the student okay student dot I am going to use the map function to Loop the data inside this you get your function and use the open and close curly brace hit enter and here you get the item and next was your index so this inside from your student data you are getting all that student item just return return a TR table row table data and inside this table row we have to give the key because when data Loops multiple times here we have to define the key key equal to open and close calibrous index and here let's copy this item open and close curly brace item dot ID then your name course email and then phone okay so more two records that is edit and delete so now guys let us again create one more TD here we have to create one edit button and one more button for delete a simple button guys for delete and the same class design just I will change the danger okay so we have a warning here guys error that you state is not defined let me just check okay so here we are using this right so you just need to add that give comma and add the use State let's save okay student details assigned but never used so this is a warning it's telling that you have given the data but you are not using anywhere so let's use that also let's copy that and move below here inside the table body okay open and close curly brace paste it student details save it and now you won't get the warning perfect so compiled successfully now let's see the output curve so guys you see that data has been printed guys now you see that there is a glitch type so when the page is loading we are not able to know what's happening but data is loading later so for that you can just add a simple loading option also let's move on top add this your state just copy and paste and true and this is going to be a loading okay and here also add it to loading let's make it to loading loading now guys let us copy this and just below your reuse effect I am going to add a if condition open and close curly brace where we'll add this loading part and here we are going to return and add a simple div tag it is loading here we'll tell this save it and now let's get back so if you see if you refresh the Page by default it is just going to show loading only whether your data loads also it will be showing loading part so here you see it's showing loading and here data has come but it's still loading so you have to unset that loading so once the data is set here I am going to make it false okay save it and now you can get back and refresh perfect so now guys if you want a more better loader you can just go to this bootstrap and tell spinner hit enter so you get best loaders so I'm going to just copy one of this copy and get back to the react and here instead of pasting here I am going to create one component and include that so inside my component inside this component I will create a new file called loading dot JS hit enter and just create the function function named loading open and close curly brace and Export default export default loading and then here you are going to return open and close bracket and place your code that's it and here loading dot dot dot please wait let's put this in a span and make sure it should be in a complete div tag open and close and paste outside let's save and now guys you are going to call this loading component in your student view or any view edit update when you do you just need to call here loading component and import this loading guys so just import loading from go one step back go to components forward slash loading dot Js save it go back and refresh perfect so here you see what happens you get one invalid Dom property guys that is class because we have used the bootstrap class instead of giving class you have to use a class name because the react doesn't supports this and you make sure you are giving this in a container container and margin top three and here I miss that class name let's add that now save it and you can get back so now guys let us see whether that warning has gone or not let's refresh perfect so here you see that it is in center and the warning also is not coming cool so guys we have successfully learned how to fetch the data from laravel API in react.js so guys in this video that's it and let's continue next video how to add the data inside our database using the API okay so now guys in this video we will be learning how to create the student record using the API okay so now guys let's get started so first let's move to this add student button and on that click we are going to create a route to the like student create okay so let's copy this and just move to this add button let's go back and here you see guys that we are on the student.js page and let's move below so here is my button let me show you this is my ADD button and if you click this what happens you need to redirect to create form so for that you just need to go to your routing so let's move to our router index.js which we have created so if you want to understand how this routing is working please watch out the first part of this tutorial that is view installation and setup so here let's create a route give the Path student slash create and move to the element so my element is about the student create okay let me create as a component open and close import student create from the pages so go to the pages slash student create.js file let's copy this and create a file inside your pages so just create one file student create.js and now let's create the function student create open and close calibrates and here I'm going to export default that is student create and give semicolon here you return and open close bracket open the div and close the div and here the form start so let me just copy all the form design from the student page okay so let me minimize this table let's copy this Ctrl C and paste here and now let us close this divs let's get back to student.js and closing divs so here we copy get back and paste again so we have an extra div here let's remove it so now guys you can just change all the requirements so add student here and this is going to be a back button and you should go back to the students page okay and here make it to Danger and you need to import the link let's import that import link from react router Dom hit enter and then now your form starts here so before starting the form let's check the output once let's get back and just refresh once okay now let's click on ADD perfect so it redirected create student and here add student and now let's insert the four input Fields so that is name course email and phone let's get back so now guys let me just design and show you the four input fields so now guys I have just completed a simple form design here just started from the form tag and ended the form tag and in between uh all the input Fields okay so here you see name then email then phone and then course and a submit Button as save student so now guys I have added the name attributes that is column name name email phone and course so done guys and here you see I have missed the class name let's paste as class name here let's save it and now guys let's check the output refresh once and see the output perfect so we get add student all the input field names code so now guys when we click to save it should save the record so let's write the code for that so first step we should get the input records like if we type the input we should get all the input data and store in one variable so for that you can just get started to your function on this function so now guys let's create a variable so we call that as use date so use state you stay snippet here and let's tell us a student and you can make this the capital okay so that's student capital and here get a record in a object just call all the column field names done so our four fields are defined here and now you need to get from the input so when we type anything in the input it's stored inside the variable so how we can handle that so we call that as a on change okay so you can use on change equal to open and close curly brace where we create a function like handle input copy this and create a function so just add here const the equal to open and close bracket and open and close calibrate and here you get the event and we need to persist that e Dot persist function and then we get the data from this event dot Target dot value okay and we need to set in a variable so for that you can just use this set student function inside this we are going to set it so now you open and close curly brace and just push all the data inside your student variable this student variable okay so you are pushing here from what you are getting and then you are getting the value so event dot Target dot value okay so from the input value you are getting all the requests and the same from that input value what are you getting you are getting from that input name okay you will select that value from that name and you are storing it okay so this name is nothing but this name attribute and the value you are going to store whatever you type it automatically stores and if you want to see the value also you can just copy that and paste here value attribute open and close curly brace just get this variable student dot name okay you can paste that here to Dent dot name so whenever the input change it stores in a set student variable that is student variable okay and then guys you can check that let me just show you the output so before that you see that you state is not defined let's copy this and just Define that import react give comma open and close curly brace paste this use State and from react okay let's save it and now let's check the output so refresh once cool so there is no error guys and here I have installed one react extension so it shows whatever we does so right now we are on the student create here let's move on that student create let me just zoom it so it looks more clear here you see that guys whatever States we set in so here inside name I am going to type ESD and you see that name AST has been shown okay so I'm going to enter that email with here you see it did not come why because we have not set that we have just done for one input okay let me show you so here you see we have only done for one input so what we need to do you need to copy this and put for all the input and keep on changing here email and this is going to be on change handle input the same and you paste again and this is going to be a phone and then one course guys let's paste here the course that's now you can save it and now you get back refresh okay it's loaded and here you're on the student create so let me open it react hook so name is veed with at gmail here all its types perfect so now guys on this click we are going to save the data now you can just get back and write the code so for that here on the save button I mean submit button save student you have to call one function on the submit button what happens it goes to the form tag first so let's move on the form tag here we'll write the code AS on submit equals to inside curly brace you call the function name that is save student you copy this and create a simple function on the top and create the function name so before this return I am going to create the function name here just add cons then student and open and close calibrates so yep here we have to give e equal to and then get the event and now guys when the form submits I want to prevent default so it doesn't load the page prevent default function when we save the student that time you need to get all the data so let's keep all the data in one variable called Data I missed the spelling const and the we are going to give the name here and here we are going to get from the student dot name so what is the student student is nothing but the variable we have using for inserting the input records okay so input data we have stored inside the student variable dot name okay so same way copy and paste for four records then email for last fall course save it and now guys let's do the axious call so for Access call you need to use ax iOS axios and to save the data using post method and then and here if you are using access please import the axios let's go on the top and import axials from axios okay and now you can get back to your save student use a third symbol here and now let me just show you the API to save the data let's go on our laravel API let's move to the API dot PHP if you want to know how to create this API guys please watch out the video link given in the description so now to save the record here you see that on the store we are using as students okay so let's copy this and get back to our react here you need to copy the complete URL let's go on the URL here copy the complete URL and paste here and remove it so this is my complete URL to save that data and here what we have to do you just need to add comma inside the post method and send the variable data let's copy this Ctrl D and copy and paste it that's it so now guys here you get the response let me break this down let's use the alert response dot data Dot message from the backend side we get this message variable to get your data okay so if you don't understand what is this I'll show you from the laravel side so on my store function I have just created one here you see this is the message okay so this message I am using to display the message so now let's validate the input Fields like if you just click on this save student without inserting any records so at that time what happens we just need to show all the errors so for that you need to catch in your actions so just use a catch function open and close and then again open and close calibrates here and here you get all the error so now you can use a request error whatever request goes it sends a response right so error dot response and now inside this response we have to check the response status so let me copy and paste here and response Dot status is double equal to 4 22. all the input requests it says you can store in one variable set input errors list function dot response dot data dot errors so what is this error these errors are nothing but the API validation what I have done so let me just show you here on the when the validation fails it goes inside this and here all the messages of validation I have put in one variable called errors so this response gives me over here okay so I'm setting that in a variable set input error list okay so let's create this use state at the stop and here let's paste it okay let me remove the unwanted set input error list and here I am going to put as in object that is curly brace and now you can copy this and just use below your input tags so let's get back on your input tag and open and close pan open and close curly brace error list dot name so you just need to display this that's it let me add the class name equals to text hyphen Danger let's copy and paste let me do copy and paste and again copy the complete span tag paste for your email I mean phone and then for the course now guys you can just through your axios I mean here and now if you see how many conditions are given here so there are only two things one is the 500 so this will not come it is very raised chance if you want to give that also you can just check the same condition and use the alert part okay so here use 500. that's it and just alert okay use it now alert that's it guys let's save it and now let's check the output so here you refresh go to your console log first okay so now if I click on Save student what happens you should see okay it took some time guys but it loaded that name field is required email field phone field course field is required okay so now guys to skip this what's happening you can just add a loader also so let me just add the loader part so where is my form X to your save students so this is my saved student so when I click this save that time only I should load so for that call the set loading let me copy and paste this here we tell the loading and again use this set loading and now you use this set loading copy it so when the save function calls I mean when the form is submitted set loading to true okay so once any form is submitted like form successfully stored please make it to false and if you get any error also at that time you can make it to false okay this add that false here and here also all set guys and now call the if else condition to show the loading okay so let's me copy from the student.js file the loading code so here is my condition for loading let's copy this and paste here so before my return I just paste here and this is a loading is a component guys which I am using so let me import loading from what is the path let me see that so I just need to go one step back and go inside the component and loading.js so just move one step back go to components slash loading dot JS okay so inside that loading.js I have a simple code okay this is a boot stops code so now guys let's close this loading and get back to our student create let's save it and now if you get back refresh okay so now if I click on Save student it shows loading please wait so until we get the response okay perfect so once the data we have got here you see that name field is required and everything so now guys let's try to save the record om prakash here home at gmail.com the phone number it should be 10 digit because we have done the validation if I put nine digit only means it will tell minimum required okay so let me add the BCA and let's save student that phone must be 10 digit okay let me add phone 10 digit and now let's save the data and you get student created successfully let's say okay and all done so let me just get back and show you so here you see om prakash perfect so now guys I just wanted to once we create the data we should redirect back to students page so for that you can just get back and use unnavigate so inside your react router Dom use navigate okay navigate and now you can use this your const navigate equal to use navigate function and this navigate will help you to redirect back so now once the data is successfully saved and here you get the alert after this alert I just want to navigate back to my students page so that is nothing but the students so let's copy that route and paste here forward slash that's it so now guys let us save and refresh so let's enter the name Varun Varun at gmail.com here we enter the phone number and the BCA let's save student student created successfully okay and it's gone back here on the students and it's loaded the data perfect so guys we have successfully learned how to insert the data in our database using laravel API and also we learned about how to navigate the pages how to set the loading and do the validations also so guys in this video that's it and let's continue the next video about how to edit the data and update the data in react.js card so now guys we have already learned how to fetch the record and how to add the student record and now guys in this video we are going to learn how to edit and update the record okay so guys when we click on this edit button it should go to the URL called student slash then ID with the slash edit okay and after that in that form we are going to copy the same ad form okay so same form will be copying and pasting it and will be editing for the edit form okay so now guys let's get started so first let's move to this HTML table which is on the student view add this edit button so let's go back to our react application so now guys let's go to student.js file and here is the edit button okay so at this place now guys we are going to tell student to pass the ID and then add it okay so here we need to pass a dynamic ID so for that you can just add a dollar symbol open and close curly brace where you will take this item of ID so let's copy that and paste here done guys but you see that it's not loaded correctly why because it is not in a curly braces so let's control X and remove this double quotes open and close curly brace use a tilt symbol below the escape button and paste it save and get back refresh so now let's click on this ID number two that is om prakash so here we edit and you see guys that the URL has changed over here so guys now let's create a route for this so you can get back to our reactor app so we have created a router and inside that index.js file so if you don't understand how we created this please watch out the part one of this video link in the description okay so now guys as simple let's create a route so here you give a path equal to double quotes and pass that so now guys instead of 2 we have to pass the ID and now you need to go to a element that is your component okay open and close here you pass your component as student edit so let me copy from above and paste here and instead of create let's make it to edit so we will create a page let me copy this above line and just copy this component name paste here and we are going to create a student edit.js file so what I am going to do to save the time let us copy the same student create JS file okay so let's click on this student create JS copy and paste Ctrl CV so it's copied and now let's rename this file guys as student edit so press f2 and type edit okay hit enter to rename the file and now guys let us start with the changes so as simple first we have to change the function name make it as student edit copy and Export that let's move at last and just export default student edit as simple so first step is clear guys and now we need to get the data from this URL okay so I'm in this ID so you can get back and as simple you need to add here one let open and close curly brace where ID is equal to use patterns function okay you have to use this pattern just add it here use parents and we do not require this let's remove and the student data is here so we don't require to Define it it will automatically call all the column Fields okay so you just need to add a simple curly brace open and close curly brace all set so now guys first step we need to change the form name let me minimize all this here so instead of add student let's make it to edit student and when the form loads at that time what we need to do all the rd2 details and paste in the input box okay so for that you can just get back on the top and you need to use use effect okay use effect so instead of typing it guys you can just copy from the first page itself which is part one you can learn from there and you need to copy this use effect here and just get back to your student edit and paste it that's it guys so now here we need to change the API okay so before changing the API you need to import all this user effects so in your react add the user effect here are simple and we are using this set student Okay so you need to copy this date set student and paste it here done and now guys you need to check the API so what is the API for edit so we have already developed in the laravel application so you can get back to the API dot PHP and here you see guys to get the student data here is a method okay here is a API route so what we are going to do we will copy this route get back this is a root domain and here after the students we have to paste it so let's paste here student slash ID slash edit okay so what is that ID will come here so that is nothing but your this ID okay student ID paste it here so we need to make it a readable format just add dollar before your curly price that's it now it is in a readable format as simple guys now you can get the response and once you get the response you enter student I mean response dot data dot student it's not students why it's student because we have coded the API like that okay so you can go to this edit on the student controller at edit function I will show you what is the result we are getting the response so where is the edit function perfect so here is the edit function guys and you see that once the record is found we are sending in a variable student okay and your pasting here and getting the data and setting in the use state that is your variable called student and this student will be using and displaying the record as simple so now guys let's copy the student variable and get below to the form first so here we go and here you see we are already using that student variable student dot name student dot email phone and course whatever the input fields are so if you want to confirm you can just get back here on this you can check out here okay so these are the input Fields I'm using in the API data perfect get back once again okay navigate is not defined let's remove that where is that navigate here we do not require and here we see a warning why because we have not passed the ID if we are passing any params value inside your user effect you just need to copy this and send it here and this will call inside your effect and that means you are sending the ID here okay save it so still on line number 44 let me search for that navigate here okay so it's here let me remove it did not require so do not get confused guys that was another thing so we are focusing on how to get the data in our input box right now so refresh perfect so we got the data guys that is ID number two om prakash let's go back on the students and I will go with the id1 here and it says with prakash code but we didn't see that data is loaded or not okay I mean we need to show loading part so once you click here edit data has not come for meanwhile but later it came okay so we need to add a loading part for that so you can just get back here okay so in this use effect you need to set the loading while opening the form you need to make it to true so let's make it true and then guys what we have to do once the data is loaded successfully loaded then you need to set the loading as false as simple now it will work fine so you can get back so go back and now let's click on edit here you see loading please wait once the data is loaded it will show the form cool so now guys we have successfully fetched the data into the form and now let's try to update this data into our database using API as simple now you can get back to the form button so here is my button name I'm going to change it to update and the form submit okay button type submit so once you click this button update student it goes to the form tag on the form tag it's called for on submit that is your function name here so install save student will call update student let's copy this and just go to the update student function okay so here you see that is already a save student let's rename as update student and then inside this update student we will change all the data okay so now guys once you click on form submit that means update student then you are setting the loading true that means it should be loading and then you'll get all the data of your you state that is student variable and store in one data variable so that data variable will be passing to our axios HTTP request to update the record so guys to update the record we have a different API and different method request so here we are going to use a put method to update the record with the ID so here is my API let's go to the api.php so on the route put we are going to update the data okay so here is the same API let's go back and paste here as simple and now guys you need to just add a dollar symbol before the open and close calibration and this will be the ID and now guys you pass the data and then you get the response that is alert whatever message you get from your response that is updated successfully and set the loading to false okay so now guys inside this catch function we are handling the input errors and 404 ID not found add internal server errors okay so we do not have a 404 error type so let me add that also here and let's tell four not four if the ID is not found at that time and it's not a input error it's a let's tell as alert dot response dot data Dot message we get from backend okay from the API response so now let us save this and make sure this input set input error list is already given or not okay it's given and we are using this let me search that also in the input code so we are already checking so now you can escape and get back to the update function so guys now let us save it just get back and see the output okay let's refresh once before updating the record and make sure your inspect developer tool is active so here we go to console log and now so here my name is Ved prakash let me keep Ved n and let's update the student code so here you see guys student updated successfully okay and you see that the data has changed to with n Let me refresh and show you perfect guys so it has loaded the data correctly everything is working smooth and one more thing guys I just missed out here in the when the form loads so here at this point if you must change the data like right now you have three IDs okay three records I just give ID number six so at that time you will find there is no data and you will get some errors like as you see here 404 okay so what at this time so you need to solve this also using catch function so let's go back to the use effect and you have to write a catch function so as simple guys let me just copy from Below so this is the catch function let's copy it and paste in the user effect here you paste done guys and now you get the error response whatever response you get we do not get input errors while fetching the records okay so you can remove that so we have one error called 404 and another error for 500 like if internal server or code error comes so at that time you can show the alert as simple guys now you can just save it and so we'll copy the student variable and let's move below so after your update also so here is my loading and after the loading itself let's use the if condition so here I am going to check my object data bot keys open and close paste the student variable and then check the length of it l e n g t h which is triple equal to 0 if there is no I mean there is no data okay just return open and close bracket and container and inside this you can just type in a H4 tag you know search student ID found ah simple guys okay let's save it and you can get back and if you refresh so first we get alert okay and then you can display the No Such student ID form code go back to id1 and I just want to check one more condition so if I don't give this email ID what happens so if we update here the time you need to get alert email ID is required okay so if you refresh and by default it comes perfect so as we have successfully learned how to edit and update the student record in react.js using laravel API okay so now guys in this video we are going to learn how to delete the data from the database using API so now guys let's get started so let's move to this student's route and to the page okay that is student.js file let's move back to the file and here we are on the student.js file as simple guys and now let's move below at the HTML table okay so this is my HTML table open this so here is my table head and this is my table body so this table body is in a variable called student details so let's move to that variable student details here is a student details where we are looping all the Student Records in this HTML we have a delete button and on this delete button we need to delete the record as simple so now guys let us get started to delete the record okay so first step let's mention this button type as button and then on this button click we need to get the ID and pass it inside a delete function so as simple let's create on click equal to open and close curly brace pass the event and inside that event we pass the delete to Dent function so we need to create this delete student function and inside this I pass the event and then the item ID so we can copy this item ID that is your student ID will pass the event and the ID all set so now we can copy this and just go and here let's create that delete function okay so cons where delete student equals to open and close and pass this function okay so as simple guys and now here you get your event the first data and second is your ID I just want to prevent the page refreshed so even dot prevent default and now so first this clicked equal to event Dot your current Target okay so you get your current data this clicked inner text equal to as deleting dot dot dot so once we click that it will show deleting and then send the access request access dot delete function so guys let us not waste time let me just copy it from top so we can just use from the student edit so what we'll do let us go here let's copy this simple code access post request so here we paste it okay and here we need to change to delete method why are we changing to delete because we have used that in our laravel so here you see on the route delete we are using this method to delete the record of that student okay so guys let us copy this URL API let's paste here all done and you need to make editable here which we are going to pass the ID so let's copy this ID and send here okay so we pass this ID and there is no data so let's remove that we are not sending any other datas and then inside the then you get the response and once the response comes you show the message and set loading whatever loading goes you set it to false or else we are not showing the loading process by because we are using something like this okay so once we click click on delete button it should tell it's deleting not loading so we can remove this set loading part and you can copy this and paste here and tell the closest off table row dot remove function okay let's remove this so on what we have clicked we are going to remove that complete table row so if I click here on this delete button so if I click here on this delete button it will remove the this complete row ID number three row okay and then let's move Below in the catch function so here never comes your input request it's just the ID sending the ID and checking so if ID is not found you can show this alert text you can make it to delete let's copy this and paste here and here we make it to delete okay and then guys here your 500 internal server you can make it to set loading false but we do not require just remove that and keep only alert so let's get back let's add the student here I am going to add on dummy then dummy at gmail.com then 10 digit phone number and the BBA let's save the student so one student is saved it goes back to the students page okay student created and redirected to student and here is your record and now guys I'm going to click on delete let's see delete or not so let's click on delete it's showing deleting and let's wait okay student deleted successfully we got the message and here you see that fourth record is with deleted let's refresh and see whether just removed the record or deleted the record perfect so it's deleted the record also as cool so now guys we have successfully learned how to delete the record in react.js application okay so guys thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 6,740

Keywords: fundaofwebit, funda coder, react js crud application 2023, how to make crud app in react js using api, react api crud tutorial, react js crud application tutorial, insert data into database using laravel api in react js, react js crud api, Complete react crud using laravel api from scratch, react js laravel api project, react native laravel api, react hooks insert data, edit data in react js, delete row data in react api

Id: PUOkMi9UL74

Length: 81min 30sec (4890 seconds)

Published: Fri May 26 2023