Complete Django and React App (2024)

okay so today what we are going to do we are going to do a to-do app using Django and react we're going to use Django based on python in the back end and in the front end we're going to use react so first of all I want to just show it is going to look like so this is a to-do list that we are going to do a simple bag okay it will be easy just to add new to those we are there more one to do more another and yes and this is going directly to the database so for example if we refresh here we still have the to those and we have like some things we have like the checkbook for example if we the check box we are going to shift the status from incomplete to done each time that we add a tudum we also affiliate near the door as you can see here and we can also delete and edit when we edit we open do edits and if you come here we have the test that it still remain you can also close which there's nothing okay this is what you are going to do as we can see we have and this is in the jungle back end this is all the list that we are using here okay first of all for all we are going to set up the project and we are going to separate that webs the back end Finance in unfolder and the front end in another folder so let's actually let me show you are you going to do this okay now we are going to start the projects you can create that in any folder I'm going to create here so first I'm going to create a folder I'm going to name to do app and I'm going to open my terminal here so first we have the first step we have to create a virtual environment so create a personal requirement you do python M V and V and you give the name of the environment obvious they need Envy and as you can see we create here environment so now we need to activate it so to activate we just have to go to to 400 pads so if I'm here in my case this is different for everybody but in my case I Scripts and I'm going to activate anyway okay a typo Scripts activate okay and we can see that the environment is activated when you have the NV on here okay so actually we did that step so to activate the the environment you um in my case I'm doing that way if it is a mate I believe vcnv and the besides here we have been instead of script and if you are using the wind in those command you don't need to use source okay so now let's install Django and Django is being installed okay so Django is installed now but since we are using the Django rest framework and we want to integrate it to interact we're also going to install the Django rest framework and the Django course headers is going to be necessary to integrate it with that and let's install okay so this is install now the next step is to start the projects which we do Django admin start project and we are going to name it backend okay as you can see we've created the backend here so now let's see the the back end and we just have to waste to start a new app so it's going to be python manage.pi start Tab and you're going to name it to do and as you can see here we have like the back end with the dissolved main folder with the settings.pi and this is the new app that we create we also the API files okay now we have the back end we just have to install the react app so for this let's go to the root folder or the to-do web and for this it's very straightforward to create we are going to use the vids to create an area adapt so you just use those that command line is the name of the folder that you're going to collide and easy to say that you want to create an app on react okay the app was created now it's just need to CD to the front end here and let's see Star npm and release there as you can see we have like the typical we have the folder where you have the source the main Dev but you're going to see that better in VI Studio code okay now that the npm is installed I'm going to see the the previous folder to the root folder yeah so we can finally open Visual Studio codes and to open you just use this in the terminal called and Dot to a panel as you can see we have here our main folder for the react app and year we have the backend in Python now we are I prefer to work in the terminal on visuals to recorder after after doing the first install so far now let's open a new terminal and we can open like more tree because here is I like a terminal to run the Django server one to run the react server and the other two to use one for Django and one for react okay so let's start the Django server CD to back end here and let's fight animation.ei and server we have migration apply but it's working so as we can see we have the jumbo server running on Port 8000. which is that one and here I will rename this RS for red server we're going to CD to the front end and we do npm run Dev and we have our react server running okay let's go these these and we don't need a bit more okay so we have one server for Janko which is working successfully and on for tweet which is also working fine okay now we have the main apps the Django and the react running so to finish the we just have to do some modifications in the settings and this is why we installed the course editors because we need to allow or the course Origins we kneel to tell Django then it can communicate with this part under it because what are we going to do we are going to create our bank and information on the Django server and that information that in the database is going to be retrieved in the react so for these we have to study that you want the courses we're just saying it to Jungle to alone from these words and also you can also not forget when also not forget to install the resource framework and the course headers in our settings install apps and here is going to be the to do that we can see here that it's apps actually your name is to do it's not mine you just have to change is for doodle and there is only one more thing to integrate the parsetters is actually to add the deadline here maybe anywhere here but we cannot use there and okay after now we have the the jungle app that is running and also the react app which is running so the things that this is the main setup that we do for all the Django and react projects and what we're going to do we are going to create some models here after this we are going to create serializer that are going to go to views and these years going to are going to um be triggered in the where else okay so now we are ready we will start to code our backend so yes let's clean this a bit and okay so first thing we have to do is to create a model for our app roach to the web and to create a model we just have to press the class that you're going to name to do and we're going to inheritate from models.model and now this is the information that we're going to have in the database for this uh we'll create like a board this is where how to do is going let's create like a character fields with Max land so let's say 300 let's create a Boolean field to say if the task is complete or not so you just have to do like models the linear field and let's make the defaults equal false because you are not starting with the tasks complete after that let's make the updated this is for when the date when we update the to do so for these you are going to use the data time field it's going to be Auto now here and if you want to see the extensions that I'm using autocomplete and all that stuff easily use like the you have like bit by the python python Italy science balance I'm also going to use daily invitations and you also want to do that for the once wanted one for Direct and also that one okay next we have the ball complete let's also create we created disease the date when you create so let's use the daytime field again and now we don't want this we went to the auto Now head equal to true this means that it's going each time that you create an instance of the class in other words you forget to do it will automatically create the date for that to do okay so now the model it's done so now with that model we have to serialize it which is to convert which means to convert it for for a for a Json object and to do this we are here and create a new file it's going to be named serializers dot yeah okay and now that you are ready every Star the race framework you just have to do to import the serializer from the Django race framework it's also important models from all from all the previous files are going to import the models and you are going to create the class of the serializer so we are going to name it to do serializer and let's say serializers model serializer and the model serializer allows to use uh that fields to to populate our serializer and after we just have to create keep us meta and the model that you are going to do that are going to use is the to do and the fields we can choose the fields that we want but in that case we want all of them so we just do Fields Dot fields are okay so now we have the back end of order to do it very easy so now we did the models first year with that models we are going to populate the serializer it's actually to convert this the serializer it's going to be easy to visualize after which we see this and now we have to create the views okay the views can be very complicated or very easy depending on which views we are using in this case we are going to use the model view set it is like the easiest way to create a crude application API using Django which is the last code that you are going to use I'm going also to do another one with the API view that in that case we want to maintain things simple so I'm going to use the view sets so just have to import the view search from the react framework and also let's import or serializer that you created and also our model put up something here serial license um outs instead my from all let's import models okay we just have separate the view now the view it's going to to do you set and imaginary diet for our model you said okay so what we need for the view set we first we need the query set so this is a field that we are going to retrieve all the information from our model to do objects.org and the next step is to pass our serializer class it's we're going to retrieve from our file serialize it okay and four back end it's only this this is the or that the web is the only thing that we are going to need so since you're using view sets is will allow us to create all the all the crude operations or or to do it okay so I think the audio is better now so the only step that we need to finish our back end is to create the urls the urls so for these we just need to we're going to name our main URL API and here we're going to use the include let's include that to do t or else I just need to import something here versus include because we could use the URL here but we want to create year file urls.pi Okay so I'm getting this dot or else okay this one does not exceed yet into this now okay and after we copy things here let's create the urls actually when using the view set you we don't need the them and let me see oh oops disease here we're going to actually to go here we are not creating URL patterns that you are using a router and the router is going to create all the clouds URLs for us so first we need to create the router into it routers Dot default router but before this we need to import the views on all import views and now um press framework routers and no the only thing that you have to do is to resist the views here router dot register to do to be used dots to do view set the name of you and let's say the base name is going to be doodle yes partners plus equal okay this line of codes just is used to extend the router resistor here in the URL patterns okay and think of everything actually let's do something before let's go here on that mean dot pi to register our model so now or models okay this is working so we went to some things okay let's restart our server you can see here yes and I forgot here what is okay my squad okay hola no it's good yeah Savage is running well you just have to do the migrations first I kind of postpone it but let's do that now so let's go here this is why I like to have or terminals one for the server or for the jumbo commands earned for the right server and another one for the react commands so let's edit the back end here it's going to be python naij dot pi make migrations okay everything is on I know we just have to migrate and it will allow us to create our database in SQL later okay so everything gets useful so now if you go here we don't have more errors and restart the server again yeah everything is burning smoothly so let's run here we are going forward to place first you're going to the mean let's go for the API okay as we can see we have the API that is running from API with the base name to do but we don't have any data now so what's happening here yeah each time that we are going to that URL to API to do it's going to trigger that views that views they are going to do all the operations first they are going to retrieve the to-do's and after we can delete edit or even add more data at first let's add some data in the Django and mean you have to create a super user first item manage dot UI create the user let's call that stain no needs passwords yes okay your supervisor was created so now let's come here yeah so now our back end is finished as we can see here we have Autodesk here there is no data let's add some data okay so let's say that task one save to do task two save another let's say that to the tree okay but I don't like that format we prefer what Trina's other styling okay so to add the string representation let's do fine one we actually don't need this same device running endless size self dot dot one and now if we come here yes we have like the body and um after to those inner admin page and now if you refresh here we have our the information your task one that's two test three we can add new modes for example let's say let's create inner raw data but completely to do for let's say complete true WE Post and there is our recently new data and you can see this is the updated and created which is the same at the moment and let's go back now if you want to edit or delete we can just put the ID year is what the view set is doing is giving the detail representation with only that line of codes so there's a lot of stuff going behind but it is we have all the methods hello so to get the list of everything we are going to the oralize API to do and to go to a detailed view you just have to put here ID and we can see here so for example let's just do T idea let's make a patch request and now we have edited the body if we come here let's say we go for the 2-3 let's delete and as you can see here the tree was deleted let's make here task five post anyone and then you one new task was created okay so the API it's working because we could see that in boss man but I think here it's enough so the only thing that you have to do now is to create the design the content design of the application you are going to do is with the ACT so all of the data with this is the API that we created and we are going to fetch the data here so it we can manipulate and decorate our to-do app and react okay now that you are ready I have finished the backend from our to-do app which is here we are going to we have to do like some let me see if it's running running some cleanup of this and let's close everything because we don't need that's all here front end source okay style we not one style because here we have to do seal something we are going to do styling wheel style wins CSS and there's your wife to welcome us with components it's going to be much quicker to achieve our design that runs and I have to install sand wind that way okay no style is he still working and let's clean this print mint green maybe you're going to be needs do you start okay so we need to install days UI so now we are going into or forward terminal I told you that all the terminal adds any usefulness here so let's see the to the front end and you have to install bellowing we also have a tutorial about installing 10 win CSS in a quick way but this is our cheat sheets so with 10 pm you just have to copy these yeah still installing okay now that this was installed let's keep installing things scorpion you need okay it is we create this now I just left one is on the content so we copy here yes unicorn yeah okay is done and now you just have towards this honor index.sh file and yeah it's only this like okay in that way it'll wind it's not so complicated if it's all if you just said the copy past and so the quick hello world to see if everything is doing um let me see I don't know if they said that it's right okay as you can see when for example I did one thing in an element is also going to edit on the end is also an extension that I have which I think is that one if I'm right okay so here let's last class class nine see if it's set up correctly okay no it's not yet set up properly okay checking one thing more five plus nine side X I Excel into the center okay disappear because we also have another extension that is that one beowing says Italy sense is help us to autocomplete and nope okay the problem was just that we had not to restart the server so I just did this I restart the server again I quickly refresh and everything was running smoothly so okay let's do some styling with these let's do some adding to ram let's also do a minimal height full screen it's going to be unrended if you port view white in that case it is what I like about using data station and telling everything it's very logical so we don't need to just need to know a little bit and after it's uh it's quite okay so this is what you want but not the lower Orient like to do lists which is a Network let's create a little nav component because you want that in the top and it's not necessary but let's say it's our enough component class name and dt8 voila and now I think yes I think that's it because now we are going to create the components we are going to retrieve the components here which it's going to be um to do form and a table for how to do's so let's do this so yeah let's create another file folder name component yeah it's good that's great table dot gxs let's populate very quickly with that snippet Goods and let's solve so wait to do for DOT GSX and the SUV us you have to use the GSX form okay so now let's go to the main app it's important to do form let's import table and and once we go in is something like this although just see if it's running smoothly yeah and table okay as we can see we are retrieving let me make these neither these we're retrieving the information here from that components in the parent one the so okay now you have to create here a simple to do form and also a table so now let's go for the design so for the design let's first start with the table for example we're organizing we are going to use some some icons so we have to install react icons that we just have to look for I just want is that why good and here we can start to create the table first use the simple table in HTML and after use you create a row and we carry we create some pH yeah let's say how much we need maybe if four or five so far and with that yet now you just need to create our body our body same logic we create a row and if you create a row you have to create the sales that will match the ones from above and this is the simplest way let me just videos indented space you can see by either Choice the better but I prefer that one okay so let's uh install direct icons because you're going to use let's see if it is if you don't have any information now it's we are in the front end right you can see here okay icons let's just populate these first because we also need these going to be check box if I remember correctly going to be the to-do that one States and data creatives that also forgets another one you also need some actions okay this is or simple let's say check to to do over and four let's create some more in some or else here we discussed that use let's say done that created it's a 20 22 for of these and the directions which is right here actions okay so this is populated let me see if we have installed direct icons okay perfect okay we can start with making a stable prettier using the lens so we just do use like some basic class okay so for a year let's create place name with okay web as you can see is paying it but sorry then 92 percent and let's create the next weeds for excel okay so character maximum weight to 56 Ram please just just to do one thing because you are well so when to create these responsive so so let's go there and visualize the just in that place okay perfect I like to go that way because the grand visualize on the smartphones here and then laptop in that area I also want to make these responsive okay let's think let's start to give some borders on this paste the one button below we do these and let's create the color black there is black okay it's okay let's just comment each to the form for now go um for now let's also give some padding top ICS no p y is not to be on top of these actually let's give more pad in the center that is too much now UI 32 maybe yeah so you can see that better without being glow the top okay keep going now uh let's just do some styling on these on the header and let's do class name right between let's squeeze the text yeah excise font it's me volts black and white yeah and let's better dead left okay we just uh you just dial that for sale and so what you have to do now used to copy the same glass names for all the tobilos yes these these and this okay good I like let's keep formatting below now oh let's see how it's okay oh same principle let's starting maybe with some padding MP3 the point okay let's also make the decimaler X Asm good here it's good here it's good good Okay so now let's import some icons with the icons because here instead of the actions we went to the icons so we can click here or indeed and here on delete so we have to look for that icons for that we just go here right icons just delete okay and since internet was slowing I just retrieved all of them were not recording but the thing it's uh you come here you find for example the edit we went they did not and that one and the node and we import from here from right icons so it's the only thing that you have to make sure is that two initials are the same as or icon so so this is what we have outlined delete edit node the check box and the checkbox online blank because checkbox are also going to be used here and so let's start with the actions okay so weak directions we go that's great span and with this band we put here there it is not which is here very small at the moment and let's create another span but each time for the delete okay so yeah it is here but you have to give some styling okay let's think so further style like I think we have to go here and just increase the font onto medium let's also we want them aligned side by side so let's create a grid or column and let's items Center okay let's give a margin top [Music] okay good enough for now so what we want to do is the checkbox same principle and the offline checkbox and after the change from checkbox to blank checkbox you are going to do after the conditional statement on the logic okay instead of two let's create another span okay there is a check box this after also give some pointer on the cursor so to do this you can I'm hearing a span inline log and cursor pointer okay is that why you can also do the same for here but here we don't need the inline effects guys let's increase this small okay okay a little bit better okay and here we also want to do some personal Edition let's add a badge okay that way Maybe and we can also another span xon first name it's going to be equal B 1.5 x says onto medium wider green and red okay what you want to do if it's complete we give a blackout green but if it's not complete we give a background of red okay for now this is good let's just give summary of the table will appear two three four okay yeah this works then off after these we are going to create some models when we click here we can actually edit and after we're going to give some functionality on the table okay this is how we create a table using Tailwinds the the best thing that we're still going to do is to add some functionality on this later okay for that we are going to import and install the easy UI as well help us create them components installed this UI yeah and what you want here is to return here an input and after you and also button here but for the class names we are going to use the one from Daisy which is similar to bootstrap what you are using preformat class names like BTN toast beefy style the input and the button okay now that internet is a bit better let's install the easy UI is npm installed this UI okay and after they say to what is on our go-in config file it's going to be here in plugins require D yes and after this is installed is is going to work and we are going to use some text input for example that one you can after just copy and also I'm going to use the button okay now that this UI is installed and we have we run the serving so easy is practically working so now we want to get these yes is input so you just have to you can we can copy these all of these but we have the placeholder and we just need the class name too because the type is also text and is what I like about these up you forget and comment these and voila we have our input here we just have to match things okay here we are going to instead of type here we're going to say add to do to remember here we gave a lot of padding where is it here which is not needed Maybe let's give like height that's why you have to leave like bathing it's uh yeah so I don't know if I'm going to do here are in the to do form you can just give like some padding bottom here and pick the problem yeah I think it's so that's why okay okay we just now have to add a button so we are in the the sui component here we have all the things that we can add example button okay but then it's here let's move here let's refresh again okay and for about 10 we went yeah let's say that one oh we just have to copy this so far here and there is let's just give some margin margin left so okay it's good okay so I think it's good I prefer give like a little more the emerging here and not much here so maybe by 12. and yeah and it's here so these are going to be so the design is done so the only thing that we are going to do with that the functionality now so here we add like the notes that we end we clicking the button and it is supposed to add a new node after you can check and check going to edit the statues here and we can edit and delete but before that just scroll that button at all okay it's good so let's go for the functionality it's okay now what you have to do is to actually fetch the date year and retrieve that character in the tab here and we are going to pass a deformation to the table create a for Loop to retrieve these okay so let's uh first we will we need to have use effect let's create fetch data function const and to fetch we have to create an async function because we are going to do with axios speaking about axios we have initial access yet dialogues npm y axios okay access exist all so let's keep going so first so to make a request with axios the model that we use the template is almost all the time like that one and log here so what we're going to try first you have to get the response yeah you have the way your sex just get and here we want to retrieve this and see if everything is going smoothly we are going to log the response but we have Michael eat anywhere so this is why we need a user effect Okay so use effect s we was um empty brackets here just to make on requests when loading the page and what you're going to call is actually the fetch date okay so let's see if everything is going well okay we have the import taxes Uh Sears or Max yes and later again and yes as we can see we have made the request and you have the date here so we actually are retrieving the data that we create in our backend and we are passing it to the front end so to finish this let's just set the toodles equal we did a with the data that we fed met not here to do with the response and rejoice going to log here to this let's try again refresh [Music] let me see the components okay yes we have our state we have the date the heat press console or log it it's not retrieving because of the of the loading maybe you have to correct for this after but yes we can see those type foreign the object here okay so now we have the to-do's we just have to pass it forward let's do those so these we're going to pass that prop ER to those going to be equal and we have we can now listen to these uh it is just for us to pass it to the table component so here it is just saw some stretching so oh those I mean it matchless Rose now you can delete more tool okay so now what you need is to map this in the body so divide them the index yes let's see if I want to return at the same is a little confused and you can agree it's quite messy we put these here and let's see if everything's okay this looks good it looks good looks good let's see in the console what's happening okay okay okay if nothing appears but I probably will know why that there it is I think we are trying to do a loop in the to do but uh there was there is still no information in the to-do's so because in the time that the fetch that it's loading and you are passing the deformation on the page there is no data so it says that to the map is not a function so what you have to do is to create a loading first you have to load the data make sure that you load the director and only after that we can display here into another layer of complexity that's doable let's try a constant set is loading our initial State Israel we want that is slowing and up and you're actually the response.data and here let's say he's learning false okay after retrieving the information we're not Melody that way retrieving gear props are funny and now we have to make sure that loading is loading it's equal to false so you can display this information so so if is is loading organic to display a div it says he's learning and only that we can pass these so we're going to put these on the fragment okay cool it's working so we have like one two three four so it's looking like four times so what is actually doing here it is like very important so after you have an information in the to-do's so when it's not more loading or after doing this we can actually if is loading you cannot see but it is a very weak brief period when he says learning and when's loading is equal to false so when you have information you can a loop in the map so now we have to display these instead of alarm we are going to divide them dot body yes as you can see we have the tasks here then actually let me add some lines here so we have to do order B yeah I think that's why it's better so we actually want also pass a key the key is going to be to the white and unique dot ID okay now you want like if what we want to do here if it's complete though it's equal to false perfect is going to be empty if complete is equal to true we want that one so what are we doing here is blue item dot check if this is true we want this if not you want that one okay let's put it in our line it's getting crowded okay let me see there are okay it's good on the outline in check box to the white and offline and blank of them appear blank foreign to be just to confirm what actually the title though is when you ISO it was logging it's when you over it actually appears deformation I think it's not appear anything which is that again to okay it's over but now it's overliding just me try this okay no information okay the answer there it is not checked it's complete that's why it does not appear in information and now we have that one is only one that's true that to do four and now we have a ternary operator we just have made that checkbox appear complete so next let's each year okay to have more space I will open these girls this is going well okay what we want to do now is to turn these red and saying incomplete one is not checked when the check box is false and on when in checkbox so to do that we we have to do that way okay we don't need is so that you can actually uh changing this class so going to be there no sign and if to do it's complete we're going to say another then reoperator no else you enter it I think this is enough to it's not defined ah is it's actually a string yes and we can see we have done this now we have to do the same thing let's you can see you can get complex let's make these on here so the principle is the same now we have done for the class but now we are going to do four but it's a beer done complete we forgot towards the swing again yeah perfect it's getting nice okay now we have done the status we just need the data okay for the night we are going to need to format these because you are going to see if you do what is the name that we created okay create and if we do the create that way we're going to have that ugly data so we have an easy way to actually convert these in a more beautiful way in JavaScript so you just have to do data create the type and we convert it to local string using that method yeah match beautiful that way so we have now the day and hours okay so we have done the most things we have doing The Styling we create the main things the back end it's done now we just need to add the functionality so virtually add data year to be able to there you go the checkbox and to be able to edit delete so let's do this let's start with creating new to those so to create new to those we go to to the form India we are going to create a new state going to be new to do sets new to do and to be equal to use State and someone imported here and let's create an object because we went using the investment batch method so Auto Body going to be empty for now and let's create another change that will change our inputs so what we want is to set the new to do when I took money put is changing so we are going to get the previous study and pass the previous attributes and the body is going to be equal to E Target dot value so here on the inputs we are going towards that matter no that function in the case that is the change and also want to set the value of a control form it's going to be new to do and dot body let me see if it's right well [Music] you have to do about body and let's also log in here there new to do okay so it's actually getting updated good okay so now when we click this button you want add a new to do with the information that we wrote here on here that's going to be incomplete and the diet creating it's going to be generated automatically and the checkbox is supposed to be false okay so for these we have to add one click here but for on click in the button we also have to create a new function that's going to post that to do on on here but also it's going to update at the same time our new list after those let's create the function first to do where we have to create a post requests now so same format we are going to try access dot post and here so you are going to post one year and what you want to post is the date the new to do precious finish task six oh we forgot here on click what is that though just like the refresh axios is not defined yeah let's import here also okay as you can see the data was supposed to successfully we can go here the network and we can see we can made we made uh so full was requests okay he's again is that one the post it was successfully created and is the reports that we sent that was here but as you can see we don't have the data that is appear here because the update year but it's not updating on the air on how to do this so there is actually a lot of ways that you can do to update that to those here and if we do like the refresh are going to have added here between towards that automatically so first we have to come here we went set to lose and you also want to import a better to get from the apparent the fetch data so the set of those going to be the same set to those and you want also to use the fetch data good so now we can use them on here and so now it's easy so year after we do the post meta we can also do at first these set to those is going to be the previous to those and we are you want the previous to those plus the new Toto and after we apply these we went fetch the data again to those seven okay and you can see it is a link updated instantly I just try one thing yes as I'm expecting to do then as I'm expecting that step is actually redundant because we don't need to add the data again on the to-do's in the react because we are fetching it again from from a race framework so each step is not necessary we just need to call the fetch data again because this is going towards the data on here after we fetch it again to retrieve the new list okay so one step unless one thing that I want to do that it's better for user experience it's actually each time that I click on here I have to add I have to click on add to do but it'll be good if I could also please press enter and added information so for these you are going on inputs we're going to call the on key down and we are going to state if the key rests it's equal to enter let's post the to-do it is another why instead of just instead of just clicking we are going to trigger just by pressing enter so it's like to do 11 I click enter request is made and the to do 11 it's here modern thing let's just set the new to do to empty so it disappears from here it's the new to do her body is going to be empty fresh to do 12 enter as you can see it appears okay and with and with these we have a lot of to-do's to those and yes we still have a lot after the stomach I have to ID to delete and to change these but it appears to go good part into those okay so let's go for our next step so I think we finish with the form all the things are going to be handled here let's go with the lead so we can actually delete some stuff because getting crowded or to the least so let's create the consts and Elites going to be in the sink and we're going to delete to delete we are going to need the ID so what you're going to do when you click here we retrieve the ID we make a delete requests that it's going to send the information to delete on the database so it's this try and sketch error so log here okay no X yes dot delete and for is we need the because this is not going to be on that link it's going to be for example in that thing that URL so is but has to be dynamic so you can delete here so to be dynamic we add these and here is going to be the ID okay I think is it's good let's try before you try we actually have to add down click going to be here okay we are there one click the icon it's going to be function I just have to call and I'll delete methods with the to the white and dot ID okay so let's see if it works let's delete then I can see we have our okay so we have a two or four sword the light delete request was the same successfully and if you come here leave refresh there is November 9 anymore yeah stuff so yeah if if we refresh here there is number nine anymore so you have to make ease in a way that it did it s deletes and it updates at the same time when we click so for this we can since you have to do those you can actually update the list here what we have done have not done in to do form because your retrieving the the list actually we could we could do the same way okay but let's do the that way so like I can also show you what to do in that way so we are going to have a new lists and we are going to filter that to do all the to-do's dot ID that are not equal to that ID because that ID was actually deleted in that step so just created a constant menu lists with all the items without that ID and now we said that the to those lists with at least without that IDE let's try again so if you click here it's deleting it's deleting 13 14 12. here so it's good so these is going well so okay so now we have to do the edit and they did it here it could be interesting because maybe it is only the most complex of all the real requests okay so actually have two things for indeed first you have to create a model why not you click here it opens the model and we can actually edit tests on tests on there but we also we have to make a patch request to update the state as the previous one when we click on the checkbox so we're going to do this we're going to create a and delete it function that it's going to make a patch request using the ID and it's also going to have a value so that develop you can use for example the body attribute or the completed depending on which one we are editing so okay let's start for the requests costs and uh you need same way it's going to be in the same function that that one is going to have parameters same thing catch log here and let's create here a response going to be await that you're going to use the batch method this is the same we can just use this is going to be the value okay what actually you are doing here so you are making um we're making patch requests on here and depending of the value that we are trying to update what is input it's going to update the value according to that ID so is the first things that we have to do per year and again here we can also as we did in the delete we can map again and your lists okay what he's saying is we are looping in the to-do's and if the to do dot ID it's equal to data D the one that you are going to click we want the new response data and the new one value that's going to be updated and if not just give me the to-do like normal and set to-doos to me new to the okay after these maybe it's easier to handle the check balls first ID value [Music] we are going to use the and Beats yeah we're going to pass the ID and decisional where the value is interesting so here we just went to know about the completed so the complete is going to be the preview is going to be the inverse of the value so if it's true it's going to be false if it is false it's going to be true and these we are going to use on here okay let me see a new TV if you don't need the title anymore there is no problem or later okay so one query we want bigger handle checkbox the values and to be y temp dot ID complete at least maybe near somewhere to restart that expected token [Music] okay so this is telling me that they are is on here let me see that okay silly mistake this is a white action dot patch let's try again Moment of Truth voila [Music] okay so this is actually working so we are like a good year we see the layer it change the state and the state is also going to change one year so we can delete we can add more only thing that we need is to create the model we did the test and to change what's here okay so for that we need a model because you remember web install Daisy UI 2012 as PDS yes I like that one open the checkbox okay copy that on here now okay we have to the button to open the model that's going to be this one so I think the best way is to include the label queries we need okay it's going to be the spam going to be inside span and or trigger it's going to be diagonal and we should do this we don't need that right is working next step is actually blood and input here and some buttons so let's go okay correlation random is not what we want what we want it's University indeed doodle okay and after that we don't want these who actually want an input then you put going to be importing for are the inputs X input let's use text import put on controls no that one is fine next Criminal action a lot about here we want to in the class of buttons so that one going to be repeat year class and to differentiate them let's say button primary let's just do some marching top here and today yes my sweet let me move okay good so actually now if we do these it's closing do I do it it's also closing you just do nothing so you have to create some functionality for this so first we have to create in your state or dedic tests in the text here said you need text to be equal so you start and body going to be empty okay so now we have to create another change so when you write here it's going to update the state of the new edit oh okay right here and change going to be equal we dear because just make One log C ertain value [Music] if it's handling this change correctly one change use this okay it's working so we're going to set the D menu text going to be previous and now these are three words going to be the same and body and to be equal to B dot Target about the valley dot spell so that to measure also log and delete text yeah definitely okay so now we have the handle challenge here you just send to say it the function when you click edit it's going to trigger that handle edit and that you can actually edit the data together okay we can deterily if it here on click and we can put input here for me looks like that's going to be very messy but yeah let's try [Music] again to call and edit and it's going to be uh do T ID and yeah it's going to be a big test is why I went with it okay so let's try task s [Music] you know is not defined okay okay [Music] because we are you're not more inside the loop because to me it will be to do item dot ID but you are not more insidable you know what we can actually use these decals when we click on here over actually if the ID that is corresponding so that way is that of doing the I will do any texts dot ID and yes actually if I want to do this to retrieve ID my F2 here one click going to be set in the text to the to do data item okay so here actually passing all the objects so we are not going with the body but we have also the ID that I created and the ID it's going to be retrievity here so that we can actually pass on the function above right there is some more errors I'll tell you when I say that they did part is the messiest one okay here are too many renders we have limit snoties it's fine okay like this to be that way you know what it is getting messy so let's just create here another function and I'll click and we're going to handle a click here b equals okay let me see what that means say first okay okay you know [Music] um please let's make Ctrl 4 mirror effects Dot is solder let me type here actually don't need a placeholder because this is going to be the text okay that was tricky but we found the mistake so here we are just on click statistic test to do item and this is what what was creating the error so for this to be rendered correctly in other words when we when we click we first have to put that on inline function so let's set the device with only be trigger when you actually click like in that sense okay after now I think we just have to refresh the server again but everything should look like because you have the handle click but no click will push that function it's going to handle the edit so we're going to retrieve the ID with the updated texts so let's give it a try they would think is also here we set the value to the edit test dot body so when we click here on the edit it's going to update the state of Lady texts and it's going to appear here so let's make a desk he did yeah perfect so yes we did it so finally we have all the good okay maybe we don't have everything so when I click edit again uh okay we have to clean these each time we click on edit but I think that's going it's going to be easier to do so you just have to set the text to say by the debt to make a refresh again before this perfect yeah so now things are working correctly so maybe let's delete delete check the boxes yeah done done done add more tool go to shopping take a walk okay so everything we have done we can delete about shopping you know let's go go running go to Randy and we delete here because it's duplicate okay so everything is working properly so yeah it's not easier to do a to-do list app using react and Django as you saw like the back end back end is very simple so we just let's make a quick recap so in the weekend what we just did it was we just create the model first we create the to-do app so in the model we create a simple model using the car feels the balliness and the date time field this is the body that we use to actually make the text and these values are completely updated when you add a new instance that not this one that one too is another the two that we can change the body and the completed so in the model after we serious to create a Json type object after serialize we use the views and the views we create use the view set which is very easy to make a query with these we create the URL by the router we register the to do and after that we get all the information on the air so with these we call the do everything so the only thing that we had to do after it was to integrate um app the backend in our front end let me just change here something to do right yeah you're over there to do so here we create just two components we made the design using VIP using a tailwind and the easy way after that we just create two components simple one of that was the table I don't know if that was that input form and the only thing that we have to do after it was just to integrate to create um the fetching methods using axios to give some functionality in the buttons when we were developing depth and after that we are made to do like a completely good app where you can delete edit and also edit here and add more okay that's it guys I hope you enjoyed if you liked it and you want to look forward for more Jango and derived applications I'm going to do much more in the future so you can subscribe in the channel because I'm going to do much more content on these and is uh a simple rather a simple app but very complex at the same time because when you do the the beginning the main crude operations actually we can do everything is like the basis or everything

Channel: Dany on code

Views: 23,297

Keywords: todo app with django and react, django and react tutorial for beginners, django rest framework for beginners, todo app with django, build a rest api with django, todo app with react, django with react js, django react tutorial, django with react frontend, django react js project, django reactjs tutorial, how to connect django with react, django rest framework, django tutorial 2023, django, react, react js with python backend, programming, web development, python

Id: FdMf_3SurOA

Length: 141min 57sec (8517 seconds)

Published: Tue Sep 05 2023