React + Django To-Do App | Django REST Framework

what's going on everybody so in this video we're gonna be building a to-do app using react and Jango and combining those two before I start each video I like to just go ahead and show you what we have and show that base project so let's go ahead and just get into that and if you look at my screen here we have this to-do app where we're able to complete items by clicking them we get this strike through and we're also able to add new items and edit items simply by clicking on them and doing something like this so whenever we hit update submit that that's our new item it's added and that's all this app does so I actually created this app with a REST API that we built out using the Django rest framework and we did a video with vanilla JavaScript building the same exact thing so what we're gonna do is just build off of that and use react this time and if you're not familiar with the Django rest framework I highly recommend you watch that last video but we're working off of that source code so you could just go ahead download that source code and start right where I'm at I'll cover all the URL patterns and how we're making those API calls but make sure you watch that I'll link it up in the video description so let's go ahead and just get right into the code to start building this thing out okay so for those of you that don't want to follow the last video on the jingle risk framework you could just go ahead and grab this source code that I'm gonna have in the description and let's go ahead and just download this and get a few things set up here so I'm just gonna go ahead and download this zip file and we're gonna get a setup on our desktop here and we'll also do a couple of imports and a few installs once we have it so we'll go ahead and just take care of that right now ok so I have my project here and I've opened up to command prompts because I am gonna have one running on port 8000 that's gonna be our jingle app and then whenever we set up our react app that's gonna be on port 3000 so I'll show you what I mean by that so let's go ahead and just do wil CD into that to do app so I'm in my desktop hold it to do underscore DRF and again that file is right here and once I get here I'm gonna go ahead and setup my virtual environment so I do this however you choose but we'll set this up and then I'll go over my source code so we'll just do virtually and V and I'm gonna call that env and I'm gonna give this a minute so I'm probably gonna pause the video as this downloads because this takes a second and then we'll run our pip installs ok so we have our virtual environment and I just opened up my text editor to this file right here so here are my project files there's the environment and I'll go over the source code in a second but once we activate that environment I just want to go ahead and pip install everything in my requirements txt so the main thing that we need from here is going to be this Django rest framework because that's how we set up the original project so we'll just do env scripts and activate and now we can just do pip install and then - our and then everything in the requirements dot txt file so I'll go ahead and let that run again and I need to go ahead and create the space here so again I'll pause the video because this is gonna take a second if you don't have Django installed and all that other stuff this might take a minute so we'll just get back to it okay so we have all the pip installs complete and what I want to do now is just recap some of the source code I'm not going to spend too much time on this but we have our app here which we called API again we set this up in the Django rest framework intro video so we have our serializer we have our model which is just a task because this is a to-do app so we have the task with a title and then the status of completed completed of true or false just a boolean value and we have our views here and I'll also open up the URLs op py files so these are all that URL passed that we can type in in order to retrieve data or manipulate it and if I go in here if we go to that base URL path so anything with our domain and then /ap I will get back this these routes here so it's just going to be a dictionary that'll show us the routes we can access and then our list view detail view and then the ability to create update and delete so let's go ahead and turn on our server and actually check those out and then we'll create our react app so manage top UI run server and this will take a second so we'll go ahead and open that up okay so if we open up the base app the way I have this project set up nothing's gonna work here so we're gonna get this error because we have not set up a template that's what we're gonna have react eventually take care of but if we do forward slash API we can actually see that first view so there's our list and then if we go ahead and just access this one right here so API four slash task list we have our two objects here so if you ran the install from this github link I actually included the SQLite database so if you want to start working with that or eventually set your own up I'm just go ahead and create a few items so you can actually have something to work with but it's right here and we have a user so from here let's go ahead and open up our other command prompt and write within the desktop what I'm gonna do is open up a react app side-by-side and then eventually we'll merge it so we'll actually do the run build and then have react to run and pour 8,000 but while we're creating this we want to be able to just make the updates and then see everything on port 3000 and I'll just show you how to connect that so let's just do npx and then create - react - app and then I'm gonna call my app front-end so this is just gonna handle the front-end of our app here so that's what we'll call it and then again I'll pause the video because this is going to take a minute to install and get everything set up but we'll be right back it's complete ok so that install was complete and I actually had to run it again because I don't know if you noticed but I spelt front end wrong but I reran that and we now have the folder right here so we have the Django project and the react project and I also open that up in a text editor right here so I'll go ahead and just split this screen and will actually start styling this thing so if we go to source we have our app dot J's file and I'll just make sure the syntax is properly highlighted and then we have our app dot CSS file right here so let's go ahead and CD into that project and actually go ahead and actually start it so front end there we go okay so we're in that project and now we can do NPM start and this will open up our react app on port 3000 so if I open up my browser we should see it right here and here we go so here's our react up on port 3000 and our django app on port 8000 so what we're gonna do is actually clean up this this default application right here and i'll go ahead and start styling this thing out and adding some CSS before we actually get into making those API calls so I have actually pre-built sort of a template already so we'll go ahead and just copy and paste code and I will go over it line by line so I'll cover what everything is but I just didn't want to spend too much time on things like HTML and CSS on a react django video so let's go ahead and do that so in here what I'm gonna do is actually clear out this component and change it to a class-based component and we'll go ahead and build everything in here so everything is going to be actually within one component so I'm not gonna go over best react practices this is more of a just how we can integrate the two and actually make those calls so we're just going to handle the form itself and a list right here so this will just be extends and then react dot component and we'll bring out the render method and within render we'll also throw in return so render return and return is where our entire app is going to reside so within return what we need to do is create that that main wrapper so I'll copy and paste that main wrapper here and we're gonna be using bootstrap for that so we're gonna call that container and within container we're gonna have two sub containers so actually just one and then sub containers within that so within container we're gonna create another container called task container and task container is going to be in charge of holding the form and our list so we gave it the ID of task container and it holds these two divs so form wrapper and list wrapper and within list wrapper we're gonna pre populate that dynamically when we make that API call but within form wrapper I'm gonna go ahead and copy and paste some more code and we'll cover those line by line so we'll paste this end and here we have our form and we're using the Flex box here so we have our form which we gave the ID of form and then we have another wrapper that's going to create that flex box for us and then we just create a two divs to create inline styling for our input field and our submit button so we also have an ID of title for that input field and then just that submit button and if I save this and clear out our CSS we should see a new template with no styling at this point so let's see what's wrong here looks we have an error I spelled extends wrong so let's fix that so that's extends and then there we go I thought I saw an issue there so we have extends so there's our form input field there's our submit button and then no data there so now if we go into our public folder right here and inside index HTML so this is our main template we're gonna go ahead and import bootstrap so you could just do a google search for that I already have the link and this will be in the source code so I'm gonna paste that in and one other thing is I wanted my own Google font so you can do a search for any font you want or go ahead and skip this step but that's gonna import a specific font that I want to use for my template here so if we close that out and just go ahead and open up this link we're gonna notice that bootstrap already added a few things based on the classes we have in the button and that input field so if you look at input right here we have form control that's why our form is style that way so now we're gonna do the CSS so in this CSS the first thing we're gonna do is the body and the text so text is just going to be that font that I imported and the body is gonna be a specific background so it's gonna be a gradient background with green and blue so I'll show you what I mean by that so it gives us this background and now what we want to do is Center this right here and give it that white background for the actual list in form and if you notice the reason why we're not doing run build right away in configuring that is because I'm able to save this and see updates right away on port 3,000 so it just saves us some time and makes things faster so the next thing is the task container so we'll throw that in and that is because that main container which starts here and ends right here is set to 600 pixels and it has its own background with a shadow so I'll just keep showing you what we're working on here so there we go and now the next thing is going to be that form wrapper so form wrapper is right here so here's the ID and it ends right here and that just makes our form a little bit better centers it and gives us that padding and then finally I'll just go ahead and import or paste in four more things here so we had that submit button I didn't want it to have that yellow effect so I just did an override on that bootstrap button and then that flex wrapper in order to inline everything so in line that input field and button and then the task wrapper itself and just a little bit of styling for whenever we hover over an actual items so we won't see that until we render so here we go our button is now in line that's because of that again that flex flex box and now we just need to go ahead and set our state and start making some API calls so if we go back to our app here and just under component right here let's go ahead and create our constructor before we create that state so constructor and we'll just go ahead and do that and throw in props right here and within the constructor let's go ahead and now create super and we'll also throw in props too super so props and now we can set our state so close that off and to set the state we'll just go this dot state and we need a few items here so the first thing is the to-do list so we'll camelcase that and we'll just set that to an empty list then what we want to have is an active item so we'll just do active item and we'll also camelcase that and active item is gonna have a few attributes here so we're gonna give it the ID and by default there's gonna be no item there at first and we're also gonna give it the title which is just going to be an empty string and then the status of completed so completed and that's gonna equal to false so this is the item whenever we click Edit we're gonna pre populate this with the current item that we clicked on so we just want to have an area to actually hold that so with that being said all we need to do now is just add editing so editing just basically lets us know are we editing an item or are we submitting a new one and you'll see where this comes in handy later so we'll set editing by default to false and we need to make this a comma and also do this state equals two and then whatever we call the state so for our lifecycle method I'm gonna use component will mount and whenever this gets called we are gonna trigger another function called fetch tasks and fetch tasks is going to be in charge of making an API call and rendering out that data but for now just to make sure everything's working we're gonna do console dot log and we'll just say fetching and now we just want to bind it so under our state we're gonna take this function and just underneath our state we are gonna bind it so we'll do this dot fetch tasks and we'll do this fetch tasks is equal to the dot bind and this is just binding it and if you know react you should be already familiar with this but this basically gives us access to this method within fetch tasks so let's go ahead and call it so within component will mount we'll just do this dog fetch tasks and we'll just go ahead and see if this consoles out so we should see fetching within the console here so if I open up my browser and do inspect we should see it loaded when component is mounted or before it's mounted so there we go so we see fetching and if i refresh that everything's working right it's been binded and it's consoling it out so now what we're gonna do is use the fetch API to actually make those API calls to this URL here so we're gonna grab this and within our fetch tasks function here we're gonna do fetch and for the URL we're gonna pass it in as a string value and we're just gonna call that URL path so we'll do dot then and we just need to convert the response into a JSON response so dot then and we'll set response using the arrow function and this will just be a response dot JSON and we need to do this one more time so once we convert that data will do another dot then and for this we just want to console out the data so we're actually going to get an error here and that's because of course so cross-origin resource sharing I believe is what it stands for and this is basically happening because we need to actually allow this URL path to or the port 8000 to actually connect with our Django app and I'll show you what I mean by this so if we try to console that data and we'll just do dot data so if we try to do this what's happening here is we're trying to call this this URL path but we're doing it from port 3000 so it's trying to make that call and then it's blocking it because it doesn't trust wherever we're trying to actually access this so what we're gonna do is within our Django app is let it know that hey anything coming from port 3000 or whatever URLs we specify go ahead and allow this call and let it actually access the data so for this we are gonna use cores header so this is Django cores header we're just gonna run this pip install and we need to configure a few things in our settings top UI so I'm gonna copy this and turn off our Jane Doe server and I'll just move this to the left so we can see everything and we'll just do pip install they don't let me copy that and that's Django - cores - headers so pip install Django - cores - headers and once that's installed I'm just gonna do a pip freeze because I want to add this to that requirements txt so pip freeze requirements okay so and I'm just doing that just for whenever I upload the source code so we can have it within our Django app and this requirements not txt file so there we go Django cores headers so now what we want to do is within our base directory so within settings up you.why file we want to add in course headers so that's added just as one word so if I do cores header within installed apps here we throw that in so we don't have access to it and we need to add it to middleware - so I got all this from the documentation so I'll link this up but it's all in here so we had it in - installed apps and then we're gonna grab this so we're taking that pasting that into our middleware and I'll just throw that above here and then we also need to whitelist it I believe whitelist a URL which basically means go ahead and allowed this URL so we'll take this right here and we're gonna paste it at the bottom of our settings a py file so in here just under the bottom here just under static URL we're gonna remove all of these and the port we want to allow is going to be port 3000 so we'll change that to port 3000 because that's where we're calling from our react app and if I go ahead and run our server we should now be able to actually make the API call and get that data so give it a second here and if we go back to our react app and refresh it there we go so we're constantly out our data and we successfully made that API call so this is actually an issue that I've seen a lot of people run into whenever they're trying to configure these two or just in general try to actually make their API maybe more open-source but that's how we're able to actually whitelist URLs and change that up so we can if you look at this it's actually a list so we can add as many URLs as we want or just whitelist all the URLs and I think to do that all you need to do is star like that but I don't remember the exact method but yeah it's possible and it takes care of that issue so let's go ahead and actually render that data out and build our table so we'll go back to our fetch tasks here and instead of just constantly out the data I'm actually going to set the state to the response data here so we're gonna do this dot set state and we're gonna set the value of to-do list to whatever we get back from that API call so we're gonna set data to be the value of to-do list and what's gonna happen here is every time state is updated we're gonna re-render our our template here or our components and we want to start looping through those tasks and actually rendering that data out so I'm gonna set a variable called tasks and task is gonna be equal to this state dot to-do list so we're gonna go through tasks and actually start mapping through it and rendering everything out inside list wrapper here so we'll just go ahead and set these curly braces here and we'll do tasks dot and we're gonna use a traditional function for this instead of arrow functions just to make things a little simpler for those people that don't understand arrow functions that well and in here what we want to do is go ahead and set return and we're gonna output the actual list wrapper or the task wrapper item there so in here in the function we want to pass in two things so we want to pass in the object so that's the object that we're actually going to reference in the current iteration of the loop and the index of the current iteration we're in so let's go ahead and create a div here and inside this div we're going to give it a key and a few classes here so for the key we're just going to go ahead and give it a unique value of the index so again this needs to be unique to each item there can be a duplicate and in this case each iteration will be unique and for the class name let's go ahead and give it this task wrapper right here so we'll give it the task wrapper and then we'll go ahead and give it flex wrapper so flex wrapper is just to keep things in line and make sure that we can actually style everything in line the way we need it and in here let's just go ahead and add a span tag and we'll help put some data just to see that it's working and then we'll carry on from here so span and in here we'll just use two single curly braces and we can just do tasks so we're accessing the object right here and we're just gonna do task dot title and we're gonna output that so let's just go ahead and make sure it's working right and there we go so we have two items and the reason why were using that flex box there is because we need to add some buttons here and basically put it in line without having to do floats or anything like that so let's go ahead and just finish it up then and within each wrapper here we're gonna create three divs here so three boxes so we're gonna create one for the title and we'll just close this off and will indent this so we can see it and I'll actually create some space so we can actually see each item correctly and we're gonna go ahead and style this in line and the styling for this is going to be we'll do two double curly braces and what do flex seven so this is going to be the whitest object in the list and then for these we'll just do two more we'll set this one to one and this one right here also to one so I'm actually just going to copy and paste the button here and we'll first do the edit button and the edit button just has some bootstrap styling that we eventually converted into our own styling based on our our CSS here so the first button here is just it just says edit and it's an outline button and it's blue and the next button is just going to have a dash through it and this is going to be to delete items and it's black here so again that's the text in it it's just that - and to edit so let's go ahead and check that now there we go so it's all in line and the styling is complete so what we want to do now before we actually create that strikethrough we'll go ahead and allow this form to submit and actually create some data then we'll handle update delete and then that strikeout method there's a few different ways we can go about creating an item and the method I'm going to use is going to be to add an event listener that listens to changes to this info field right here and on change what we're gonna do is actually set the state of our active items so the active item will be updated and then we're gonna create another function that will actually on submission will grab that active item state and submit the data and this will later change whenever we're editing an item too so we're always gonna fill out that active item so let's go ahead and under fetch tasks here let's go ahead and create a function called handle change so this is going to be a simple function and again it's just gonna listen to key up events and within this function what we want to do is first grab the name so the name of the attribute that we're editing and in this case we're just gonna do e dot target dot name so that's gonna be the name of the info field so that's title and we're also gonna grab the the title to the item that we're creating so the value will be e dot target dot value so let's go ahead and just console these out make sure it's all working and then we'll actually start setting the state so console don't log and let's go ahead and just say name is going to equal to name and then we're also going to do the same for value so we'll copy and paste that and set this to value okay so before we go ahead and do that let's go ahead and bind this so up here we need to bind it and then add the event handler so we'll say this dot handle submit and that's gonna be equal to this dot handle submit dot bind and we're gonna bind this and then in the in the component right here what I want to do because we can't access this within actually we can just go ahead and access it directly I was confusing that with a loop so in here let's just go ahead and say on change and we'll set that to the function so we'll just say this dot handle submit or handle change so we have handle change binded we've created the function and on change is just gonna console out the name and the value so let's go ahead and give that a test and see if it's all working will refresh that and let's just say Dennis so there we go each time we're typing it in we're constantly out the title and the name so now that we have that set let's set the state and for this all we have to do is here we can just use this dot set state and we need to set the state of the active item so because we're updating child elements we're gonna use a spread operator to actually to actually update this so I don't want to get into the detail of it so I'll just go ahead and just do this and then I highly recommend you look this up if you don't understand how to update child items in a state so for this we're just going to do dot this dot state the active item so this is the attribute we're updating and then within here we're just gonna say we want to update the title so for this we're just say let's go ahead and just get that value and we'll update that so now to actually see this active item and to make sure that it actually works let's go ahead and create a function called handle submit and this function is gonna trigger whenever we submit the form and first it's going to go ahead and prevent the form from submitting so adop prevent default because we want to manually submit that and then let's just go ahead and console dot log the item so item is gonna be active item here so we'll set that and say this dot state dot active item okay so on submission we're gonna console out that item so let's go ahead and bind handle submit up here and we'll just change this to handle submit and also update this one right here so now all we have to do is go ahead and add an event handler to our form here so within our form we're just gonna do on submit and on submit we're just gonna go ahead and call that new function so we're going to do this dot handles submit and any handle submit we're just constantly an out that active item so let's go ahead and test that and we'll just do dennis submit that and there we go so there's our active item so it looks like that key up event did work properly and we are now needing to submit this title right here and that entire object actually to our create method so within handle submit once we console that out we're actually gonna use the fetch API to send post data to a different URL so we're gonna set a URL and this is going to be dynamic to whatever data were passing in so whether this is update or delete data so if I go back to my API and if we go to this base API we can see that in order to create an item we need to do API forged slash task don't create I'll just go ahead and grab all of this right here and throw that in as our base URL and then we'll dynamically update it later so now that I have a URL we can go ahead and just use the fetch API and in here we're gonna throw on the URL and then we're actually going to have to send some data with that so the method is going to be post and we'll just put that in the string value and then we're gonna throw in another object and this is just gonna be for the headers so headers will actually pass in some more data here and we're gonna set the content type and that's gonna be with a capital C and content - type and this is just going to be application for slash JSON so now that we have that we're gonna pass in something later we're actually gonna passing as CSRF token for our form but we'll leave it out for now and I just want to go over that on its own later but we're also just gonna finish this up with a body so for the body because this is the fetch API we need to stringify the data so json stringify and in the string apply method we're just gonna go ahead and throw in the active item so this does state active item so we're just gonna grab the active item throw it in there and then we're gonna go ahead and get that response there so we'll just do response with an arrow function and then we just want to go ahead and set the new state and call fetch task again so we'll just do this fetch tasks and let's go ahead and set the states of this don't set the state and we want to set the state for the active item so we've had an active item but after we submit it we want to clear it so what I'll do is just go ahead and grab this entire item and throw that into set state there's probably more efficient ways of doing this but this will also work so we'll throw in that item and now we want to catch any error so we'll just do dot catch and in here we'll just do function we'll grab the air and we'll just return or we'll console out whatever the air was so console dot log and we'll just say air and we'll throw in whatever that was so now if we go to our form here and we start creating a new item so we'll just say Dennis and we submit that we should see a new item get created so there we go our new list was fetched here and we rendered out that data so what's happening here is whenever we're submitting it we're sending it to this URL which calls in this view right here so we send it to tasks create we send it to that serializer we throw in the data and we check if it's valid and then we save it so on the front end what happens is after we submit it we go ahead and call fetch tasks again and we reset the active item so right now we're able to submit the data and I'm not sure why this err kind of changes up on me but to my understanding we have to send CSRF token to Jango so right now it's submitting without it I'm just gonna go ahead and assume that the error is occurring because I've had it to where it happens and then it doesn't so it's kind of confusing me I'll have to do some more research but for now I'm just gonna play it safe and assume that we're gonna get that error every time so what I'm gonna do is actually go ahead and pull in the Jango documentation and if you watched my Jango video with this with a vanilla JavaScript I already covered this but basically we need to create a cookie here so this is the Jango documentation and it tells us how to do this with Ajax we need to create a cookie and then just pass it in into our into our headers here so we're just going to throw in a CSRF token right here where is that handle submit so we're gonna throw it in through the header so let's go ahead and just create that so I'm gonna copy and paste that and just get rid of a few things so and we're gonna grab this entire function here and add this into our react app so just above handle submit is we're actually all added just underneath or just above component will mount cuz it's kind of its own item so we'll remove function right there and we'll go ahead and bind it so I'll go ahead and duplicate that and we'll just say get cookie throw that in there and now we want to use it within our handle submit function so what I'm gonna do is set a variable called cookie or CSRF Tok Savar CSRF token and that's going to be equal to this dot get cookie and we just need to get the CSRF token just like the django documentation tells us to you so we're just gonna use that method right there and we're gonna pull that in and then pass it through our headers so CSRF token and in our headers are here just under content type we're just gonna do X - CSRF token with the capital T and then the rest will be lowercase and we're just gonna pass in that CSRF token so this is the proper way that django wants us to pass in that token it's just a safe way to do this I'm not sure why I wasn't giving the air I'll do some research on that later but might as well play it safe and make sure we submit it each time and one thing before we submit that form and actually test that token I want to make sure that we are clearing our form whenever we submit it so what I'm gonna do is go to the input field and where's value so I'll just go ahead and set the value and that will be equal to this dot state dot active item dot title so whenever we reset that the active item title it'll go ahead and clear out the form so I'm gonna test that now and this is now passing in that token and if I just do one submit that our form is cleared and it looks like it sent it in properly so that's with a token being passed in okay so we completed the hardest part which is that form submission and now what we want to do is go ahead and add an event handler that sets this form to the value that would clicked on and then change the active item to that object and also change the value of editing to true so we're gonna set the state of whatever object we clicked on and change that value so we're gonna do that with a function called start edit and this function is gonna be in charge of just changing that state and then depending on whatever value we have an editing is going to change the URL submission and decide whether we're up Item were creating a new one so we'll just pass in tasks and that's gonna be the object that we clicked on and then we're just gonna do this set state and the set state is gonna change the value of two different things so it's gonna change the active item and in here we're just gonna throw in the tasks and we're gonna change editing to true so that's set to true and now we can go ahead and just add an event handler down here that allows us to actually update that so because our function takes in a parameter we're gonna have to call it a little bit differently inside this loop here so on click we're gonna use the arrow function and we're just gonna go ahead and say start edit and we're gonna pass in the task so the current task in the iteration of the loop we're gonna go ahead and throw it in and that's how we're able to access it right within here so another problem that occurs is normally we access a function with this keyword right here well this isn't going to be available within this loop so what I'm gonna do is change it to self and we're gonna set the value of self to this so var self and that's going to be equal to this so this will allow us to access this within the loop right here so that's going to be self and we pass in the parameter because of this arrow function and now that should work so let's go ahead and test that and see if it's working so I'll refresh it and click one dentists installed ERF so that's all working the event handlers catching it and we're setting the state the next thing we need to do is actually change the value on submission so right now if we submit one of these what's gonna happen here is we're actually gonna have a new item created because that URL takes in the active item here so it takes in this item which was the one we clicked on and it passes in into our handle submit it passes it to the URL of create so we're gonna write a little conditional here so just underneath this variable URL we're gonna check a conditional and change the value depending on the state of editing so remember whenever we click on that edit button editing is set to true we're gonna change the state and we're gonna say if this dot state editing if this is equal to true go ahead and change the value of URL so I'm gonna throw that in here and we're gonna use template literals because we're passing in a dynamic value of the item ID here so if we go back to our API if we look at this task create and task update are pretty similar except where we say update and we pass in the item ID here so let's go ahead and just grab this and I'll throw that into that URL change this to update and for this we're just gonna go ahead and create that four slash dollar symbol and curly braces and then I'm just gonna pass in the item ID so the active item has an ID up here if we look at the actual state here so we're gonna throw this value in so now it's set to the ID of whichever item we clicked on and if I can find this so we'll just change that to this dot ID so now that we submit it we'll just set the value of the state so we're gonna say this state and we want to change actually it's gonna be set state we want to change the value of editing back to false and ready to either create or update a new item so we're gonna set editing to false now so it's always going to update it until we click on that edit button so let's go ahead and test this so if I go back here let's refresh it and click on install Django rest framework hey update submit that there we go so now the item was sent to the update URL which sends it back to our view and because of that pattern we go ahead and query the item by the ID set it as the instance and save it so that's the update method let's go ahead and actually delete an item so if we go back to our code we're gonna create a function similar to start edit here so whenever we click on the delete button we're gonna trigger a function on click and we're actually going to pass in a task into a delete item function and this function is actually gonna send data back and delete this item so I'll go ahead and create it underneath start edit here and we'll just call it delete item and we're also gonna need a pass in the task here so we'll pass on the task and we're also going to need the CSRF token so I'll steal that from handle submit because we are sending data so we need to pass this in and we'll throw that in there and we're gonna use fetch to send the delete method to our API here so if you go to our view it takes in not a post method but a delete method and if you look at the URL pattern it's just as base URL which I'm going to copy right now and we're just gonna do tasks - delete and then the item ID of which we're trying to delete so let's go ahead and throw that in and I'm going to use temple literals again so we're gonna do that base URL task - delete and then the item ID is going to be which what we passed in into that parameter so we'll take this and we'll just do task ID so now what we want to do is go ahead and set the method and the header so the method is going to be delete and for the headers we're just going to send in the content type and the CSRF token so that's another object and we'll just say content type and it looks like it's Auto filling for me so content type is gonna be application for slash JSON and the CSRF token is just gonna be X - CSRF token and we'll just pass in what we created right here so that data is gonna be sent in and now what we want to do is just create the response and rebuild that list after an item is deleted so we're just gonna say dot then and our response and we're just gonna use the arrow function again so response and we'll just go ahead and call this dot fetch task so it'll just go ahead and reload all that all that data after we delete an item so let's go ahead and just bind it so I'll just copy this and go ahead and just say delete item and I'm actually not sure if I need to bind this I don't know why edit worked without it but I'll actually just do edit item two so we're start edit it looked like it worked without it but just to be safe we'll throw that in there and now what we need to do is add the event handler so down here on click we use the arrow function again so I'm just going to go ahead and throw that into the delete button function and we're just gonna say delete item so the same thing we call it we're gonna use self and now if I go ahead and refresh this I just realized I actually have an error up here so not L but that needs to be a colon and now let's try that one more time so if I go ahead and delete an item the item is deleted and the table is refreshed so if we want to update we can just say update and if we want to create a new one we'll just say new item and there we go so everything looks like it's working all right what we want to do is actually cross off items whenever they're considered complete and then actually give us the ability to click on this and cross them off manually so we'll just go ahead and take care of that so back in our code here what we need to do is render this title out depending on whether this item is complete or not we need to render it out differently so if I look back into my my list here we have one item with the status of completed as true and this one as false so whenever that item is complete let's go ahead and strike it off the list so let's go ahead and write that conditional so in here we'll just use our curly braces and we're gonna say if the task dot completed if this is equal to true or false let's go ahead and render this out as we normally would so if it's false we'll just go ahead and use this normal span tag here and we'll just paste that in here but if it's completed if the status is completed we'll go ahead and render it out differently so we'll paste in that span tag again and we'll just change this to strike so if it's completed render it out as text if it's not go ahead and strike it out so if I save this we'll clean this up a little bit clear out this space and let's see in our template if it did that so there we go the items striked out what we need to do now is add an event that allows us to click on this and change that status and then re-rendered that list so let's go ahead and take care of that and this function we're gonna call strike on strike so it's just gonna invert the value so strike on strike and it is gonna take in the task so once we pass on the task what we're going to do is set the value of task dot completed and we're gonna make it the opposite of the current value so task completed is going to equal to task dot completed and it's going to be again the opposite of what the last value was so completed and then we're just gonna console it out so console.log and we're just gonna say task and let's just console out the task completed status of tasks are completed and I'm gonna quickly bind this and add it as an event handler so in here just throw it in as the last method we have and we'll finish this up so strike on strike change this one here and we're gonna add the event handler right onto the title I believe so let me take a look at my demo code here and that's gonna go directly onto the div wrapping that so we're gonna say on click we're actually just gonna copy this so on click and we're gonna have to put that into an arrow function and we'll just throw that in there so we're gonna call strike on strike and let's go ahead and take a look so if we try to click on this we should see this console that right here so it's set to true then false true false so let's go ahead and actually send this data now so we're gonna use fetch again and we are going to need that CSRF token so we'll throw that in here and we're gonna set the variable URL to the same value as what we sent in that post data so or in that create update method so we'll take this and we want the active item except for we need to update the active item ID to task ID so we're going to go ahead and send this data and it's going to update the status of completed so with fetch we're just going to repeat a bunch of what we've already been doing we'll throw in the URL here and we'll pass in some data so the method is gonna be post and for the headers we're just gonna go ahead and pass in the CSRF token and content type so I'm just gonna copy this right here and set that repeating ourselves a lot here so pass that in and then we just need the response actually no we need the body because this is post data so I'll go ahead and set the body and this one will just manually create so we are gonna have to do json stringify and within here I'm just gonna manually create the object so we're gonna set the value of completed to whatever we just inverted it into so we're just taking this new value and we're gonna throw that in and we're also gonna pass in the title so title is gonna be and I'm just doing this to be safe because I don't want a bunch of errors in a demo video like this so just to be safe we'll just do task title and we're sending that data and then finally we just want to get the response so we'll do dot then and we'll just set response to call that this dot fetch tasks method here so that should go ahead and send the new data update it and I just want to make sure we're passing in task ID everything looks correct so we're gonna update it and then we're gonna rear-end er that form so in here what its gonna look like is right on the spot you're not even going to see that rerender it's updating it and it looks great so the last thing we're gonna do now and just want to test a delete method the last thing we're gonna do in this video is actually merge the two projects together so instead of having to run both servers we're gonna run build and then actually have Django serve this template here on port 8000 and replace this URL here so Django and react will be merged together and then it'll be considered one app with react hosting the front-end so I'll close this out and we are going to drag in this react app so the front-end part into our Django app so I need to make sure that my text editor is closed because I don't think it'll let me do this and we're just gonna drag it straight into the root directory so this is going to take a few minutes so I'll go ahead and pause it and once this is complete we'll go ahead and just run build and complete the configuration okay so the final step so this should be pretty easy we now have our react app within our jingle project so front end right there is now sitting within our react app and if we pull up our Django project we should see it in here so we have our app API that's the back end and then the react app with of the front-end part right there so react and here's our app dot JS file and so on so what we need to do is configure the two so the first thing that I'm going to do is go ahead and CD into that react app and we need to run build so now I'm in desktop and my jingle project and we're just going to do front-end and we're just gonna do NPM run build so this is gonna take a second and after we run build we're gonna go ahead and configure that root URL okay so run builds complete and what that means is within our react app we now have build and we have access to these static assets right here so we have the static assets and we also have the index.html file so what we need to do is tell Django go ahead and look for this index.html file so we need to go to settings WI and let Django know about this template first so in here we're just going to go to templates and we're gonna set a path to actually go ahead and track this template down in build and then index dot HTML somewhere here there it is so for that we're just going to do OS path dot join and we're gonna set the base directory so baster and we're just gonna go ahead and do the path to the root directory so front end into the app and then we're gonna look inside the build folder so that should send the path to front-end build and then it's going to know to find index.html so in here what we need to do now is configure our URL so inside URLs we need to run an import and we're just going to render out a template view so this can be a class based view and we're just gonna do from Django dot views dot generic import and we're just going to do template view so we originally got this template rendered out right here that's because in our redirect tree or in the route URL we had nowhere to send it so we're gonna create that right now so we're gonna create a path for that root directory or domain and this is just going to be template view dot as underscore view and we're gonna look for a file called index.html so that's going to be this index.html inside of build and right there so we have that path set and the last thing we need to do is let Django know about react static file so down here we're gonna need to configure that so we're just gonna go ahead and create static files underscore directories and that's gonna equal to this list right here and I'm actually just gonna copy and paste the same path here and just update one little thing in here so we're gonna take this one right here and down here we're just gonna paste that in and we're gonna say we're looking for front-end and we're looking for build but now we're looking for the static file so we're gonna go into front-end we're gonna go into build and then static and that will allow us to work with all of react static files so now just make sure your CD to back into your Django project and we can go ahead and run server from here so python managed py run server so remember from your Django app not your react app anymore okay so it looks like we have a few errors I miss felt a few things so if we go back into URLs py looks like I spelt template wrong so this DCB template and this also DCB template right here and this right here needs to be template underscore name so once we set that this should all be working so let's go ahead and turn on our server again you okay so Django is now officially serving our react AB now if we ever wanted to make updates you would still have to do run build with react in order for Django to be able to find the most the latest files but this is how you do it this is the basic overview I hope you found this video helpful and don't forget to subscribe and leave me some feedback in the comment sections and like if it's helped you

Channel: Dennis Ivy

Views: 114,403

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov, Django, Django REST Framework, React JS, API, Todo APP, CRUD, Create Update Delete, Fullstack App

Id: W9BjUoot2Eo

Length: 55min 27sec (3327 seconds)

Published: Wed Feb 19 2020