React simple CRUD application | React Hooks | Typescript

hello everyone i am sagar welcome to my channel learn to code in this video we will implement crowd application in react so uh here we will create a create form from where we can create a employee record that record we can see in the table list and also on clicking the view button we can view the details of the employee also we can update the record and delete the record we are doing this without back-end api or back-end code so all the data we are storing in the local storage also we are not using any uh ui component library like material ui or microsoft fluent ui two the purpose is to keep this application uh very simple or don't i don't want it to go in the complexity of using the other things uh just to learn the basic concepts of the react also we are not going to use any state management library like redux or uh other libraries okay so let's have a look uh like what we are going to build i have uh run this application on port 5000 so here you can see in this application we have the header also this is the table we show the all the records from here we can view the data details of the employee we can edit the record okay also we can click on the back button so we can uh go on the list and we can here delete the records as well and from add employee button uh we can create the new record at the gmail.com so yeah here we have two records so of the emilia name so we can delete it uh also like i said we are storing the data in the local storage so once we open the tab again the site again we are going we are fetching this data and showing this okay so what we are like learn from this application so we are using functional components so you will get much better idea about the functional components and for data storing activity we are using uh hooks uh use state and use effect hooks and here we are we we will go we will pass data from parent to child so that also help uh you also we are going to use javascript array to store the uh user records employee records delete and update okay fine so let's get started with the code uh here this is my folder where i am going to create the application as of now like we are going here to implement react cloud application so i expect everyone to have a basic knowledge about react and we are not discussing here how to install the node and setup with here i am going to use the typescript template i i always recommend to use typescript instead of plain react even if you are getting some complexity try to solve that but never skip typescript command to create a react application is like npx create react app and name of the application or the solution then we are going to use the template that is typescript it will take some time to install all the unnecessary things cannot create a project name creator npm naming restriction okay so i will use crud small so it will take some time okay so uh the command is completed now to open the visual studio code i will type code dot slash and our folder name react crud let's run this one npm start so the this application we are running on port 3000 and on port 5000 we can see what we have to achieve okay so this is the basic template uh react provide to us let's see what it is in the folder and files so in package.json we are using as of now 18.2 version and for typescript we are using 8 4.8.2 and this is our application react dash crud and our application version is 0.1.0 these are the commands to run the application npm start build and test eject okay let's have a look in the src folder here we have index.ts and app.tsx so we will i will delete this all the app related link okay and in index.es for now i am writing development view app okay and deleting this record to make the things clean okay fine so if you observe our application here you will find we we have the home page then we have the navigation bar or the header bar okay then this one is a employee list and after that we have add employee form okay and here we have model and also on clicking the edit button we have this edit page so we will target one by one first start creating the uh the header section so let me create component folder here we will write everything so first home.tsx and uh we are using here functional component so constant home arrow function and i am returning here some dummy text do this is a home page and we have to export this home component export default fine and now i can call this or use this home component in the index in stop this dummy text okay so here home the home component is auto imported else we will need to import it manually now on the ui you will see the home component dummy text fine so let's start creating the header section first or the here i'll write article then header these are the uh semantic elements in the html you can go and check that hv in h1 i will write some text react simple red application and some style as it is a plain text we can write some style to use style or to write style we have two three ways like so here we are i'm going to use the style file home dot style dot css here i will write a style for the header article article header i need a background color as a dark blue color of all the text it's 5u sorry white and border has a like three pixels solid and transparent takes a line as a center okay fine i can use this class now for this article so we will use class name article header and we have to import the style file home dot style dot css now you can check our style is applied to the header section so we are done with this now now uh we will focus uh like on creating the content part so let's create another section i will call it um like content okay so if i have here let me try write some dummy text this is a section sorry content part and as in our so it is starting from the this position but if we looked over the application which we are following we have this space empty there then we have taken this space also so we can do that so for section i will create some style that is a section content i will keep some space from the left side that is a 10 percent some space from the right and some more top just say 15 pixel saving it i can use this class name here last name so yeah perfect okay now we will start [Music] creating the state of the employee but so before that let me create a type file where we will declare the interface for the employee how and what parameters it should have okay so here i'm typing employee dot type dot ts file here we will declare all the types like uh interface i employee and my employee should have the id which is in string then first name also string then last name and it should have the email okay and we need to export this interface okay and i will create a one state here to keep the employees data my list so first first parameter that is the employee list it will hold the list of the employee then second parameter is a function which we will call to set the employee list set employee list and here we are using u-state hook okay we are importing threes from the react and for now we are giving it empty empty array which is similar to iop uh it's the area of the employee okay so i don't want to keep it empty it will make you confused so i i can create here one dummy object okay dummy employee list which is employee list area of employee list here i am creating array of object and i need to pass id we will create ide from date to json sorry to json and here we will create convert it to string then we'll set first name as dummy1 then last name as gmail.com and we need to export this one now we can use this here we need to import from the type file okay so the employee list default value is set as a this object or this area of object let's uh try creating the list first so we can visualize the records let me create one more component for employee list is dot tsx cost employee list array function and returning the dummy text this is employee list page and we have to export this export default employee list okay now i will import this component in the home.esx here to import i can click on the press the control dot and i i will get first option to import what employee list will do is uh it will show the records in the table format so we have to write the table here i can search table in html from w3school we have this format again other formats so yeah it looks nice we can use this one so table then table row okay so i can copy this entire table and here i can paste it and we need to copy its style also so i have copied that one i need to paste here i will create employee list style file style dot css and i am pasting here now i need to import that css file import or slash employee list dot style dot css okay so we can see the uh records now yeah here so we have uh the one record ready okay that we created dummy record you can show that dummy record in this table so let's work on that part what we need to do is we need to pass the employees data to the uh employee list component we can check what are there in our state uh you need to install the react reactive extension what is that react the developer tool for chrome okay then only you are able to see this tab in the inspect element so here we have two components render home and employee list as of now we don't have any props or state in employee list only some basic html but we have state in home component which we can see here okay so here we have only one record this record we need to pass to the employee employee list as a props okay so i will create here type props and here i need employee or i will just say list list is a employee list array and the prop props will looks like a props type here we can destruct it from the props so [Music] let me format this one so all the prop we will get in the list we have like this structure the object here okay so we can use this list to render in the table so how we do is uh let me first delete the extra records so to render the list we use a map okay map so map give us a first record as a like employee it's array function and here we need to return the element so element will be same as the table row okay let's check what this employee print or have a data okay and i need to pass the list from the home component it is also showing the error like property list is missing the type but requiring type props so here list will be employee list okay so we have passed the employee list to the employee list component we can see here in the logs this one okay so this is the log or the employee list which we passed okay now we have to render this on the ui this employee uh have the all the things which pass like email first name last name and id we can use that one as we are using the map we need to pass here the key which is unique and we have unique thing id then here we will use first name and last name first name and last name last name and here in second column we have to print the email and at third for now some i'm just writing action simple actions so these are the uh column headers so first name is a first column name then second is email third is a action let me save it and let's see what it is showing yeah so it is showing our dummy data if uh we update this state like here is a our state from the home component if i update here instead of dummy one i type dummy one two it should reflect on the uh employee list what error it is showing is warning each child is a list should have unique grip props check the render method of employee list okay but we have passed that one already can delete now let's see is still showing okay so here we have passed the key already you will take a take care of this okay so in a action column we need to we need three buttons that is a view edit and delete we can write that so i am wrapping this in a new element then input it's a type is button and the value is view the same i'm copying it's edit and third one is delete okay yeah let me delete these things this is employee list page and again this element also okay fine you will add a style later for now it's fine now we can create the add employee uh form or first we can add the add employee button here then we can create its form okay so here i will write input type button its value is add employee employee so here we can see the button now i will create one more component for adam platform add employee dot tsx it's add employee component and i am returning some dummy text for now this is add employee page and i am exporting ad employee component okay fine let me close other tabs close others but as you know we will show this form only on clicking the add employee button we can go to the home page here we will create one more state which will show us the like shown page set shown page which will be the value okay so use state first we need to show the list page okay and we can use this same condition here if shown page equals to equals to [Music] list then we will render the employee list it will throw error because in react we have to the element should return only one only one element should return that's why so i wrapped this in a react fragment instead of adding the one more extra element okay so i said here the shown page as a list so it will show the uh the employee list if i make it shown page equals to equals to uh add and here i need add employee it should show the add employee form or the content from the ad employee okay let's check it so here we have add employee and from the components here i am going to update this state as a ad okay so it is showing the add employee page i am again making it list it is showing the list uh we will not write this in this way okay instead we will create a we can create the inum so enum export enum employee shown page sorry shown page or the employee page or the page list sorry page num and page number list add for now we can use this in them here so first one is enum dot let me import enum dot list okay and also here also we need to use something like this list and instead of add stream we need to use the enum okay fine now what this add employee button will do is it will toggle the things like once i if i click on this button i will set shown page as a ad let me write on click and here i am writing handler on add employee click handler okay and i will create a function here constant add employee click handle arrow function okay once i click here this one said the shown page set shown page as page num add okay let's check it yeah it's working let me replace add employee it is showing the add employee page it's great let's focus on the ad employee from now so here we need to create the form okay and form will have the label first name and input text box input type text and same for the last name and email last name and email address okay and in in this form we will have the buttons as well so one button for back input type button its value is back we will have again another button which type is submit and value is add employee okay so yeah it is looking like this uh we can create its style we can add the style here letter first implement the back button functionality okay so on back button what i need to set is this property shown page and its value should be list page num dot list okay means we need a callback from the add employee to home component so how we can do that is we can create again type props on back button click handle we can return its the callback so this is how we write okay and props will be type of props i'm restructuring it on back button click handle and on clicking the [Music] back button i am giving this callback function on back button click handle so whenever i click the back button it will call this callback so we need to pass the callback function from the home you will see here it is showing the error okay so on back button click handle we have okay and on add employee click handle we have we can show create one more show [Music] list page set show page as page num dot list so we can pass show list page this function 2 on back button click here so on back button click of the add employee form it will call show list page by this way uh the show page property will set to the list page let's check it on back button yeah it's working add employee the form is showing on back button click it is going to the list page fine let's add some styling here for add employee i am creating employee for dot style dot css we can add the styling to the development or we need some header here that is add employee header just like this okay so i will create here d element then h3 add employee we can write form and this do i am wrapping or the add employee component in the duo so we can add the style or the form container and to make it align center takes a line center just import the style here employee form employee form dot style dot css okay and add that class here class name as a form container let's have a look okay fine so everything comes here in the middle and now we can make it much better by applying the some styling to the input and buttons okay so input type text as we are not using any ui component library that's why we need to do all these things else we get much better ui from if we use the material ui or the microsoft fluent ui ui component library okay so height here i am setting as a 20 pixel then padding left as a 15 pixel and margin as five pixel okay okay so then some styling to the buttons input type equals to [Music] button also input type equals to submit so for button and submit all the type we can use this style so height 20 pixel and margin we can set our margin left we can set it as a five pixel okay let me increase some height okay it's fine now we will uh focus on creating the new records on clicking the add employee okay let's start creating this means implementing this form so we need first name last name and email address so i will create a state for it so first name and function to say function first name is like set first name use state and default value is empty here i putting the used it from the react same for last name state last name same for email also email okay set email okay we can give now i am going to use this value to the input text box so value first name value last name and here value email okay uh what happened small email and uh on clicking or on change i will write one more handler on first name change handler okay let me create the function for it and we get the data in variable we can i can refer it as a e and i can set the first name as set first name e dot target dot value you can try console the e dot target you will get all the details same for last name same for email so here last name sit last name on email change handler set email okay so i can use the other functions for last name and email on change on last name change handler and for email on change on email change handler okay so once we start typing it will update the state from the ad employee form okay so whatever it is showing okay for now i can type any give its type any now we can see i can open the components tab here i have click on the add employee so all the states from this component i can see here once i start typing bob smith bob gmail.com so our state will get updated now next thing we have to do is on clicking the add employee we have to pass this data to the home component so it should update the new record in this state so here they will we have to create a new record then only that row will show on the table list i hope you are getting the concept and how to implement it okay so on clicking the submit button how we write is here on submit on submit click handler const so we can call back again to home just similar to back button click so here we need on submit uh click handler and here we need to pass the data from the form okay and that data is employee data so we have type ready so employee type so here i can create some one dummy object const data which is i of employee type i need to create id here id is the same way in same way like we create in dummy data new dot new date dot to json dot to string then first name is we have first name also we have last name and we have email also from the form so our object is a data is ready we can now uh give the data to the home callback function on submit click handler we can we can pass the data we can destructure okay sorry the function name is same on submit button click handler and we have to destruct it at this place so we can destruct from the props on form click it will call this function and by this function we are creating one wrapping we are creating one data object here and we are passing the data object to the parent that is home component so home component can get the data and home component can update the employee list let's now jump to the home.tsx here it is asking for on submit click handler on submit click handler i am creating the same function name on form or add employee handler let me change it again add employee okay so here we will get data which is type of i employee now what we have to do is like we have to push this record in employees let me or we can do something like this we have to call this function set employee list and it's a array so first i'm taking the list of employee list and after that i am appending the data so this way we can push the records in the array you can check this statement in the console let's check the form here i am writing bob then smith bob the date gmail.com and click on the add employee oh sorry the on clicking the submit actually it refreshes the page so we need to uh stop it from preventing it default activity so how we can do is e dot prevent default the default spelling is fault okay let's try again bob smith bob at the rate gmail.com yeah that's fine so here you can see the new record is added but it doesn't uh go to the list page on clicking the add employee so what we can do is on this line after this line we can call the back button click handler okay so it should go to the list page then john cena here john at the rate gmail.com yeah it's working properly okay so back is also working ad employee is all also working now we can focus on giving some styling like we can add here header as the employee list and we can keep this button at the right side let me close this also what you can do is if you want to add some validation here you can write that validation at this part so you can validate the data is there or not and according to that you can show the error or you can return it you cannot you will not then call these functions so this way validation also work okay so now we'll point to add the employee list header here and this button at the right side okay so let's jump to the home page again we have this add employee button let's write the some style add employee button float right use this class here class add employee employee button okay so it is here and we can give some margin bottom or else we can add the okay yeah we can give margin bottom here margin bottom as five pixel okay fine okay so uh we need to add the header here so we can write the header in the employee list form itself let's jump to the employee list here we can add the article and there i can write h3 tag employee list and now this should be in the middle so we can write here some style list header text align as a center employee list here let me class name this header yeah perfect so it is in center we have this button as well the button is fully working like it's working for back button add employee now we can focus on edit uh before that we can work on the delete part so the delete button itself in the employee list component so the similar way like uh we have all the data in the home component so we cannot do any operation for the data in other components we can just take the callback let's create here on delete click handler okay and it's a function type and on delete click we can send which record uh wanted to delete so it's type of employee and on on click we can use this callback function on delete click handler we can write in the destructor line object destructor line and we need to declare here in we have to pass that in employee list now on delete click handler delete delete employee const delete employee we are getting data imply fine so uh here we are like approaches to get the index from array that is employee list then split that or splice that and then update the new record again so index of employee index to delete so from employee list we can find that is from the index of function we can clone the employee list like also i will name it as a temp temporary list i will use spread operator so spread operator do the like a cloning work so all the employee list will be copied in the templates variable so it is a deep copy thing now from the temp list we have to splice that atom index to delete by one set employee list here we will pass the new record so what this line do is it deletes the record from the temp uh temp list and templates will have the name records and we are going to update the employee list with the templates let's save it employee list have some error what is that data i of employee okay correct so we have done some mistake here so on click handler cost on delete delete button click here we can use this function here or instead of writing like this we can directly write as a arrow function and we can pass the employee this employee it records to the this function so what we have done let me close all the tabs so from home component we have passed the callback for the delete item and in employee list we are calling that call when callback function with the employee as a data and in delete function we are doing some activity to delete the record which we kept in the employee list let's check it let me delete delete one dummy one dummy 11. okay what happen here okay so it's a array but i here use the object so it should be array because employee list we have mentioned as a array and before that we splice or we use spread operator with the object so it's that cannot be happen now it's working fine now i can add again new record like bob smith again the same name i can delete the john cena perfect it's working properly next we can target the model box here view button so on view we can see the this model with all the details from the employee let's create one more component we will name it employee model dot esx here employee model again i am retaining here some code this is employee model and i'm exporting that one export default employee model okay we will need this in the employee list so i can mention that anywhere here at the top also or bottom also employee model okay uh let's search for the html model code mod in html go to the w3 school or again other model let's check this one i think yeah this is fine so we need this code for the model i will write the code here in the employee model itself delete the comments and so this class we need to replace with the class name and we need to write the a css for the model so this all css i'm creating employee model dot style dot css i'm pasting it here and need to import the style file in the employ model import employee model dot style dot css so here okay let me check it again employ model it should show check okay so by default the model is displayed none we don't need it okay so what we can do is on clicking the view button we can keep one property to show model so if that property is set true we will show this model if that property is set as false we will not render this element we can work in this mat in this way okay so let's create one state in the employee list const show model set show model it's a boolean property use state first by default i will make it false need to import used from the react and if you state is true then only i am going to show the employee model so how we write is employees if show model this drop is true then only i need to show this okay and on this button on click view the view record or view employee flow i'm writing here one more function view employee and uh on clicking this function i will set this property as true okay let's check it on view click yeah it's correct but on clicking of this cross button we need to close it again and this cross button belongs to the model so on cross button click we need a click handle uh in the employee list component so again the same thing we can do this by callback so here we will create type props okay on close on close we will just give them callback function let me you props props object destructor on close okay so on this this is the close button on clicking of this close button on click i will call this callback function on close and we are using this employee model in the employee list so we have to use this here on close on close model here const on close model we can set show model as false let me save this file as well let's close this one yeah correct so on clicking of this we can show the model on close clicking on the cross button we can close the model so what we need to do is we need to pass this data employee dot data on view button click to the this model let's do that so here we need data this is the type of i employee and here we can write the due for the employee data not h1 i will keep this h3 fine then i will write here on the due for first name last name and email first name here i will print let me write here data data dot first name again i will copy the same for the last name last name again copy the same for the email email address email okay great we need to pass the employee data to the model now so how we can do is uh here on view button click we can pass the employee just similar way in like here we pass so now we need to pass it here how we can pass is we can again create one state so we can keep that record here in one state so how we can do is data to show set data to show this is a use state um for now i can set is null okay this is of type i imply or null okay okay fine so we can say null or any data of i employ type so this is view button on view button view employee we can set this data here we will get data employee and set data to show data and we can pass this data to the model here what's happening here okay so here we can add one more condition if data not equals to null okay fine so we don't have any error let's check it on button click correct so the data we can see in the model now let me create one more record bob smith rate gmail.com let's view it great we can make the width we can change its width uh okay so here we can keep this as a 50 percent yeah it looks nice now we can focus on the uh edit uh as i don't want to make the complex forms i will create one more separate component just similar to the add employee form here edit employee dot tsx cost edit employee written edit form and export default edit employee uh so in similar way uh like on clicking on add employee we are showing this form so on clicking the edit button we need to show the edit employee form so as we have here this shown page we can use that uh same condition like we are using to show the list to show the ad form we can add one more uh in the enum that is edit okay so if the shown page equals to page enum dot edit i will use edit employee form here and how we can set shown page as edit is we can get the callback from the employee list on edit button click and similar way like we are passing the employee data on delete button click we can do the same with the edit button also so on click here on edit we can pass the employee this data and we can take this from the parent so here in the employee list on edit click we need to pass the same data as we are passing in the delete click okay so on edit here format now in a home here we need to write on edit and one callback function on edit or edit edit employee data so here i will write function on constant first parameter is data which is of employee and uh the same way like we need to set shown page as a edit and edit data as a this data okay so set shown page as a page enum dot edit and data to edit one more uh state we can create data to edit set data to edit it is like null for now as null or i employ we can set data to edit call this method and pass the data and now we have to pass this data to the edit employee where is our phone or here edit employee so we will create one more type here type props data to edit which is of type i employee and uh i can use this props here props and destructing the data from the props and as it is the same form like what is the name okay so as we are using the same form like add employee we can copy that same form here as well so here i'm copying everything in the edit employee also i can import the css import employee form by form dot style dot css again we can copy the states also these states okay here but the value of this first name last name and email will be from the data twitter dot first name then data dot last name then dot email we need to import the use date from the react uh again we need to copy these functions to update this states let's copy that as well we can use the same form as i said uh here only we can do that activity but it will be some a bit complex and i don't want to go in that complexity that's why i'm creating the separate component in upcoming videos or in future videos i will use that approach so you can check or you can learn from that okay so for now also we need a back button in similar way here on back button click i'm writing here i am taking that from props so the back button can use that and instead of add employee here i will type update employee for now i am okay let's copy this function as well from the add employee same function pasting here one thing to remember we are we used to create id in a new id in ad employee but in edit employee we are not going to update the id we can use the same id from the data which we are updating id so here data and data mix i can and on submit click or i will instead create new name on update click handler we need to pass the data we are not retaining anything we don't need anything so here i'm writing in a destructor statement and i can use it here some spelling mistake so updated data fine so home component need to pass data back button click handler and update click handler let's go here here we can pass data which is a data to update we have this state here data to edit sorry okay then uh on back button click handler okay let's data is showing something like it's a type of employee or null so in edit employee we can okay it's a type of imply only here we have mentioned it as a i employee so what i can do is i can keep it as empty object now back button click handler on back what is that method name okay sorry show list page and again last one on update click handler update the record update the record update record or update data here update data we are getting the data from the update form so see here the logic is like we need to again take the index uh by id because this id because this data will have the same id uh of the employee which is here in employee so how we do is const index of index of record or index of data so data dot filter we will do filter sorry we don't have to perform activity on data we have to perform activity on employee list dot filter okay x dot x dot id equals to equals to data dot id and it returns the array so we need only first record so it will take this filtered data from filter data we can take the index data dot index of sorry again from employee list dot index of filter data index of a record okay uh okay fine so again we can take the employee list in a time variable named data employee list so the it should copy the it should do the dip copy and in term data we can update the index of record with new data so the team data is updated about the updated records we can now call state employee list we can now pass the team data here so this should update the uh record employee record let's check it so we don't have any error as of now okay it's showing some error at this point in home.tsx but in employee list.tsx okay i need to save this let's check on edit key click we can now see the edit form so i will update here in stop dummy one i will write dummy one two and update this okay again same thing happens uh in edit form here on submit button click handler okay on update click handler what happens edit update employee it will call this function it should prevent the default activity on update click handler it should call the parent function that is update data and with that it should call the back button click handler so it will show the list what we are doing here we are fetching the filter data we are taking its index of record we are coughing here i think this is correct okay let's inspect and check what the error is not a function list dot map is not a function at least debug the function okay so i got the mistake like we i have done again repeat the mistake uh employee list is a array not a object so we need square braces here similar way we write in the delete and let's check it again i'm typing here dummy 2 1 2 okay that's great our recorder are now updating let's create one more bob smith bob gmail.com now view it bob smith updated john smith email is john fine now it is updated view it now delete dummy one two perfect so we have done almost all the things now the last thing which we pending is we have to store this data in the local storage so on refresh we can see the the saved records let me delete the dummy record now from employee i will delete this one dummy employee list from here and from here as well so here i just use empty array perfect so what i need to do is i need to create uh so whenever we perform any activity like uh related to employee list like set employee list that time we will store that uh record in local storage so let me create one more parent function to set this list okay so on constant set employee list it will take the the employee list list is of i employee array okay and inside that i will call this one set employee list and i will pass this list here and from all the places where we are calling the set employee list we will now use underscore state employee list so to go to all records i'm pressing ctrl d and ctrl v so all the records are updated now okay and this new list i will store in a window local store local storage local storage here set item my key is employee list and this data list to uh i need to make it a stringify json dot stringify to this data okay let's check it in application here in local storage you can see now uh some records i think these are from previous clear it okay bob smith bob at the rate gmail.com so you can see our logic is working and data is stored in the local storage so what we need now whenever we refresh or whenever we uh like open this application only that time for the first time we need to set the employee list so our purpose is only for once and only when the home component is ready so for that we have one more hook that is use effect okay use effect i need to import from the react so first parameter is a array function where we need we write our logic and second parameter is a condition so [Music] this condition is for like how much time we need to execute the this function from the use effect so if i write it's a conditional so if i write here like empty array it will only call once if i don't write anything it will call every time whenever i update any of the property like employee is shown page or data to edit so whenever the home components re-render every time use effect function will get called so uh regarding use effect we will talk in some other video for now i am using empty array so it will call only once when home component gets rendered first time and here i need to get the record from local storage get atom and our key name is employee list const list this is in string format okay so if it has some data then only we will set employee list so json dot parse we need to pass the string so i think we have done this so instead of calling this one we can call the the temp variable we have written let's check it now yeah you can see here let me open a new tab okay so it is fetching the records from the local storage okay so let me close other tabs let's create one more record john cena and your john enter it gmail.com fine i'm closing this one i'm again i'm close opening the local store 300 so yeah we can face that recorder i think we have almost uh or we have done with the application and the crud we have learned how we can create the cloud application in react so here so what we can improve in this application is so we can use any other ui component library like material ui or microsoft loan device so we need no need to write html from the basic we get a rich ui libraries or rich ui things then we can use this state management library like redux so we don't need to pass state from one component to another so you can think like we have a lot of hierarchy so how we will do that so redux helps there instead of storing data in local storage we can create a backend api to keep that data also in this application we haven't used the routing we have just used the show and hide the components we can improve that thing by using routing okay also for forms we haven't implement the validation although we can do that but if we use any like library or or like a react hook form or other form that helps so in next video i will come up with the improvements for the this application so you will get much more idea about all these things okay so for now thank you so much you can like the video also subscribe i will come up with other many different applications

Channel: LearnToCode with Sagar

Views: 35,544

Keywords: React, CRUD, Typescript, ReactHooks

Id: R1uTPIOuT8s

Length: 98min 34sec (5914 seconds)

Published: Fri Sep 09 2022