Build a Todo app with Django and React #2 - Django and React for Beginners.

hi guys welcome to episode 2 of our to-do app with jungle and reacts instance in the previous episode I showed you how to build the restful API for this to-do application using Django and Django rest framework you get so in this episode I'm going to show you how to use react.js to consume the apis we built in the previous video in episode one of this series instead so before we proceed I need to show you how to enable course on your jungle project understand all the score stands for call stands for cross origin request sharing instance so without course on your jungle project reactants consume your API so you need to enable calls on your Django projects I'm going to show you how that is being done before we start consuming our apis which react here as soon so let's get right away so I have two articles here two articles for enabling calls on Django and oxidase enable on enabling course so I'm going to link on a bank for you in this video's description so you can check it out I understand how enabling of course and jungle walks instead so causes cors and it stands for cross origin request sharing and from all have yes of course it's a mechanism to allow interaction with resources hosted on different domains so you can see what the consider what it means she can read more on this I'll give you guys a link to this articles here's one of the Articles this is another article here this one's from Pipi from python IP instant so you can check any of them I'll link them for you to read more about it so let's get started right away so let's use this article here so for him to come over here and install this package called Django course Adder so just copy this so just copy this now let's install it jungle projects okay don't just see let's be the server and then we install this don't waste my time you can just see okay so idea of people install Django Dash course instead so that's the commander enter so you're gonna have it installed right away so once that is going on we can just go on come back here after I've done that now make sure you have discussed it as inside of your installed apps just copy this Spotify let's go back to 7.5 okay you're here already just pop up you see has been overworked okay just over here paste it okay we have of course that's already installed I make sure it's your installed app is necessary once you've done that the game what's the next thing you need to do you could just create under the Middle where we have the scores middleware.com middleware just copy it and it must be above the common middleware as you can see over here you section increasing because it does middleware and it must be above the common middleware if you have over here just on top that so paste it there is still ready okay so what's the last thing again all right so we have the allowed Origins what this means this now we are going to Simply restrict the number of domains I can access our apis instead we need to restrict them again so right you can see you have some domains here these are the only domains I can assess the giving endpoints that has been created but for us now we are going to have a different list of domains to access our apis you get so we just copy this now and we are going to Simply update it to shoot what we want understand so let's just go to the bottom of the page let's put it let's put it there just enter and then we paste so now right now if you check closely our reacts domain you can see how it looks like localhost 5473 instead system this we are going to place in the allowed Origins let's go there and just change this now remember the protocol is HTTP https because currently we're on the development environment so we're going to say HTTP and then it's called let's be sure again what it's called it's called localhost then 573 so let's go back to where we came from um something localhost.573 okay localhost and then colon 5173 and then four slash I'll make sure you come over here again and put in the HTTP you just copy this again I'm a piece here I'm going to change this to one two seven to the numeric value of localhost 127.0.0.1 so I think this is it now these are allowed Origins so once we set this now these are the only objects that can access our apis these are the only options that can access the API again so that is it so let's see let's be sure nothing there's nothing else is left I think we've covered the most important the other thing that they are just a default you get so one way you can read more about it if you want to okay so right now this one is going to happen here now so previously I already beat it I already built this to do application using only vhjs but this time around you want to use react and jungle whereby we are going to be consuming a back end instead language Django is one responsible for the back end and react simply just consumes the API understand previously I made everything in reacts instead by article declare my to-do's in a static way which is up here this is because you can see my to-do's here they are all static but right now everything is dynamic I want you to go down to my channel just here because if they just say I can see I have these two we have tutorials the person on the part two on this two episode this part these two videos I I took my time and I sure and I taught how to build a to-do app with only reacts and stuff so make sure you understand these two videos well because in this particular episode I won't be building this thing from scratch I will just show you how we can consume the apis using react so first to build up this structure from scratch again just go and watch these two videos I showed you here don't worry I'm going to drop the link in this video's description you can see it's called the attitude it's got media to do app with react shares part one and the other one is called begin to do app introductions part 2 so just for YouTube videos so you can so you can be able to come up with this with this structure it's not difficult it's full explanatory so go watch it and once you're done watching understanding can come out to this episode and then we can now start consuming the Django API we built in the previous episode so let's get started right now okay so right now I'm going to start consuming ABS GP you want to start consuming the apis you did in the previous episode so right I'm going to Simply clear out all these objects we have in these to those I'll call everything so I'm gonna have an empty array now okay now we have an mcre so what do we do now I want to fetch data from the apis we'll be using the same so right now this is the Dome let me show you the URL we are going to fetch from so let me just comment it out and show you how it works okay go out to you guys with pie five just here so let me just put in the path you always want to consume from urls the first one is I'm going to say one two seven let us say eight one two seven yeah one two seven dot zero dots 0.1 then I think eight thousand slash to Do's you're gonna give us all introduced we have in database instead so this game this gives us everything we have in the database and we can also create new to-do's using this endpoint if you just just add http then for slash sure this is much more like a URL now so this for the first one to to get all to those and also to create new to-do's we use this endpoint and switch really specific to do let's just say let's say HTTP then you see iPhone 7.0.0.1 then eight thousand then slash to do's slash the ID so with this second URL we can retrieve a single to do we can update it we can also delete it to do we understand this is the URLs we have here you can see them now so you know we are going to do right here so now let's proceed so now we react now we are going to use actions to consume this APS look we're not going to use the fetch API we are going to use something more advanced which is actions again so so our react up now let's install that it's just going to see I'm going to import I'm going to install our shoes right now okay okay so first to install our shoes now on this command npm install our Shields npm install then we say ashes right up shoes so you're going to install ashes you can consume those APS AP to Jungle rest framework let's get started right now so right now already have our shoes installed so now let's continue now so right now I'm going to use this effects hook so fetch data Mr one if the effect these are it works here it's always it's always returns it always is a case and a function whenever our page is rendered instead all the effects does and it starts currently our page has already rendered and the effect right now is going to Simply execute whatever function we pass in two weeks hope you understood so now let's continue like because right now our to do the to-do list now is empty that's because we've removed all the dummy datas we are using in this to those in this in this state's hook this to those who understand these Studios we have here so right now we want to Now update this to those Now by profession from our API so you're going to come here and say use effects so let's just continue so just on top you'll say use effects so you need to import this it should suggested so use effects let's do it again you should just import for us okay since it's not important oh import from Once up there it's important from react make sure you import these videos so this effect that we have it over there so it always returns an arrow function so now I'm going to just put in an error function there and then put on this Arrow function you get now so curly braces is Nest why is it wasting my time okay I'm now going to say ashes remember we have to install our shoes our shoes dots before we put into also import ashes I forgot so now let's just import our shoes too so why are you taking time my pieces of a walk so it's kind of slow let's proceed so you're gonna say import ashes from ashes instead so I think that issues that gets remember our URL I told you about is this we have it here so you're going to get all to those just copy control C and then so here we have to every so to do so I react app so actually does gets then what was it don't waste slashes let's get now pushing the URL the end points that I paste here so this is the end point now since you don't understand it's probably gonna say that then not then nice one is like no I have the response as the argument you understand the responsibility of this response let's do this response looks like your second so console console.log let's say response res understand so let's see it will aspect console wrongly console so let's see featuring an arrow I said that then oh sorry it should points uh should be an arrow function okay this is the then block this is the then block it ends here so let's see what it looks like so to do now so just the console let's see what it looks like So currently I'm seeing some errors here let me just make this big enough for you to see so you scroll down it says I saw just you can see since our response is not defined I guess because we check to see my jungle project is not running that was a mistake on my end make sure jungle project is running in the stems let's just make it let's run the junk food again so let's see python okay let's run server make sure it's running and let's see let's just come back again okay so after I run server because we have an error it says that in course a lot of Origins should not have parts so what's what's this now under your course a lot original Wi-Fi make sure you move this four slash at the end remove them is trying to run again I want to turn on I hope so the area is gonna disappear so there's wasteful reads okay so right now the error is gone so you can if you check closely now this is our Django domain and that's what I added if you check this this is our Django domain over here this HTTP now what we are using over here and then this URL path hope you get so right now my jungle server is running make sure it is running so once it's running now to the browser refresh this page again and let's hope so there is no error this time so refresh the page and let's see what it consoles out perfect so right now you can see now it's giving us what we want you can see we have our response returned to us instances we check loosely from our to-do application we simply we are trying to fetch data from this endpoint and then we have to then have a print and then after you try fetching you're going to fall to a promise and This Promise is going to give us the actual data but right now right now we just console the response and this is the response to slide you can see you can see what the response looks like what now what once now I want the actual data have you open this data click on it and you can see what you do is read a reacts book Lens to code Twitter read books use the actual Studio One hope you get so come over here now and just say hey just say console.log response or data let's see refer to this page okay you can see right now I have our data now only the data that's what we are having right now perfect so let's continue so just here okay so I'm going to make this a single line I don't want it to be on double lines so let's just make it a single line so maybe it's on a single line there's only for the curly braces there's no need at all so let's move it now see right now we've got what we want right there we've got to what we want right so right now our response or data is actually holding the list of sudo we want to understand this res dot data instead I always need to do we want instance so let's see again it's conceit over here this is what we want right so we want to do that I want to update about to do remember actually this is an mcra you want to update it with this respond or data we are having so how do you go about that it's just simple just me just coming as a set to those set to those then we're just passing rest dot beta so please and please make sure you watch your previous make sure you watch the real tutorial I talked about where I built this Reactor with only react.js Instead This is the link over this is the I'm going to link down those videos in this video's description so make sure you watch it where is it again so let me okay you can see them here these two make sure you watch them understand that my muscles they are well understood you can then follow along with what I'm doing instead so that's it okay so currently I want to show any shoes guys 75 proceed just in the just stop him so also at the dependency I relate to this use effects if you don't do that this function is going to just keep calling this end point you're going to keep on fetching continuously non-stop so to prevent that thing to add a dependency array just just here just do this and it's going to prevent The Continuous fetching of data okay so this is it now so this so right now we have our success this is the success blog if everything goes well the door then is being called and Istanbul it might be an error there might be a network issue or they might be some might be using the wrong end points understand so we need to also catch those errors that might come up so right now right now I'm going to declare another state I'm going to call this state errors I'm going to say const then I'll say errors and then we'll see set errors set arrows and they're gonna be an empty string I'm gonna say use States then I'm gonna assign that to an empty string so right now everyone is such an empty string in the sand so how do you guys continue so just under here after the door then we're gonna add those catch Instead This is a promise and everything goes well the problem is going to be resolved if there's an issue the problem is going to be rejected instead we are going to add onto one of the reject part of why you're not going to say the catch and then I'm going to just come here and see arrow and then what I'm going to do nice I want to Simply change the values of Errors from an empty string to the actual error message hope you get I'm going to see error.com over here and say set errors set errors I'm gonna be equal to error Dot message instead so that's it right away so now let's see what the problem is now okay so our browser let's see what we have there you can see we can say that you can which closely now I want to do has been has been restored and instance has been restored that's because after we operated this mcre we have to pass this to those as a prop to this to-do list components where is it again I think I need to find it to this component write it to do lists we have to pass as a crop you can see it here and in this components you have to go there where's the components now this is the component over here and this components is open was wrong okay in this component now we have to then map show those to those and then we have to get in each of the to-do items in Instagram that's why I said make sure you watch the tutorial where I thought I'll see videos here how to build this to-do app with only react if you understood that tutorial you are going to definitely understand what I'm doing here Mr make sure you watch it it's not long just watch understand it once we've done that already as I was saying now so you might have a natural glitch or so I'll be assessing the wrong domain a wrong endpoint so how do we undo that error so now right now I'm going to places our errors just enough up to gxs just here so I'm going to be I'm going to put the paragraph tag there paragraph rather pizza and I'm just gonna put in there just say arrows instead so arrows and then I'm gonna do this are you shaking Okay so so now you'll see over why you just see arrows arrows and I'll do and okay now so if you have an error it's going to display on the screen so I do an error or call I thought this might be it might be a network error or a wrong endpoint so I'm going to just call it wrong endpoints I'm putting I'll put in an extra s there so right now this endpoint is wrong it's invalid so let's see the browser I can see right now it says requests filled with status code 404 so right now if I refresh this page now you see we have no to those here again that's because you have fetching data from the wrong endpoint and this is this this tutors we have here and not on this end point okay guys let's just refresh the page now the you can see now how to do this now is empty there is no data again so go back to the browser now okay just here and I can see we have the error message on top of the screen now it tells you what is wrong and you're using the wrong end point four four means not found so that has it that's that's just it that's why the error that's why the we're having this area because you're using the airport that is not found if you check Loosely the endpoint you have now to do is just these ones and we can't find this one that we are using here that's why we have this 404 Arrow there okay so once that is so welcome back here and move this Edge there and everything is going to work fine so right now this is our catch block helps to catch the error message we are likely to face so currently we are still on development environment so this errors kindly be a wrong endpoint or a network issue you understand so those are the popular errors you're likely to face again so that was it now see next one something I want to simply delete it to do in a stand so right now I've undo that already so so right now in react there's something we called something we call the optimistic or the optimistic rendering and the pessimistic rendering instead so what the automated what's optimistic one dream means is this now we are going to Simply obey the UI before we send our before we searching before we make change to the server we are going to be the UI before making changes on a server that's the optimistic rendering for the pessimistic rendering we all we have to send to the safe to our server first and then update the UI instance so for the optimistic rendering it's more faster than the pessimistic Ranger you get it's more faster because you are putting the UI instantly and then we then persist the changes by sending to our server instance so that's how it works right now I'm going to fill the optimistic approach by updating our UI first and we check closely our UI has only been updated that's why I said make sure you watch the YouTube app to do whatever I touch with only reacts I covered everything there from scratch you understand so right now you have our UI has been updated so I want to do that I want to send the data now to the server I was I was want to do right here so they go about this now you're going to call this our shoes again but right now I'm going to send a delete request so I'm going to say our shoes dot delete the same right now I'm going to get the end point right now it's also get the ID of this I want to also get the ID of this to do so let's just get these endpoints here paste here sorry shipping it should be in the courts so paste there and then we'll say Plus then ID make sure you put your false last year necessary so that's it so now I want to still want to delete this stuff now so what do we do after deleting so I'm going to just simply catch an arrow there might be an error again so right now to this to to delete it to do we don't we are not expecting any we're not expecting to do anything after we delete the links and stuff so you want to catch possible errors at my occur so you're putting the catch block now I know it's in the den this time just put in the catch you're going to say arrow and then just say set arrows to there was this message right so error that's message so that's just it let's see if it works the browser this guy should leave those are still doing here refer to page okay there are messages gone so they want to delete let's delete right now let's start off on the bottom delete it's gone so refresh your page now please the UI has been updated so for you to be sure if this actually works just refresh your browser and see so refresh because it actually works because the to do right now we're doing right now we only have four to those left instead so we check our server our server is only having four to Deals now even delete this one again you can see it's gone you refresh your server you can see everything is working fine starting is working fine okay everything works fine now everything works fine first of all we had to obey the UI and then we have to pay 60 changes by sending the request to the server so that's how we are doing amazing optimistic approach so with this approach our UI responds faster okay so right now let's assume now so when you try using the wrong endpoint to delete it to do the leader to do like this a wrong endpoint to get so I'm going to also be able to so let's see let's see what happens right there so the to the browser put in the wrong endpoint and let's see refresh this page let's see what goes on so click on this button it's you can see right there it deleted it to do because you have been deleted despite the facts you're using the wrong endpoint but if I try to pitch back refresh that's to do calls back you can see it's back so out without we prevent this back and forth so it's like this now so first of all up here I'm going to look at the new variable now I'm going to call this variable original to do so I'm going to say original to-do's should be it's not supposed to be equal to the current to do so I'm going to Simply spread out the current to those using these three dots and then seduce this has been spread out so once there is an error once he has an error what we're going to do now is this we're going to Simply reverse back so the current to do is instance I'm going to come over here and just say set to those set to this to original to those understand so that is how it says so let's see how everything looks this time to the browser refresh remember we are using the wrong endpoint this time we can see refresh this page and let's try again everything works well so delete this delete now delete I can see it's tried going but it came back instantly you understand try again you could try it you can see in the sense so that's what this original to those episodes do see there's an error message between fast facts the original to do is you get so that is it so the next step nice for us now add create new to-do's you understand so let's do that by the way so I have the function over here so let's go on I'm going to just come over here and see our shoes at post ashes dot posts same URL already been using so make sure change that to the correct URL now so just post now just copy this Ctrl C and we paste here okay azure.com continue so you're going to personally actual data we want to post so that data is what we have here this is data we want to post right this is it over there okay so how do you prove it let's see then that's then after we've done this now we're having our response uh this right here I'm gonna simply update our schedules now with the new response data you know say set to those to response dot data it's not complicated at all so this one's the data so all everything works well let's add a new to do to the browser refresh this page okay so right now I'm gonna say let's learn let's learn JavaScript learn JavaScript that's it to do now I hope it works okay click on ADD it was added link JavaScript but we have an error it is not getting to the server it's just updating the UI you can see you're having an error but you don't know what the error is it's in the end point is not found okay I think it's my font here I need to remove this first slash I added there remove this sorry that was my mistake it's not necessary there if you check our Django endpoints you don't have a four slash understand so that was my mistake so let's try again let's learn JavaScript and then click on ADD [Music] ouch okay before trying again make sure you refresh your page refresh refresh now so let's link JavaScript this time learn JavaScript so click on ADD it doesn't why the arrow sorry you can explain why that's which has been added in JavaScript let's try this something else play PS5 add as we'll choose an arrow wow okay sorry my mistake if you try everything I need to do now click on ADD you can see it's ads but since you choose this error I made a mistake here just on this line here up here instance after you might have sent a request to our server I'm going to also update our to-do's how do we go about business I updated it wrongly so this is how we do it here currently we have to spread out the current to those we spread it out using this straight operator after we've done that already we didn't have to now add the come in the incoming data you need to add that up so so right now is is an array it has according to those inside of it and right now I want to also add the new to do that we're about to add inside so I'm going to just come over here and say raise your data remember that was that's what it's holding it to do we want to put inside now this response of data in the stand so that's it over there so let's close it all this time so this PS5 listed now refresh this guys there is no error message again so that's how it works yes so right now with under the good parts what about if there is an error so how do we go about that so remember what we did it before we have to create an original to those so up here just say const original that's what all the currencies we have I'm going to say that's an array and then spread out according to those we have there to Do's after we've done that now we might have an arrow so you'll see that catch and then the CashNet is going to be so I'm going to have the error message and they're going to update our error message first let's just set arrows they might be on it so remember some I use a wrong endpoint set arrows to Arrow Dot message after we've done this now we need to now we've got back about to do to the original to do remember if there's an error we have to reverse to the original to those so just say set to those two original to this okay let's try a wrong end point this time wrong end points so the browser refresh let's add something new I just say what Lane Python and click on ADD you can see it's right adding leads but because of our catch block we have to invert back to the to the original to those we have in this thing you have an error message on top here it's an amazingly wrong endpoint so it's hands work so that is how it says so the next step now is for us to work on updates in the given to do okay guys right now we want to update a giving to do so how do we go about it so it's like this now so right I want to get the comments to do right this is the obvious to do function so right now to get the comments to do so I'm going to pass this here to do so this to do is here now I need to go give this a value so this and this is a parameter so I'll go down to where I call this function and that's on this to-do lists Dot gxs it's called a bit to do so I'm going to look for where I called the function a bit to do where are you okay this is the function over here this is why I called it okay so right there what I need to do is this now I'm going to create a state up here I'm going to call this state I'll say let's do let's do um okay let's see let's to do task or because I'm having a name Clash here so I'm trying to prevent this naming Clash I'm having a so I'm thinking of the right score about this so we have this to do here I'm going to say it's on some objects this is an object right there so just in this to do item function this is the right amount of business to do so the current to do we are that we just clicked on so I just come over here and say it also sets to do I'm just passing the value here just say to do I'll just decided to do to do so when I call this function called to do item we do I call it again to do item okay I called it here try it I'm going to Simply pass this to do as the argument to the parameter instead so to do I think that's to solve the problem so okay so right now I'm going to Simply fetch this as I want to do so what do I need to do now just remove this guy so let's call the ashes again ashes dot patch and then remember the URL it's called this to those seven copy everything also need the ID Ctrl C so just here please always pass in the ID so right this is our new to do our updated so this is gonna be I'm going to call it updated to do open Beats it should do should be equal to this so it's gonna be it's going to be what what's it called again it's going to be an object and I'm going to Simply spread out the object and then I'm going to set the complete attributes sorry you know the complete article but they task field to this text we have here that's the current value first understand so that's it so once we've done this already I can then pass this updated to do I can pass it over here pass it as updated to do yeah so this should solve our problems now okay let's see everything works out so let's see okay fresh so let's try and update the giving to do last thing is to read a read a Jungle Book click on ADD you can see it reflected refer to pay to be shared updated see next thing to do you want to work on setting a to-do to complete it instead so article about if I reference page now you see it goes back to you can see they're all gone so now how to right now to work on updates if you click on any of these check boxes that means that to do as being completed okay so let's proceed let's proceed okay we have it as a complete function we have it here complete function okay it's a complete to do function so how do you go about is very very similar to the update function super similar okay that's it so let's proceed just right here we have this feed cost statues or currently there isn't a field called completed from Django it's called complete test let's change this to the completed and not it's no longer essay completed completed should be equal to let's send it to true okay so right now once work on completing it to do so how do you go about it so I'm gonna call that same we're going to call something as similar as this very very similar just copy this Ctrl C because I'm trying to look so update instead I think update it to do so where's the complete function okay just here just underneath here or paste this here so remember we are doing the ashes at patch you guys in part because in the jungle we use patch as a method instead soon as in the previous episode astross.parts dot patch so we got the ideally to do which is up here and then the ability to do you also we have talks together from here to do we're going to pass it up there to do and then to give this opportunity this is a parameter you just go give it to the actual value so go down to your to-do lists Dot gxs and you have the complete to do what do we call that function code you can use over here to do as the arguments remember with the click to do up here this is to do up here again so I'm gonna be clear to do as the arguments for complete to do hope everything works okay so that is it suppose we've done that yeah to do I'm not making a mistake complete to do okay so the upload gxs so you have what to do that so our application to do now so right now we're going to set completed to true we're not using tax this time completed true about computer is a Boolean Feud from Django it's going to say to true I'm gonna set that to completed true so once you've done this do the same thing for so this is if the if this field is checked in this field is checked right so what anything is unchecked what do we do we're going to do the same thing just paste this here and then we set completed to false understand so that's it so let's see that's why I keep on saying make sure you watch the tutorial where I thought how you can video to do up it only videos if you watch that I stay from scratch to building business number right now we are just on this comment video we are just simply sending requests to our server how we are doing here understand so make sure to watch that to understand the whole workflow again so right now let's see everything works come back here refresh this page so let's simply check one of these boxes click on check okay let's see if it works refresh this page perfect you can see this to-do has been completed you couldn't see your Django admin and refresh this place now refresh okay please don't waste your time click on read The Jungle Book you'll see it has been completed that's good okay so that you should come over here again if I come back here and uncheck you uncheck uncheck it has been on you can see come back here and refresh this page you're gonna have this box unchecked so refresh it's gone you can set me is working it's working right so what's the next item on the list what's the next item so the next item on the list is supposed to feel 32 is forced to filter the to-do so I'm going to leave that for you to do so I've already done I've already been able to update the UI whereby we are not saying we are not sending anything to the server so we have to do next for it to work on this I'm able to send request the server to filter this to do inside simple you can do it just try it yourself so that's it so you share closely we've not been adding our error messages from this update to do we've not been adding it remember I was putting these set errors to update in case some attention this is a fake or a wrong endpoint so you've not been doing that you can just add that yourself okay so we ensure that add it in this updates to do just on diet dot catch you add it up there I'll do the same thing again for be complete to do you have seen to add it under here and over here so I think that is it for this tutorial so remember to like connect our to-do app to an actual back end instead so that's it I really hope you enjoyed it so before you watch this comment episode make sure you watch an episode where I thought how you can build this react application with only react if you watch that understand that you're going to definitely understand this episode where I show you how you can connect here to the back here and understand so that's it first episode so see you next video so stay blessed and bye bye I also give you the source code I'll give you the link to the GitHub source code so check us for it in these videos description so thank you

Channel: Code With Clinton

Views: 4,220

Keywords: build a Todo app with django and react, todoapp djangot and react, react django integration, integrate django and React, django react Integration

Id: maIB7dDB08Q

Length: 42min 21sec (2541 seconds)

Published: Thu May 25 2023