React JS CRUD Application | React JS Tutorial | React Hooks

hello everyone this is manoj welcome back to my youtube channel in today's video i'll show you how we can perform grid operation current operation is something which we use in most of the applications like insert delete update get all get by id so we'll use all the operations in today's video so far i have created a blank free xjs application and you see this is the default interface of exist application so let's go to visual studio code so this is our app.js so inside src folder let's create a new folder and give it a name components and let's create a new file and give it a name employees dot js and here let's declare array employees and inside this will create multiple objects so the first id field after that name field let me give my name and let's say third field is age 30 so let's copy this object and let me change id also change names is 32 is 33. and finally sport default employees so it will help us to get this employee so here in the app not app let's also create one more file it's home.js and first import react from react and let's import some bootstrap components so button and table from react bootstrap and also import the css bootstrap that is the path and after the css let's import our employees now let's declare our functional component so function home return dev and finally export default home so here let's declare a table first and instead of this div let's use fragment and inside this let's create a div give it a style margin 10 rem so now declare the bootstrap table so table let's give some style stripped bordered and whole effect and size small so first t hat and inside t hat let's give a tr and inside let's give th which is table head so first one name second one is h so now after t head let's give the body an anxiety body let's check if this employs and an employees dot length greater than zero which is which will return true in our case because we have three objects but i am giving this condition if you use a web api which will return the list of employees so at that time you need this kind of condition all right so if length greater than zero then employees dot map map we will use on array in our case our employee is an array so now item arrow function here we will return so let's give a tr and inside tl skip td so first we'll give item dot you see already intellisense is showing name and let's give page so let's save okay and if there is no record in this employee then no data available save now go to app.js and first import home and after that let's import for this we only need home because employees we have already imported in the home component so let's remove this header part and we need to import browser router route and doubts from react after dome so from react router dome so the first is browser router as router alias and we also need to use route and routes i'll show you how we can use this so first we'll use router which is a alias of our browser router after that we will use routes this so it will create our routes and now we'll create our route means this is the parent again this is parent and now will create route it will define our components like home add delete whatever component will add will give route respective to each component so route after that we need to give a path so path means whatever url you will give in your browser so for home let's give slash so by default when you run this project you will land to your home component and after that we need to give element element means component so for this default url will give home so home will be our default component and we need to give like this so save now if we go to browser to see our bootstrap table is rendering so three employees are there manoj virat if you see our employees so all data is there now let's try to give some buttons so that we can add it and delete here so if i give another head actions and in our map here so after this td let's create another td and here we will give bootstrap button which we already imported button and let's say on click event first let's alert item dot id if you see this id column delete similarly let's copy and give a single space and paste and give it a name or let's give this added and this says delete so now let's save and go back to browser you see both buttons are there so now if you click button you see if i click this so it will display id 2 because cool is having id 2 perfect so now let's try to give a click event to delete the employee so handle delete let's copy this we need to create a event handler here we are getting id so when we click on handle button it will call this particular method so inside this let's get first index is equal to employees dot map function give a variable so it will return e dot id so basically what it is doing it is taking this id as a parameter and it is returning that particular employee from this array sorry we know this don't want this here and after that dot index of id so now by using this we can get the index of that particular employee so after that employees dot splice index whatever we just get and one so what it will do it will go to this employee array and it will check for this index and it will delete that particular index and after that let's go to let's create history also here so import from react router log so we need two things link and use navigate so by use navigate we will use history let history use navigate and after that let's copy this history and give urls slash so this is our default url if you go to app.js so this is our default route so save refresh so if i click virat you see delete delete if i again reload it will display all three so what it is doing when we click on delete button it is taking the id of this particular object and it is going to our employee array and it based on that id it is taking the index so for manoj the index is zero for without one and wrote for two so based on index it is going to this employer and deleting that particular object okay so now let's go to our we'll add it button so now for edit let's wrap this button inside a link link and 2 means the path and here we'll give our edit path so add it and wrap this button inside this link so save if you see if you notice here in this corner it will display the route or you can say the path as of now we don't have this added component so we need to create a component also after this table let's give a vr and let's create another link for a create button slash create and give a button size large create let's give a class name d grid okay python 2 save go to browser you see we have a button here for perfect now let's go to our app.js and here we need to create two more routes so let's go to component and create a new file and give it a name add.js so first import react from react and we also need import components from react bootstrap so we will need button and form not from form sorry and we also need this style and let's also come copy the employees and we also need one auto generated id which will which we will get from uuid so it will give us a random unique id which we will use to create a new user okay or new employee you can say so after that okay let's go to this now let's create a function called add return and finally export default add so now come here and we need to have some states so go to the top and create use of use state so we will need three states so first const name set name use state blank string copy paste age set age after this let history use navigate and in the return let's create a div and after that just align it perfect so let's create our form let's give a class name d grid gap two also give one style for margin 15 rem so it will take margin from all four sides so let's create one form group so basically we are creating our input components so first form group class name mb three which is similar to column three and i'll also give a control id form name so inside this let's create a form control and for this form control we need to give some properties so first of all type text placeholder enter name and make it a mandatory field all right and let's also give a on change event so on change event and set name e dot target dot value so this is our complete name text field let's copy this and paste it and change it some naming so enter page and here we will use set edge field all right so our input fields are ready so after this let's create a button and type as submit submit we need to give a on click event for this button so on click handle submit and pass e which is object of event so let's copy this we need to create this event handler so const give object or you can say type e and now first of all we need to hide all the other events so e dot prevent default so now let's create a unique id so const id is equal uuid so it will give a unique id and now we will take first eight letters from this ids object so id dot slice zero to eight so it will give the first nine digits so after that let a equal name and we equal age and we need to push this object into our employee so employee dot push so first we need to give you see the intellisense id name and h so id unique id and name a h b save and after that history default which is our home component so let's save this go to app.js here we need to import this import add and here let's give a route path create element add save go back refresh one more time and click on create so we are on create so let's create a new employee let's say uc jahl is 29 click on submit you see we have successfully added a new employee in our array if you see here in our actual array we are still having three but we just pushed it if you again refresh we'll see only three so that is not permanent if you need to some permanent solution then you need to use actual api response and actual api post call to add this employee but just for your reference i am showing you how you can perform all credit operations so again let's create another employee we are having four so now add list lead is working now let's go to our added part and work on it so go back our project and in the components folder let's create a new file and give a name added.js and here let's go to add we need to use almost similar things here and with used it we also need use effect and let's save now create function edit so here we are using functional components which is a part of react hooks export default edit go to add copy this we need one more state for id set id we also need history same way if we go to our home we need this index this one now let's create written div and inside if let's go to our ad let's copy this entire form and paste it here so we need to change type text is there enter name value so here we need to give value so whenever we click on added so it will bind that particular employees details here so for name it will bind the name and for age it will bind age so these two things are coming from these two variables okay now on the button we need to change this submit to update and now let's copy this event handler so let's delete this part so after the event dot prevent hand so let's get the employee first so employee index which is coming from here and now we can access all the properties through this object so if i press a dot you see age name id so a dot name equal name so don't confuse this name is the property of your this array of this objects and this name is your local state this one so this is the property and this is the variable name this state similarly a dot age equal age and we are done so history to the default component so let's save this and after that let's create use effect so which will get fired on load of this component and in the dependencies we will pass blank dependency so it will create it will get load only for one time so now set name local storage dot get item name copy paste three times set age age set id id perfect so now go back to home and on our added button event so on click here so let's remove this handle added so we will pass three things so first id item dot name item dot h so let's copy this we need to create an event handler for handle added so here we are getting three things first id name and age okay so here we will if you see in the employees sorry not in edit so let's copy these three things so localhost.item h so here we will use set item name and then the value so name let's copy paste three times page and id and replace all three key value names so age and id done so go back to browser refresh let's try to add this to sharma edit oh we need to give a route for added so let's copy this one on edit edit same copy edit and element is edit component save let's go back refresh so if i click on add it so you see we are getting both the value within 33 if i change it to 35 update see 35 if i go back again do it sharma the captain 29 update solution by the captain 29 let's delete create test 20 save that gate 1 mst 37 script delete delete so we can see we have performed all four operations through these components so we have add edit employees home so this is about today's video i hope you like it if you did so hit the like button share and comment and i have announcement if you are looking for a project like you are doing some internship or you are preparing your project for a final year college project then i do these kind of paid services so you can contact me on my instagram my instagram handle is openprogrammer and you can also find my contact details on my channel description so also in the next one thanks for watching take care bye

Channel: Manoj Deshwal

Views: 173,096

Keywords: reactjs, react, react.js, javascript, CRUD, react js, react crud, react js crud, crud react, react js tutorial, react crud app tutorial, react js project, react js tutorial for beginners, react js basic, react js dasar, react js simple app, react js simple project, learn react js, learn reactjs, learn reactjs by example, learn react.js by example, getting started with react, getting started with reactjs, belajar reactjs, reactjs example, manoj deshwal, connected programmer

Id: 3IwGjihXHis

Length: 34min 59sec (2099 seconds)

Published: Fri Jul 22 2022