CRUD Todo App | React Typescript Project | Create TODO Web App With ReactJs + Typescript | Tutorial

[Music] hello everyone and welcome back to TS expert today I'm excited to show you a practical example of building a crud too app using react and typescript so before we get started let's understand what is a crud basically means create read update and delete so that's the definition of Cur and what we are going to do is as you can see in front of you I have created this to-do app in react using the typescript type safety and what it does is basically it lets you add new task so let's say go to the gym and if I click on ADD it this gets added and you can see it here so that's create so we have got the first part of the CR app so create we are creating a to-do second one is obviously we can read them and now you is we need to update it so I've have got the this edit button over here you can click on it and you can see go to the gym can be edited you can just do uh prepare for the interview and then you can click on this and now your too has been changed so that's update and now the last but not least is delayed so crud create we can create a to-do we can read the to-do and we can update the task we have we are creating and last we can do deleted so we can also delete it and what I'm doing is I'm using local storage so this is getting stored into my local storage so I'll go to the application I'll show you where it is and let's close this local storage and as you can see that's that's where it's getting stored so if I delete this one you can see it's get deleted let get Del let's add a new task let's say one one is here second to do ignore the spelling so you can see that it's all getting stored into your local memory and we can refresh it it's still there until I delet it or maybe the session ends so let's go ahead and see how we can create this so here I'm back in my VSS code I always use VSS code as my ID again it's totally up to you whatever ID you prefer and in this we are not going to use npx create react App instead we will use weight so we will use npm create weight at latest the reason I'm using we is because it's much faster than the npx create react that takes a little while so we're going to name this too TSX and obviously you can use the arrow key up and down so we're going to select react and then we're going to select typescript and now we need to CD into this because we just created this project inside of a folder but now we have to go into that so you just follow these commands right so we go CD to do DSX now we are in that directory we can hit npm install to install all the necessary dependencies and we just wait a few moments later so our app has been installed now to run this usually when we use npx create react app we use npm start or Yan start in this case we use npm run Dev and then it gives you these to open it in your web you can either control click on this or just type O and enter so this is your wheed project this is how your wheat boiler plate looks like your template react project looks like when you're using read but we don't want this we're going to actually clean this up and create uh create our to-do from scratch so we want a blank paste so let's go ahead and start cleaning up the app so first we have to actually go into the project because it's not open here yet so what I'm going to do is I'm going to stop the server here and I'm going to open this in another window here and what I'm going to do is I'm going to close this window it's still running if you refresh this this won't yeah so now we have the project open here let's open the terminal npm run Dev again all enter so this will just start so let's go ahead and and good thing about weat is that the public folder doesn't have index.html inside and we not going to use this we can delete this basically there's not going to be anything in the public folder or we can just use uh SVG icon for our favicon but uh we need to go into the source folder as you can see your index folder is here and it's pretty clean already so we are going to go to Source we're going to go to app. CSS delete this index. CSS deleted we're going to delete this file as well and then our main TSX in we is your index. TSX file and inside appts CSX we are going to remove whatever we have just deleted so we have deleted the CSS file as well we actually can delete the US state because we don't need this counter here from this Dave till this day we're going to leave the fragments here and let's go ahead and see the app is blank check for console errors always check your console if you're getting any errors yeah that's not really related to that so this is all clear was fail to I think it's because I deleted that file but that's all right our app is still running error Source index to CSS okay so we have this file here so we have to remove this as well to get rid of all the errors so here you go all clean now what we can do is we need to go to Google and we're going to search Google fonts and over here I think I already have this but I will start again so you can understand what's going on so we're going to search for Roboto these are the fonts that we're going to use for our app as you can see here we have got two different fonts here so Roboto let's pick Roboto and I think we going to need 500 B uh let's select this one and popins also let's sorry my bad so we go Roboto again and we need to select 300 and 400 regular and the next font we are going to use is Poppins same here we will select like 300 400 and 500 once you done that you come over here click on this and you get the link from here copy this come back to your vs code we going to go to the index.html file and just below this link we will paste this so we have got the link there now we have the V plus react plus typescript project we can rename this and the flaton and the app name so we can do this we can remove this and name it what to do so that's the name of our app now that we have got our app sorted we have got the name the one last thing I want you to do is split the terminal or don't stop your running one if you want you can stop it but split the terminal and then install react icons because we have got these icons here you can see all these icons which I'm using from react icons so let's install there so npm install react icons so we install these once these get installed while they are getting installed we can do is we can create our folder structure so it's already installed let's go check it into package.json file react icons are here yes we have got it so we can close this we can close HTML but remember we have got these fonts name here that we're going to use in our CSS file ler room so that's our basic now let's go to Source folder and inside the source folder we are going to create a new folder name it components for our component and I think I'm just going to delete the asset folder we're not going to use it and another folder for CSS for our styling so that's done now we are going to create our components inside this folder and our CSS file for those components in this folder but now we can do is I want you to click on Source add new file to this and this file we will name this to-do too dots so this file basically will store the types for the todos so you know like what type of too are you adding it's obviously it's just going to be an ID with a number and a text with string and completed with the Boolean so interface Todo types let's get ID as number actually this has to be export we'll export it later uh and then a text to do text which will be string and completed upon deleting it I don't think we really need this but let's just do this Boolean and Export default to types so now this is available globally inside this app so we can use this any way you want once we have done that uh we will create a module that will provide card operation for managing TOS so all this C operation that's happening we are going to create a module file for this which will create read and update and delete everything all those functionality will be added into that file so let's go ahead and create that file new file inside the source okay and we're going to name this too service.ts file so inside this Todo service.ts file we are going to import the types we just declared in the previous file so we're going to import to-do types from to-do and let's create a variable to store into the local storage so const local storage key so we are creating a key to store into the local storage and we going to name this my bad use and let's create this module file Todo service export default to the service and now inside this we are going to create our function our card operations the so the first function we are going to create is get todos and the purpose of this function would be to retrieve a list of to-dos so we going to create let's just comment out get toos get toos and let's get the types to do types obviously an empty array and inside this to do types has imported just my bad so we have imported the two types and inside this function we are going to create a variable [Music] const to do uh to do a string actually so we're going to con to do string local storage start get item and then we pass it the key that we created up there which is local storage and return to do string is equal to Json do poers then we get to do string else we get an N so this is obviously spelling is wrong so let's change this it's to look storage so this function what is this function is doing is this Con to local. get item local storage key this line retrieves a string from the local storage using the key local storage key it assumes that that the toos are stored as a string in the local storage and what is return statement doing here is return too uh too string Json this line checks if too string is true then it means there is some data in the local storage so it passs the string using json. pars and to convert it into an array of too assuming the data is stored in the Json format if too SDR string is falsey then we will just return the MP array so this is basically this function is doing now that we have got our get to-dos function the next function we going to create is adding the todos so adding toos and what I'm going to do is I'm going to create a function that will take a parameter of type string and will return an object of type todos so we're going to go ahead and add todos and this function is going to take a parameter as text type of string and it will return the obje type of twoo types this obviously an error function so now once we have done that we will call the get to uh uh get to this function that we have declared up here we want to call this function here so so we can retrieve all the available list of to-dos inside of add to-dos as well so what I'm going to do is const toos all the available todos from to-do services this file and get this function get todos that's it and now we need to create a new to-do object with an ID sorry which will be greater than the length of the crun todos array the provider text and default complete a value of that will be false so what we can do is const new to-do type of too types these are the types from this so we are providing them these types so we got too types and then create our object so this object uh with uh ID to check toos do length + one and we're going to get the text so the provide text and default completed values or fals so text and completed value is false so we have got that now let's create a new array in which we can spread the elements of the existing toos AR and appending the new toos to that so so we can go const update toos and we can spread the toos to new too and now we can update the local storage by converting the update toos array so we can convert this to adjacent formatted string and store store it in to the local storage with the key we have created up here so we can go local storage do set item to local storage that's the key we generated up here and then com Jon do stringify brackets updated to that's done finally we can return return return the ad sorry new toos we can return the new too so this is our let's just do this so this is our adding toos the next function we going to need is update to so we are going to updating the too cuz we also have a option where we can update an existing too in our to-do list so the purpose of this function is to update our to-do so we can name It Up Update to-do and this functions takes a parameter of to-do of type to do types and also returns an object of the same type to to type so once once we have got that we can call the get toos again uh which we have declared up there to retrieve all the existing toos so we can pretty much copy this lane from here line Sorry Lane so we can copy that line down to here and after that we can create a new array which will map over the existing Todo arrays for each too we will check if the ID matches the ID of the provided too so we can go call update toos so we're just naming it toos so it doesn't go with the function todos equal to todos now we have to map it so we are mapping it to check if the T will check if the ID matches the ID of the provided to so t t do ID is equal to too do ID then we want to do else we can just do two so that's what we are doing here and once we have done that then so what's going to happen here is if there is a match if this matches this uh it replaces the existing too with the provider to-do otherwise it keeps the to-do unchanged so once we have done that once we have done that now we can again update the local storage by converting the Json stringify here oh my bad so I'm going to copy this line of code from here and just paste it here so what we are doing again local storage set item local storage key Json string ify updated to do so in this case we are converting the updated update it up too's array to Json form matter just like we did in our previous function so once we have done that now we want to return what we are returning here too so there the function to update the too now the last function we need is to delete let's make it red deleting the too this is going to be a void function so this won't return anything so we can name it delete to do and it only takes an ID as a parameter a type of number and since this is a void type it doesn't return anything so sorry need a arrow here and inside this function what we're going to do is obviously we're going to call the existing todos so we can copy this Lane again we did it in both of the function as you can see we declared the function get toos and then we call this in our add toos to retrieve all the toos we called it in our updated toos to retrieve all the toos and now we are doing it in our deleted toos as well so we're getting all the todos and now let's create a new array which will filter the existing todos array this new array will keep only those toos whose ID does not match the provided ID effectively removing the too with the specific ID so what we can do here is we can get const updated toos toos dot we are filtering them filter too and now let's check to do do ID is not equal to ID last we can again just copy this line line here so we have to uh again update the local storage by converting the updated to to Jason form so that's what we going to do here so we go update oh my bad need a comma here I was like why I'm getting an error here so this is our delete too function and since it's a void function we are not returning anything and I've got an typo here so this has to not equal to to ID so that's our too Services module file which is responsible to do everything inside our toos all the functions are here so we got a function to retrieve all the toos we got a function to adding toos how we can add a new toos we got a function which will update the toos and we got a function that deletes the too so that's done the next thing we're going to do is now we can jump onto the component part we can create our comp component and we see if our too is working then we will just style our app from there so let's go ahead and do that all right now let's go ahead and create our first component inside of our component folder we can create a new file and name it to do list. TSX and I'm going to use my short shortcut so r a fc e react Arrow function component export to create the default and here I'm going to import import let's just import as we need them so I'm not going to import them right now so first thing first we're going to do is we going to use react use state so let's just go ahead and import use State and inside the function we're going to create our state variable so let's get const todos set Todo so this use state will manage the list of to-dos so set toos use State and to this we are going to pass the to-do types so too I have an automatic import so when I click on this you will see that it got imported if it doesn't then you have to manually import your too types from this file which is export default too types so you can import it in your too list here so I've got the too types and obviously it's an array and inside this we going to pass it the Todo service so this is getting imported we are importing this file too service from this we are going to pass it to get too function so too service do get to and close the brackets so this is our our first use State the second one we're going to need is to keep a track of the toos that are being edited CL edited actually editing to ID set edit edited too ID so this is the naming convention you have to follow when you are declaring usate variable when you're doing a set edited to so updating function and we can do use State this will be type number or no we go use state number no by default it will be null so we got that second one and now we going to need another use State uh to manage the edited text for the tus so cost so first one was edited to-do ID now edit edited too text set edited too text use State this will be string and by by default and empty string so here I've got my U States and now let's go ahead and start creating the functions so now let's create a function to initialize the editing state for a specific too so we can goad const let just commented out function for handling edit actions const handle edit start this will take a parameter of number and text string inside this function we're going to set the editing to do text actually set the to ID to ID that parameter and set edited to text to text so that's it this this is all for this function now we're going to create another function con handle edit change or maybe handle edit cancel actually cuz we are we going to need a function when we are editing our to-do in case we change our mind we don't want to edit we want to cancel the editing state so we can use this function so cancel this doesn't take any parameter and let just set the edit to do ID to null and it set the editing to do text to an empty string since we won't make any changes now we can create the function to actually handle the edit save so what we can do is const handle edit save this function takes ID as parameter and a type of number obviously and then inside this we can conditionally check uh if the condition that if the condition we are checking if this will be true that means the edited to to text is not empty or consist only of white space that's what we're going to check with the trim so what we can do is if edited to do text. trim and we're going to check if there's an empty string so what's Happ happening there uh this line checks if the trimmed version of the edited to text is not an empty string and this trim method here the trim method here removes white space from both ends of string and if the condition is true it means the edited to-do text is not empty or consist only of white space corrector and then what we can do inside this if block here uh we can call the update so I'm going to store it in a variable called update too and I'm going to call the update too function from too service update toos so we are basically calling this function to update our to-do from this file and inside this we can do is get an ID text as edited to do text sorry text as edited to do text completed as default fals so we done that now what we going to do is we're going to set the toos and we're going to map it through the uh all the to so this line will be update the state variable too so we want to update this variable todos uh using the set todos function and it will map the previous toos array replacing the toos with the matching ID and with the updated too so this effectively update the UI to reflect UI changes so inside this I mean after this we can set two R get the pre pre toos in error function which will be prve toos do map too too. ID is equal to ID then we want to update the too else we just want to keep it as the too there so that's done after this we can set the editing to ID as null and set the edited to to text as default string so that's our function to actually hand it edit save and the next function just going to line that up the next function we going to need is the function to actually delete our to-do which will be simple function so we can just use function function to delete too and I'm going to name it count handle delete too and this takes an ID as a parameter type of number then we can get the too Services call the delete too function pass it ID and then we can set toos sorry set toos prove too and PR too PR to dot filter pass 8 to too too. ID is not equal to ID so that's our function to delete the toos now that we have got all of our functions we can actually start implementing the UI so we can do in the return statement I'm actually going to name this a class I I'll give this D A Class name of too container make sure you spell your class name as it is because it's going to be crucial when I will provide you with the CSS file so they have to matches with the classes inside the CSS file so make sure the spelling is as I have gotten it here so too container and inside this I'm going to open up another div this over here I will actually render the to do input form component goes here which we haven't created so when we create that we will put that here after this da we can render our toos we can map them map too and when we map them I'm going to open up another da here with the class let's just do this class name of items there's something wrong dot items actually so we got a class name of item and I'm going to provide it a key so when you are listing uh when you are entering list elements in react in GSX you always could to provide a key otherwise you will get console warnings that each element in the child should have a unique key prop so we are providing a unique key prop which will be too do ID the ID of the too itself is a unique key prop and once we have done that we want to check whether the crun too too. ID is in the edit mode so once we check that if it's in the edit mode then we want to render an input field where user can actually edit the existing too and save it with the can save it with the save button and cancel the current edit mode with the cancel button so we can do is we can conditionally check if we are in the editing to do ID we the editing mode is equal to too. ID then so we have got this to do as this and this to do is this as this and then we what we want to do is we want to check edited text we got another div inside this and we're going to open up an input field which will be type text value the value we want to provided it would be the edited to do text and it will have an own change event this will be wait just give me a second I change event I will take event and we will then set set edited to do text so we are setting this edited to do text as that so set edited to do text will be e Target target. value and then we'll give it an auto auto focus so whenever the app is refreshed it just goes into the input by default so true so that's done on [Music] change so we have Go tab text value edited text on change event okay set editor text event value aut focus is on and within same button now that we have done the input now we going to add a button here so the button to actually save the changed add so what we can do is B button on click and handle we can pass it the function edit save and this function we are passing it is handle edit save and it takes an parameter of ID so we can pass it to do dot ID as the parameter and now now inside this button we actually going to import a react icon which will be for check now and so what we need to do now this is not existing anywhere we we have an imported this so we going to import since we already installed react icons so what we can do is import for for edit and there's another uh react icon we're going to need from the file Library fa Library which will be fa check from react icons slash fa so we are getting these from the F Library so we actually got the far check not far edit sorry so we got Thea check here this will be the check uh button that we we can just click on and save our edited mode the next button we going to need is I'll probably just copy this down and since this is a handle edit cancel button so we can remove the parameters from this and change it to handle edit cancel and instead of far check we can pass it for edit not far edit actually yeah far edit for edit so these are two buttons now if edit mode or else renders the too takes actual uh too item along with the button to addit the existing too so now we going to do is where we were checking this condition so we have checked if this is this then we going to use after this div we going to use else here so another class edit edit BTN and we should provide a class name to this cancel BTN inside this we can use a span so this is where we actually display our toos so what is going to happen here is inside this too dot text and we're going to need a button button will be added here so actually this is this is the button we going to need so remove that button from here and pass it inside this button here the button we're going to need is GI cancel so we have to import that so what we can do copy this down and we can give it that g cancel from GI Library GI cancel so this can take GI cancel button and to this button we need an on click event which will be the handle edit start and text parameter as too. ID and too do text let's just close this terminal so we have got that on edit mode as I've noticed I've got an fragment issue here looks like I have an extra column or extra bracket somewhere so now we have done the buttons I think there it is this is an extra bracket here now we have got an extra Dave so now it's looking all right now that we have got the L statement ready and we got this div that covers the items and the D for container right outside this we need to create our delete button so let's just do that button and to this we going to pass our I delete bin I so self closing copy this as we need to import it so we can copy this down I can pass this to this and instead of GI we can do Ri so we have got that button now but now this button doesn't do anything at the moment because we haven't provideed it an on click event so upon clicking this button we'll just simply call the delete function handle delete function with the too. ID so that's all done now let's go ahead and call this too list in our app. TSX so here if you come to app let's just provide our CSS for the app as well we just going to need a class name here so div class name app and we going to have another div here with header inside header we going to have logo logo side class and inside this we going to import another icon so import pen and for clip clipboard list from react icon slf and then we can render this far pen here and beneath the F pin we can have our title what to do what to do below this we can call the other icon for clipboard and now with that done after this St we can call our too list component here and then we can just check it on Google so we have got the icons so which is working now since there's no CSS that's why it's looking like this at the moment so this is done now the next thing we're going to do is we have to create another component called to-do form which we will render here which then will be responsible to render our Todo let's go ahead and create that so we now need to create another component in our component folder we can create a new component and name this Todo for. TSX this component basically will uh add an put form where you can actually add your to-dos cuz right now our app looks like this there's nothing no way we can add a new to-do create a new to-dos so we going to do that with the help of this component and in this component I want you to import from react would be dispatch and set State action and a use State we also going to import import to-do services from to-do service folder we also going to import the types to-do types from too and now inside this component what we can do is we can create a use state to take the user input so we're going to go const actually yes we do we need we still need to do that so we can do con new too to-do text set new too text and this will be use State and type of string with the default value of the string so once we have that we can create a function to handle the input so handle X add too and we're going to check if new too text. trim is not empty we can get const new too pass the to-do service to add to Ser okay this is too service dot add new toos to new too text and then we can set the so this is something that we're going to call from the other component this one so I'm going to open this on the side here and this one on this side so this I will actually open this on this side split this one with this so we going to get set toos here but since they we haven't declared the set toos here anywhere so we have to split that so what we can do is we can where we are passing this this to the parent component we have to pass it as a prop so before I do this what we can do is that's where we're going to call this component too form and here I will pass it as set TOS set to so I'm passing this CU States set to from this this component to this child component as a prop so now this is screaming because I haven't declared this here as a prop so what we can do is I will create an interface for this prop type and set toos and then we will give this a type of dispatch that we imported above dis patch set State action to do types and an array so we forgot this here so that's done and now this will become react. functional component which takes props types props types and take set toos as a prop so now we have done that we have got this here so now we can actually do the set toos here set to to prve to too and let's D structure this prove too to new to and then we set the new too text to empty string so we have got const okay now we can close this and we can open open this on this side on a big screen so I'll put an error here there's a const need to do okay obviously because I have the use State inside the return statement which is not how it works I have everything inside the return statement wow so this function actually goes away from here and now we have got the handle too this function is the only thing that's left we have pass it as a prop nothing is screaming out here because we have passed Todo form as a prop now we need some UI for our input form so what we're going to do is I'm going to name this div class name input form open an input here of type text and value would be new Todo text binds the input value of the new to-do State and then we can let me just close this and then I will just work inside this we can on change event here which will set new too text to event. target. value and of course we want a to focus on this one as well so when we refresh the page or come on number Todo app first it just goes default by default you have option to type a to-do in here so we can make it true and let's add a placeholder add a task so now we need a button outside the div I'm going to create a button give it name add too and let's give it a non click event of handle to do add so that's all for this function and now that's all there done let's see if it's working because we going to check test one and we can edit it test one edited yes we can edit it we can cancel the edit yes and we can delete the test so our too app is working perfectly fine without any issues now the last thing we going to do is we going to add some CSS in it so I'm not going to create the CSS from scratch because that will make this video like 2 and 1/ half hours so what I'm going to do is I have attached a link in the description so please click on the link in the description that will bring you to this folder here which is what to do project CSS files so I have one two three CSS files here so just follow my instruction as I'm doing it so first of all let's first create these files inside your CSS folder so first thing come to the CSS folder folder right click on it create these three files app. CSS new file to do list. CSS and last one sorry not folder too form. CSS so once you have created these three files what I want you to do is come to your app. CSX import from CSS appos CSS once you have done that go to app.css file come to the Chrome click on this app.css file double click it open it and just click anywhere crl a or select everything inside this contrl C command C or contrl C depending on what you're using contrl V here and now we want to check if that has applied yes so you can see that CSS has applied to our app. CSS uh our app.css component so now we it's still working pretty much yeah now we have this but now we want to start our uh to-do list component and of form so the second thing I want to do to go to too form. CSS this is empty come back to Google go back to this folder here now too form. CS double click on this this will open this again control a contrl c or select everything in this file come back to too form. CS CSS paste it here now let's check again nothing because yes obviously I made a mistake we have to go to too form. TSX and here we have to import our CSS file again so back slash too form. CSS so now we can see we have got the form here Hi how are you so this is actually working now the last thing we need to do is I'll style our too list of CSS so this is empty again please come back to this file click double click on to the list. CSS contrl C and come back to this crl + V and go to your too list. TSX file all the way on top import one to two back going to the CSS folder and pting to the list of CSS so once you have done that you come here check there it is check two check three five I want to see if it becomes and scrolling element after six toos okay so I've got an issue here with the scrolling so we need to fix that I need to see what's going on here so maybe I've got a class name wrong somewhere so to container too list is toos items and toos to list okay I'm missing a file into the list I actually a class in to list so before D class items this these toles need a div here so you can create toos and can cut this this will go where this is ending so this is ending here and right above it so now we check one two three four whatever please become please become yeah there it is becoming a scrollable container now so we have fixed that similar mistake and this is it so we have got it here now we can check our local storage go to application and yep there that's our toos we can delete them you can see they are disappearing from there even if you refresh this app it still stays there oh I forgot to check the edit one so now so we have a issue with the edit as well so that means there's something wrong in our to-do form not to-do form actually our edit text so we can see to the list cancel button cancel how the buttons nothing no style been applied to this okay so I've got a class name wrong here so instead of edited text please keep it as edit text and there it is fixed the issue so we can see that it's working perfectly fine we can cancel it we can delete it we can edit it we can make it change we can add new toos and we can delete all the toos so that's now you have got the crud app in react plus typescript if you like this video please make sure to hit that like button share with your colleagues and please do not forget to subscribe the channel and I really appreciate you guys making it up to this point and thank you so much until next video

Channel: TSXpert

Views: 2,632

Keywords: WebDevelopment, Programming, CodingTutorial, FrontendDevelopment, BackaendDevelopment, FullstackDevelopment, WebDesign, HTML, CSS, JavaScript, ReactJs, Angular, NodeJs, ResponsiveDesign, WebDeveloper, CodeNewbie, LearnToCode, SoftwareEngineering, Code, Typescript, CRUD, CRUDApp, Todo, TodoApp, TodoWeb, ProgrammingTutorials, ReactTutorials, TypeScriptTutorials, LearnReact

Id: gNEQ8PSkaI4

Length: 61min 0sec (3660 seconds)

Published: Mon Dec 25 2023