Laravel Rest API CRUD with React full Tutorial | Laravel react tutorial

Hello friends welcome in this video I'm going to create a laravel arrest API so let's open my terminal I have installed laravel installer and also the laravel value so to create a project I want to say so let's Zoom it and I'm going to say first let's navigate in my sites directory and then because I have installed the laravel installer I can say just the revenue and the name and I'm going to name it the rest Dash API and now also because I have installed the laravel valley okay I can open this project in the browser by just adding the name rest api.test like this but we need to create the project first and now if I refresh yeah we have the project good let's open this project in the vs code so CD in the rest Dash API and open with a vs code okay as you can see here in the dot EnV in the database name we have a rest underscore API based on the name and you can go and create the database I have created that so I'm going to create the migration and model for the skill I'm going to create a skills grad so let's say artisan and I have Alias here for the PHP Artisan just a artisan make model and I'm going to name it skill Dash M for migration okay now let's open that migration inside the database migration the last one and I'm going to add here the name and the slack so let's say and it's going to be string both of them so I'm going to say the last time table thing for the name now let's copy this paste down there and change the name to be slug okay save close this one and if I run now the artisan migrate and then with the safe brush here yeah we have the skills table as you can see I'm going to open Also the table plus just to show you so let's open the rest API click open and here we have skills right now is empty okay then let's go inside the app models inside the skill model I'm going to add here a protected dollar sign fillable is going to be people with an array of our fields which are the name in our case and the slack okay let's see and this is the same typical laravel project now because we are going to use API I'm going to create a controller and a roads and the roads we are going to create inside the api.php not in the web dot PHP here is where you can register a web routes or or for your application and in the API here is where you can register the API route for your application so we need API we are going to register here and let's remove this let's create the controller first so I'm going to say artisan make controller and I'm going to add the controller inside the API folder and also I'm going to create the version 1 folder and then let's say skill controller okay then in the API now let's register the road and I'm going to say here a road group and I'm going to add a prefix for the version one so prefix V1 and then let's add the closure and inside this closure is going to be all or API rolls for the version 1. so in our case we have only the skills we're going to have only the skills but right now so let's say Road and we can create a Road Post get and so on one by one or if because we want to have a resource we can use the API resource here and say skills and add the skill controller class here like this hit save now if I open the terminal and say artisan Road list hit enter as you can see we have get skills and we have this URL API slash version one slash skills and the API is coming because we have registered the road inside the api.php all the roads here is going to have this API in the URL then the version 1 is coming because we added the prefix and also when we have the skills okay good now let's go in the controller and I'm going to create the first method because as you can see here we need the index store so update destroy now let's create the index method and here I'm going to return response response Json and I'm going to say here an string skill index like this if I save now I'm going to use insomnia as a client for this project so let's open insomnia here and let's create a new request the method is going to be get I'm going to name this uh Gill index request now as I said I have the laravel valley I'm going to use this for URL and let's go to insomnia paste that in but we need the API slash version one slash skills as you can see here so let's paste that in now and if I say send you can see we have 200 OK and skill index what we return in the controller good now you can see it's not that difficult to create a rest API with larave now let's create let's let's store the a new skill because right now we don't have skills here so the create a skill we are going to create a new request the method is going to be post I'm going to copy the URL because it's the same just we here we have post now let's uh go and create the store method in the controller because the store method is for the store in the new skill so let's say method store and we can use the request default default request or we can create a custom one the same we used in the initial projects with laravel so this is very good we can use also custom here in the API let's go and create one so I'm going to say artisan make request and let's name it uh door scale request okay and I'm going to use that one here so store skill request as a request and now we can say here called the skill net model and make sure you have imported up here they create and we need to add here the request validated data only the validated data is going to be here now what is the validated data let's go to this one skill store skill request change the authorized be true and we need to validate the name and the lock so let's say name and for me the name is going to be required I'm going to add the minimum and maximum values so let's say minimum of three characters and maximum of uh 20. for the flag I'm going to say the slug is going to be required and it's going to be unique unique to the skills table and the column is lock accept the ID I'm going to remove for now let's save and let's close this now after we creating the skill I'm going to return kill created like this let's go and let's see now what we are going to get in the insomnia if I just send request here we have 200 and that's okay maybe use say why why is that okay we need to go in the headers and add headers here I'm going to add the accept the B application Json and also let's add a content type to be also application Json now let's send again that scale and now we have Portal 2 message the slug field is required and Y is only the plug is required oh you can see here we have a dot let's add comma and now click Send yeah the name field is required and the slack field is required very good let's go to the body and let's say I'm going to add a Json here we need the name which is going to be let's say laravel and for the slug I'm going to say also that are available like this if I send the request now we have skill created and also if we go in the database and refresh we have the skill very good if I change at the B view Js also view.js here maybe like this click Send skill created again and 30 press we have UDS very good so we created the field now let's update that scale let's create a new HTTP request and this post let's rename that the B scale store request this one is going to be fill update request the method is in the B put or patch what you like so let's say put for now let's copy this URL go to the code and paste that in now we need the ID here okay I'm going to give it id1 which is the laravel now let's go here and create the update method so let's say method update and we need inside here the request and I'm going to use the same request so let's say store scalar request dollar sign request and we need the scale ID or let's use the road model binding by adding the skill dollar sign scale here very good and now we can say dollar sign scale update the request invalid data here and also let's return response Json and say not created now but updated so skill updated let's save and let's go here in the headers the same add accept to be application Json and also add the content type the B application Json like this go to the body select the body to be Json and let's say the name I'm going to say it's going to be lravel dot dot and this log is going to be also laravel dot like this now let's send a request skill updated let's go here and let's refresh this as you can see we updated the name in the slack very good now let's say I want the update only the name not the slot I'm going to say like this and click Send oh we have 422 the slug has already been taken because we say in the request the slack is required and also is unique to the skills and the name Slack and that's it okay but it's okay only for the tour method not for the update method and we use the same request for both part of the store and for update we can create another request or we can use that and instead of something like this we can say uh let's add comma here Dot and I won't accept this skill ID so it's going to be unique except this skill ID let's save and let's run again now the same request and now we have skill updated and if we go and refresh we can see the name is updated but the slogan now let's update also the slug here only the slug laravel and refresh as you can see update on the other name and refresh yeah that's okay this is uh one way or another way is by let's I'm going to comment please and say the slug is going to be required and I'm going to add the role the rule here sorry rule import the root from illuminate validation and I'm going to say rule unique let's use unique here unique to the skills so here is the table as you can see and now I want to ignore this skill so let's ignore dollar sign this skill and let's save and let's see how it's going to look how it's going to work now I want to show you if I refresh we have dot dot in the name and the Lara Valley Slack and I want to remove the name here and say send skill updated we have 200 and if I go here and refresh the name updated in the slack is remaining so it's up to you what you like something like this or using the rule unique like this okay let's close this and now we have the updated method what we need other in here get post put let's create one more for the show so let's rename this the B skill no request let's copy this URL from here and paste it the method is going to be get okay and let's go in the vs code and create that method I'm going to create after the index and let's say method here go we need here the skill so let's use Road model binding skill dollar sign skill and I'm going to return for now just that's it like this and let's save and let's send the request as you can see we have an object with ID name slug created at an updated at what we have in here ID names are created out and updated that but maybe we don't want to send all the fields we have to the front end to the client for that with laravel is very easy we can send a Json data by creating a resource so let's go to the item and I'm going to say artisan make resource and I'm going to add this resource inside the version one and let's say scale resource like this hit enter now instead of returning the skill I'm going to return this skill resource we just created and let's say return the skill resource we created but I won't return the new instance of this one so let's say new skill resource and I'm going to add dollar sign scale here as an argument so this skill resource and let's say let's go and make a get request and as you can see now we have an object and inside that we have the data with an object that says the same the ID name Slug and created add an updated but as I said in the previous maybe we don't want to go all the fields in the from that for that we created this skill resource now let's go here and let's say I want only to show the ID name in the slack here when we have the and maybe let's see here okay and here when we have a return parent the array and add in the request I'm going to specify only what we want the reader so I want to return the ID which is going to be dollar sign this ID and this is the scale we added in here then I want to show also the name which is going to be dollar sign this name and also the slab which is going to be the last sign this Slack let's save and if I make a send request a get request again yeah we have a data just with ID name and the flag and I think this is uh very good now also if you don't want the slug and if you want the full URL for this still we can say let's cut this and say Road skills go and pass here the skill plug like this and let's save and let's go and make a send request now as you can see we have this http arrest API test API version 1 and so on okay and now you can play here with the for example not slug but say URL and let's save click Send and yeah we get the URL here maybe not name but let's say uh skill name and as you can see we can play with that okay now let's uh go in the skill index because here we just say scale index but I want to display all the skills and for that in the skill controller here we can say return this skill resource but now not a new instant but a collection of that so let's say skill resource collection static method and add here all the skills so let's say skill or like this click save let's go and let's say send and now we have an object with data which has an array of all the skills and right now we have only two so we have one here and one here and that is okay we can say also here paginate let's say paginate one send a request and now you can see we have paginate one so we are going to show only one for the page and we have a data we have an object only one skill then we have links first last previous and next first URL last URL and the next URL then we have a meta here current page from last and also we have the links for the previous we have the URL and right now is no because we are in the first page active is false then we have the URL for the current page which is page one we have a page two and also then the page 2 we have next but is both if we are in the second page and then we have a path per page we show only one and totally with R2 so we had all the meta we need to create the imagination as you can see and that is one way another way is by creating a collection so let's go in the item and instead of creating a resource I'm going to create a skill collection very good and now in here I'm in the index I'm not going to return the skill resource collection but I'm going to return new skill collection and add that one and click Send we have the same thing so the skill collection is going to do the same thing the skill resource static collection method does good now the last thing we need to delete the skill let's create the request and I'm going to name skill delete request the method is going to be delete let's copy the URL paste it here let's go and create the method in the controller by saying method this drawing now and we need the skill so let's say kill dollar sign skill let's delete the skills or skill delete and then I'm going to return a response or we can return another page but I'm going to say skill delete save and if I make a we have the skill two one so let's say go get you for now come here and refresh we have one and two as you can see and I'm going to delete this so let's go and click Send request skill delete it we have 200 and if I refresh yeah let's delete the first one send request skill deleted again and refresh we don't see any scare and that's it how we can create a laravel rest API get postport patch get a single one and delete here we have the controller with index flow store update and destroy the resource and we have created the skill resource skill collection and store scale request and that's it how we can create a laravel arrest API hope you enjoy and if you like don't forget to subscribe to my channel like the video and see you in the next video friends all the best Hello friends welcome I have created this project the laravel arrest API project and I have used the insomnia to make a requests so forget all the skills we have make a skillcraft so get all skills single one store new skill update and delete and I'm going to leave the link of that video in this description now in this video I'm going to create the react project and use the derivel API to make a card for skills and I have done the same thing with the vue.js if you're interested in that I'm going to leave also that video link in the description so let's get started and create a new react app copy this okay go in the terminal paste that commanding and I'm going to name the project react Dash rest Dash API okay now CD in the project and let me just open this with vs code search code and now let's run the npm start okay here we have the project now I'm going to open the app.js and remove everything inside here just leave one div I'm going to install plugin CSS here so let's remove this up CSS file also the logo and let's go in the Italian css.com get started framework guides choose the create react app and let's copy this command and paste that in here terminate paste that commanding hit enter than the npx copy and paste it then we need to add this line inside the content in the dialing config.js so let's open the vs code Titan config inside the content paste that in save close next one is to copy the base components and utilities and add in the index.css file so in here select old and paste only the base components and utilities from that in CSS save that and run the npm Run start again so let's say npm run third and here we have the project again okay now we have blank page and I'm going to give you some classes here so let's say uh BG played 200 now let's install also I'm going to open the terminal inside here and I'm going to install the reactor router and the axios because I'm going to make requests with access so let's say npm install react Dash router Dash Down okay and the npm installed axios like this let's close this one now and inside the source directory I'm going to create a new file a new directory name components and inside the components new file and I'm going to name it home Dot jsx and it's going to be react Arrow function component let's save close and then inside the components I'm going to create a new folder name it skills the same thing I have done in the view project and inside the skills I'm going to create three files the skill index.jsx which is going to be react Arrow function component also the skill create dot jsx which is going to be real Arrow function component and one more skill edit Dot jsx and this one is going to be react Arrow function component save and close one by one and here or let's go first in the index.js and I'm going to import from the reactor outer Dome the browser browser and I'm going to wrap this up with that so let's cut this and say browser router and now paste that up here inside save and close in the app.js I'm going to import from the browser from the router the roads the singular Road and also the link from the react router down and also let's import the components import the home component from components slash home also import the skill index from components slash skills slash skill index now let's copy this and paste two times change the name to be skill create for this one and skill edit for the second okay now inside this div I'm going to add another div with class name to be Max width of a 7xl MX Auto and mean head screen okay inside here I'm going to add a navigation so nav with the USB give it a class name of just Flex and then add the LI with last name the B uh margin 2 padding two I'm going to give it a busy indigo 500 on Hover we are going to change the BG to be indigo 700 text White and give it some rounded surrounded MD like this and in here I'm going to use the link we imported from the react router Dom so let's say link so for the flash is going to go for the home and now let's copy this Li and paste change the linked a bit of the skills slash skills and the name is going to be now scales like this and let's save and let's see yeah we have something like this good now let's create the inside this div with Max with 7xl I'm going to add roads and then the single Road with the path to be for this one slash and the element is going to be the home component close that and let's close like this the road copy and paste three times change this to be guilds so we when we navigate to the skills the element is going to be skill index then when we navigating the skills slash create the element is going to be the skill create component and the last one we need that also the ID so let's add colon ID and slash edit and also the element is going to be the skill edit component very good let's save and if we go as you can see we have home here and if we have other skills we have the skill index very good now when we go to the skill index we need to make uh goal to make a call to this URL and get all the skills and display in the table so first I'm going to open the flow byte and copy the table from there I've got the dogs and we have table Yeah tables like this and I'm going to copy this the first one so let's copy this and go inside the skill index in here I'm going to add the class to be margin top 12 to this one and inside let's paste that one if I save and now we have something like this okay now we need to make a request to get all the skills and display in the table so let's go here and let's import from react we don't need the react let's import the use date and also the use effect and also we need to import the axios so import axios and then let's say here const skills and set skills is going to be equal to use State and initially is going to be an empty array then we need to make a call to get all the skills so let's say use effect and inside here we are going to call or the when this component is going to render so let's say I'm going to say const get skills is going to be an async function because the axis is returning a promise so let's say async and I'm going to say const here API skills it's going to be equal to a weight and make a call so axios dot get and we need to add the URL inside so let's copy this URL here and paste it okay and then I'm going to say that skills does a API skills dot data dot data at your times because as you can see we return data here from the laravel resources okay and now here let's call now the get kills function like this and if I refresh inspect the element go to the components and I have installed the react here and as you can see in the state we have three objects so we have the scale so let's make a Loop here and in the table we are going to display the name so here we have the name the slug and the ID so learn name the plug if you want the ID okay if you don't want IO don't want to show the ID and the price leave it empty because I'm going to add the button for edit and delete and then let's uh remove two here okay and let's cut this and say all the braces kills dot map and I'm going to go to name it skill here and let's return that one hole I'm going to remove this and also this shoe and here and here let's display the skill dot name inside here the skill dot Slug and here is going to be the edit and delete button so let's say edit slash delete the string and let's go and why we we have the state here so go to the console yeah we need to add change this class name so let's replace the glass with last name like this but that is not problem why we don't have so we call skills and we map oh we need to return I I just say here so let's say return sorry for that and now we have all of them we need to add here the key which is going to be the skill dot ID and now we are okay so refresh yeah we have the name of the skill the slug and the edit and delete here very good now I'm going to add the button here to go and create a new skill so up here okay so in this div inside this div I'm going to add another div and I'm going to say last name to be Flex I'm going to say justify and to be in the end and margin q and padding 2. and let's add a link here we need to import the link from react router down and as you can see we have import I have imported now and this is going to send us to the slash skills slash create like this let's give it some classes so I'm going to say glass name the b equals the BX 4 I'm going to say by to and let's give it a BG indigo 500 on over the same BG BG indigo 700 text white and let's give it around it MD and I'm gonna say new skill let's save it uh what I have this new skill is going to be inside the link save it and yeah here we have if I click we navigate in the skill create okay let's open the vs code and let's go now inside the skill create and here so this class I'm going to say class name to be margin top to B12 now we need the other form here that create a new skill so let's say form here and I'm going to give it a class name the B Max with MD MX Auto I'm going to give you the padding of 4 and let's say BG to be white maybe shadow MD and let's give it some rounded surrounded small okay and inside I'm going to add a div the b class name of base y 6 is going to be the parent one and here I'm going to add the D for class and just let's say margin bottom of four and add the label uh we need to say html4 here labeled for name and let's say some classes so class name give it a Blog margin bottom of two maybe and I'm going to give it a text mold font is going to be medium and let's say here name and then we need to add the input so input not index but input okay let's give you some classes so last name I'm going to say border border Gray 300 text gray Maybe 900 text small round that is going to be MD okay let's give it block class and width pool and I'm going to say a padding of you okay and let's close now this one and if I save and let's see what we are going to see yeah and I think it's okay for now we are not going to take on the files just have some form duplicate this change the HTML from name the B pro for a slug also here say slug and let's save it we have the name in the slack and we need to add the button so let's add a div with class name to be margin bottom of four class name the B margin bottom or and let's add the button with some classes and I'm going to copy the classes from the skill index when we have this button here just paste it here and they store like this let's say and maybe say margin or my or like this okay and I think we are okay now let's work with uh the logic so we need to import from react the use state and let's create a constants for I'm going to say form values and set for values equal to use State and I'm going to add an object with a name to be an initially an empty string endless log initially an empty string okay and in the input let's say now the name is going to be for this one name and the value is going to be the form values and we need the name in this case and on change I'm going to create on contains method so let's copy this and I'm going to say here constant on change and this is going to have an event and now let's uh disrupt from the event so I'm going to say const object distracting and with the distracted name and the value from the event Dot Target okay like this and now let's say set form values and distract the form values we have and say name is going to be what the value is like this okay now the same thing we need to do for the second input just change the from name the B slug also here plug okay and why we have this form values here form values Aya form values like this and I think we are okay and here we have make the same mistake so form values now let's see if I refresh and inspect the element go to the console everything okay skill create we have the state with the name and the slack empty type something in the name okay type something in the slack and we have that very good now we need to send a request the this URL and with a name and the slug and create so let's import again axios and as you can see we need the import access here uh in the scale index and also the skill edit so for that let me just let's remove this one and let's create in the Source directory let's create a new folder context and inside here I'm going to create a new file name skill context dot Js and here I'm going to make all the logic the get the skills index so here this one we can leave it or we can do there and just import the get skills and the skills from there okay and we don't need that import axials so let's make all the logic here so in the skill context let's create first we need to create a context we need to import from Material the create context and also let's import the use date here because we need to create a state and also let's import the axios here and make all the logic inside now let's say const and I'm going to name it skill context is going to be equal with the create context like this and we need to export default this so export default the skill context like this okay now I'm going to create the provider and I'm going to export name export and const I'm going to name it skill provider and we need to add the children the props hidden here or let's distract because we need only the children here and let's make the logic with the provider now let's go inside the objs import that provider here so import the skill provider and I'm going to wrap everything with the skill provider so let's cut that and paste down there save close and if I refresh go to the console uh so we have the export con skill provider and we need to return here so let's say return the skill context Dot provider and add the value here we are going to add an object with all the values and add the children here like this and we are okay now every component because we wrap that we can access the data in this context okay now inside here I'm going to go and let's cut this one from here and paste it inside here and also this on change cut from here and paste it here let's go index and I'm going to copy this that based also that one inside and copy this maybe only this one and I'm going to leave the get skills I'm going to import the get skills and call it here so let's leave it like this right now go to a skill context and create only the get skills method and because we are here I'm going to cut this one and let's say axios Dot defaults dot base URL to be equal with this URL here now we are okay good now let's also I'm going to create a console for a single one so copy and paste this one changed to be skill and I'll solve this onset skill and we need to make the same logic for the single one so let's say const cat single skill is going to be people with an async function and as I said that we are going to have the ID here to get a single skill and let's say now const and I'm going to say response to be equal with a weight axios dot get and add the URL which is skills because now we added the base URL here we have more clear here skills and add the plus the ID and then we can say set skill the very spawns dot data Dot data like this okay and now let's uh go to the skill index but before we need to return that so let's return the single skill all the skills also the method to get all the skill and the single one I get kills like this and also the on change method and I think we are okay also the four values now if I saved it like this let's go in the scale index first and we need to import so let's remove now this use State we don't need also remove this and let's import the skill context and from react we need to import the use context and now let's say here const object distracting and what we need we need the skills and also the method to get skills so let's say get skills is coming from the use context and the context is skill context like this and if I save and let's go in the skills and everything works correctly just we make the logic in the skill context because we are going to have also for the create edit and so now with the skill index so we are okay let's go and work with the create here we need the form values the on change and let's remove this oh we need to import the use context from the react and let's import the context which is the field context and let's say here const object distracting we need the form values the Unchained and this is going to come from the use context and the context is that skill context and if I say and let's go to this one and in the components still create we get the phone values which are the name the slug and if I type something as you can see we updated that and if I have something yeah okay I think we are okay now now let's or we can store the skill we are going to make the logic in the skill context okay so let's say here pronounced and I'm going to name uh skill or let's say store skill and this is going to be an async function is going to have an event because is we have a form here and let's say first here event Dot prevent default okay we don't need to reload that and now let's try and cast errors and here I'll show you we need to create a constant for errors as you can see we need errors so let's say cones errors and that errors the B equal with use State and initially let's say an uh empty but I say an empty object and down there as I said we are going to say try and cut so try await and now we say axios both the post but that one has suppose the URL is going to be skills again we have made other base URL so we are okay with that we need to post all the skills but we need to add here the name and the plug and we have them in the form values form values it can have an object with a name in the slack so we are okay uh that's okay but when we stand when we create a new post we want to update the skills because we are going to add one more so we need to call this cat skills again and it's going to make an API the skills and set the skills within you one so let's say get skills okay and then because we are here where we store we need to go back to the skills index here so let's say we need to import the use navigate from so let's go up here and I'm going to import the use navigate from the react router down and let's say down there const navigate is going to be equal with use navigate like this and down there so when we call the get skills I'm going to say navigate and where we want to navigate we want to navigate to the skills so let's say navigate the Slash slash skills like this and then if that is okay but if we have errors we are going to cut layers here of cards the arrow and we are going to check if the error Dot response at dot status is triple equal with 422 we are going to set errors so the error dot response dot data Dot errors whatever they get from the laravel okay and now let's go and add the store scale here in the value so store clear save go in the skill create and import here also the store skill and on form we need to call that so let's say on submit we are going to call the store skill let's save and let's see let's go here and let's see now what we are going to get let's say uh what we have here Lara value JS and react and let's add inertia and inertia say store and as you can see we navigate those skills and we have the inertia here very good but if we go and create a new one and just we have also the inertia still here we need to have a blank one when we come here and also if I store we have Portal 2 but we don't show the error so let's go and make that logic in the skill context we set the errors so here we are okay just we need to show in the form and just let me see if we have added here let's add also the errors in the value and import the errors here and after this input I'm going to say call the braces errors dot name if we have there with a name and add the spawn so let's say pan with the class name to be small text Dot text it's going to be small and let's give it a text red of 400. okay and we need to display inside here the errors Dot name and the first one in the array like this and just copy this and do the same on the flag just change from name the B plug and also slack here save refresh and if I say store okay undefined reading name errors and if we have import errors okay if we have the error's name we changed errors and errors here and why we cannot read the name here if the Earth's name we say Earth dot name in the skill context we say set errors though oh yeah we need that errors like this here and now refresh yeah we have there very good and also if I just add because we have the slag inertia and in the Lara value we validate for the unique so let's say here again inertia and for the slack but the slug is going to be unique so he's going to have only one and if I say yeah we have the slack as I already been taken okay good I think we are okay now with the create and let's work with the edit I'm going to copy what we have in the create here let's copy that and go to the edit and paste it okay now in the skill create we have imported form values and let's import this shoe first and then copy this and paste it right here just we are not going to use the store skill and let's remove that from here let's save let's go first in the refresh and here I want to add a link to go to the edit so let's go in the skill index and we have that or the edit and delete down there so let's say without the link is going to go to the is going to go so I'm going to add bucktix here slash skills slash dollar sign collie braces and add here the skill ID skill dot ID and also slash edit and let's add also the class name and I'm going to add last name what we have up here something similar so just copy that and paste it here I'm going to change the Indigo to be green or this and let's say edit here save and yeah we have added if I click we go to the skills pre-edit skills for edit and skills 8 edit okay now as you can see we don't have the values here in the skill edit we add the form values and initially the form values are an empty string but where when we come here we need to have the name in the slug of this scale so we need to make a call to get a single skill here and set that skill based on that ID so let's go in the skill edit and also import the single skill and let's get single skill like this and I'm going to import also the use effect and then here let's say use effect and call that get skill get but here we need have the ID from the params here from the road so let's import the use params from row react router and let's say down there I'm going to say let uh with a distracted ID from the use balance like this and now let's call the get kill ID and if I save this and as it is now and come here and refresh let's go to the components skill edit in the context as you can see we have the skill with id8 inertia inertia go back and let's select a laravet go to the skill edit and now we have for the context the skill is 3 and the laravel data and the ID is three okay now when we call this get skill I want so let's go to skill context get a single skill we set that but I want also the update the values for the four so let's say uh let's do first okay the consent for the skill or for the API skill API skill and it's going to be equal with the response data.data with this one and here we go we set the hip theater API skill and also I want to set the four values and specifically the name the B the API skill dot name and the slug they be the API skill Dot la and with that now if I save and as you can see we immediately update so let's select qgs we have ugs go back react we are here just we need to change this to be update in the skill edit down there let's see update and now we need to create the update method okay so let's go and create a constant and say update you can name it what you like update skill is going to be an async function and here we are going to get an event because it's going to submit to the form the first thing we are going to call the event prevent default okay and uh let's try and cut so try and then cuts the error if we have and if we have we are going to do the same thing so let's copy this and paste down there now let's uh stay here await and call axios Dot put now we need to put the URL is guilds but also we need to add the IDS or skills slash and buy these are going to come from the scale here we have the skill because here we make a call and we update them from values so let's use that in here to update that let's say skill dot ID and add also the form values here and the same thing we need also to go to call the get skills to update the skills because we make a update and also navigate the skills like this and I think we are okay now let's just add the update skill here save let's go to the skill edit and also get that so let's say update skill and on the form we are going to say on submit we need to call the update scale and let's save now go up here and I'm going to update the 11. so let's say here Dot dot dot click update we navigate back to the skills and we have the dot dot dot here let's update also the select B dot dot update and yeah we don't have any errors everything okay let's click again the edit and let's remove both of both of them click update we have the URL said that we have we need the flag and click update everything okay I think we are okay now with the update let's work with a delete I am going to add the button to delete the skill and let's close now this one and just open the skill index for now and here when you have the link after the link I'm going to add also now here I'm without the button and let's say give it some class names starting with r the same we have here so let's copy and paste it change from green to be red okay and let's say delete here just in this one we need to add margin or let's say here give it some face X2 and yeah we have something like this now on click of this button let's say here on click what we want to do we want to delete the skill and let's do that logic in the context so the last one let's go here and let's say const I'm going to name it delete skill and this one is going to be an async function and here we need to have the ID to delete that okay and let's say oh wait axios Dot uh called the delete now add the URL which is kills slash class of ID we get and then we are here so what we want we want is the code the get skills to update the skill so let's copy paste that in and now let's uh the delete skills here delete skill save close this we need to import also the delete it's not important to get from the delete skill from the context and now on click of this button we need to call the delete skill and add the ID which is the skill dot ID let's save and let's go on the browser refresh and let's delete the vgs okay this one and this one and we delete it let's create new let's say la level laravel let's edit say dot dot we have dot dot let's remove everything remove everything update we have errors and we can update okay friends I think we are okay here everything is working correctly the home page skills is going to show edit and delete and say new skill okay now let's go and create the new one we are directed back and that's it okay but if I go and create new skill we have the laravel here so we need to clear the four and in the skill context when we store new skill we say here get skills but this is not necessary because we also navigate to the slash skills and when we navigate to the skills here we have the scale index we call the get skills so it's not uh necessary the call the cat skills here but what we can do we can let's I'm going to create a constant and say initial form is going to be equal with uh this object so let's cut this and paste it here and now the form values is going to be use State and the initial form and if I come here and refresh inspect the elements go to the components create and open the form values we have the name in the slug if we type something yeah we update the name and the slab okay but then I want when I store new skill instead of get skills that's let's say set form values to the initial form the initial form is the empty name and the slack and the same thing I'm going to do for the when we are dating the skill so let's paste that in save refresh go to the skills we have created a laravel let's create view.js now store we redirected back and as you can see we updated the skills and if I go to new skills now we have empty good let's create also the react here we are and store very good now let's edit we have react yes we are just let's go back view Js okay if I uh say something like this we have the name field is required and the slug field is required now if I go to the skills and say new skill we have the errors so let's work also with that okay now here we need also the set errors the set errors an empty object so in the skill context right here I'm going to add also the set errors let's save and let's go in the edit import that so set errors like this and now let's call that that errors and it's going to be an empty object and the same thing I'm going to do in the create so import also the set no import but get the set errors from the use context and also we need now the use effect here and call that use effect and here we need to say only the set errors to be an empty object like this and add an empty array as dependencies and let's go edit remove this remove this update we have the name field is required let's go back new skill and now we are okay and I think we are okay so also if we delete let's go and when we delete that only delete a skill we can say also that check if window dot confirm so if we not confusing the window and let's say here are you sure we just return here otherwise it's going to call the weight and delete the skills so let's save and let's see how it's going to look refresh say delete are you sure no nothing happened delete again click OK and now delete it and that's it about this video friends I hope you enjoy and see you in the next one all the best

Channel: Code With Tony

Views: 27,024

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel api, laravel react tutorial, react crud tutorial, react context, laravel rest api crud with react, laravel react crud tutorial, laravel react fro beginners, react crud, react js, CRUD, laravel CRUD api, laravel tutorial, laravel project, laravel rest api, laravel react crud, laravel react, laravel api crud, react crud with laravel

Id: NS0RI2CfMLE

Length: 98min 56sec (5936 seconds)

Published: Thu Oct 13 2022