Full Stack Project with React.js and Django (Task Manager Application)

[Music] hey what's going on everyone welcome to a new django project where we're going to build a task manager application and for that we're going to use django framework for the backhand and react.js for the front-end so react in a nutshell is a javascript library which is great for developing single-page applications or spa and it has solid documentation if you're interested to read about react and i have a video by the way um on react it's a tutorial where i explain um how react works and how we connect it to django in order to send requests from the client to the server and return responses from the server to the client okay so react serves as the front end handling ui through the requests to django's backend so let me show you first what we're going to be building the the end result so this is the task manager and um it's some sort of to-do list so you have uh you have a button add task you have completed and incompleted so you click on add task in order to add whatever task you want i can say for example study geometry okay and here study geometry late at night and you can set it as completed or you can leave it like unchecked which means incompleted and you can hit save okay so study geometry it's an incompleted if you want it to appear in the incompleted section you need to click on edit you check completed you save and you'll find that it's marked which means it's completed task okay we can add another task so we can say shopping for potatoes shopping for potatoes this afternoon for example and it's incompleted so it's still on the list all right for the completed items we can delete them so you will hit delete it will disappear from the list okay and all of that is managed here in the django rest framework so you will click on get or you refresh and you will find that the only item right now which is available which is incompleted is shopping for potatoes you'll find here id21 because this was the original example where where i was working on initially and i had to add more ids and just for testing and we have id number 21 but for you if you will start to do it for the first time you will have id one okay with the title with the description completed with a boolean value of false which will set to be a default value by the way all right so this is what's happening we can delete that or we can edit it we can make it completed okay save completed okay we can delete that and if we will refresh our rest framework you will find that it disappeared okay so this is how things are working between the front and and the back end okay we're going to build all that so the prerequisites for this project are two essential elements python 3 obviously and preferably 3.5 and above and node.js because we're going to install some packages through mpm which is node package manager so if we're going to use npm then we need node installed on our system and to test if you have node installed or not you can go to your command prompt or terminal depending on your operating system and you can try node version okay and if you will have this that means that it's installed properly on your system also python dash v capital i think yep and also if you will have this that means that you have python installed on your system and you're good to go that's all what you need and we're going to start by our favorite side which is the back end i always like to start by the back end then the front end or the ui all right so let's go ahead and open our command prompt or terminal depending on your operating system desktop i will go to desktop and i'll create a directory i will call it django react app and i will change directory to django react app okay and i want to create a virtual environment i will use ppmd for that so if you don't have vpnv you can pip install vpnv like this but if you have it you can directly go ahead and activate your ppnv using ppnv shell command okay and this is cool because you don't have to install dependencies and packages globally on your system but only inside your project this is the first thing the second thing that we want to do is to install django also using ppnv so ppnv install django and by the way guys i'm interested to know what was the first programming language that you have learned okay for me i've learned um in 1993 this was my first language it was basic and it was on atari 800 xl and i didn't have a disc drive or there was no cds or anything they were just cassettes and i used to play games like king kong space invaders pac-man all of these games uh using just cassettes and cartridges okay and also i was programming on basic just typing tens and tens of lines of code in basic using books so i had some manuals and i was typing code and this basic code reminds me very much of the turtle module in python so you type a few lines then you'll have a flower for example or an arrow moving up and down stuff like that it was very simple very primitive but it was really fun okay excellent now we have django installed let's go ahead and create our project so in order to do that we use django dash admin start project command follow that the name of the project so i will call it backend so the django react app will be the main folder inside it we will have two folders one for the back end and one we're going to create the front and i'm going to create a folder called frontend as well so we'll have back-end and front-end folders okay cool let's navigate to backend and i want to start an application now to do that we use the command python manage dot pi start app and we'll call it task or maybe to do okay perfect so let's see what we have so we have the main project folder backend we have manage.pi and we have our application folder to do okay so let's go ahead and open that with visual studio code using code space dot and this opens automatically visual studio code you don't have to do it manually let's migrate so python manage dot pi let's migrate first all right and let's run the server manage pi run server okay oops so let's go ahead to localhost port 8000 which is the default port for django server so localhost and we have our default django page working okay now we know that everything is perfect let's close that we don't need it and let me actually kill the server all right now we need to take some configuration steps inside the settings.pi file so the first thing that i want to do for the moment is i want to add the name of the app itself which is to do so here i will pass to do okay inside the installed apps list next we want to create a model this model will determine how the to do items or the task items should be stored in the database to describe three properties so we will have a title for the task we will have a description for the task and it which will be a boolean value all right so let's go ahead and open modules.pi okay and all right from django.db import models let's actually create a class i will call it to do we can call it task and models.model and i need three attributes so title or three fields title equal to models dot char field and let's give maximum length of let's give it 120 for example and we'll need three more description we'll make it 500 for instance because it will be more characters and completed and completed will be not char field but boolean field boolean field okay and boolean field um it's not max length but just the default behavior will be false okay so this is our main class to do and let's have also a string representation so def's term all right and we will return self.title now let's go ahead and make migrations every time you make changes in models.pi you need to make migrations modules.pi is the file that concerns the database okay so python manage dot pi make migrations because this is the file that's responsible of database okay and you find here that we have a new file inside migrations folder and we didn't do this manually this is sql code that django had take cared off we didn't try that we just have written in models.pi we have created a class then we executed the make migrations command then django has created this for us okay so this is a pretty cool feature in django actually and now let's migrate so python manage dot pi migrate okay so apply all migrations admin auth content type sessions to do running migrations no migrations to apply okay fantastic now we can test to see that the crud operations work on the to-do models file by using the admin site or interface so what we'll need to do is to register the models in the admin.pi file so let's go ahead to admin.pi file okay and let's delete this comment and we're going to import from current directory models file we're going to import the to do class okay we need that and let's create a class um call it to do admin okay and here admin dot module admin all right and say list of the display uh we will have our three fields or three attributes so title description and completed and we want also to register the model so here register model so take the admin.site dot register and here we will register the to do class and the to-do admin class okay now let's save that and let's go ahead and create super user so python manage.pi create super user super user uh back back at mail.xyz and just one two three four five six uh that's okay all right now let's go ahead and run the server python manage.pi run server okay let's go back to our browser so let's go to localhost 8000 slash admin and back one two three four five six um no thank you calm down so there it is we have our to do's okay different groups so click here users all right these are the users that we have and if you will add other users that will be added here this is the main user groups to do is for now we can add a to-do so we have a title and description with the boolean value completed so we can add here anything let's say shopping shopping shopping for potatoes in the afternoon okay and make it like that all right we can click here we can delete it yes i'm sure all right so i think you have seen this before in my django course we have our little ui django admin site then we can interact with our database okay cool let's log out and let's get back to let's actually kill the server all right great job so far you should be proud and in the next section we will see how we can create the api so now i want to install django rest framework because we will need serializers and also i will need to install django course headers for white listing port 3000 which is the default port for react and for that we will use ppnv as usual so make sure that you're inside your backend folder and we'll say vpnv and we will install django rest framework in one word like that and also i want the django course headers so django course headers okay and that's it hit enter and we should see the magic happening all right perfect so let's close that and let's open in the settings so we will need to add the rest framework and course headers to install the app so we have our to do and we'll add them just below so course headers okay this is one and the second is the rest frameworks rest framework all right and also in the bottom um here somewhere let's add it here for example doesn't matter really we want to white list the local host port 3000 because um there's where the front end will be served mainly so course underscore origin underscore white list so we are white listing the local host port 3000 if we won't do that there will be a block between the local host for 8000 and 3000 between the backend and the front end so http colon slash slash localhost all right so white listing react port and by the way the django course headers package helps us in preventing the errors that we would normally get due to the course rules so by doing this we are whitelisting the localhost 3000 because we want the front end of the application to interact with the api in django so i hope this clear for you guys and now we want to create serializers for the to-do model so for this to do model we want to create a file and we'll call it serializers okay so the job at the serializer basically is to convert the model instances to json so that the front end can work with the received data easily and json is the standard for data interchange on the web and i have a crash course on json if you want to check that out okay and it's the same idea of serialization in general also in javascript when you take an object and you say json.stringify to convert it to a json string all right it's the same idea so let's create a file inside the to-do folder and i will call it serializers.pi okay let's maximize the font and i want from rest framework to import serializers okay this is the first thing the second thing is i wanted to do so from models file in the current directory i want to import to do and let's create a class to do serializer serializers dot model um serializers serial serializers okay uh oops sorry serializer only and we'll create a meta class so class meta so the model will be equal to to do and the fields so we'll have the id which is auto increment we'll have the title we'll have description and completed uh let's indent that properly all right and also let's create the view so let's go to views.pie okay and i don't like these comments so i want also to import the view sets from rest framework so from rest framework import view sets view sets okay from the serializers file i want to import the to-do serializer class okay and also the to do from models from okay and let's create a class i will call it to-do view and this view sets okay which is the model imported from the rest framework dot model view set okay cool uh and i will say serializer serializer underscore class which is just an object and i will assign it to the to do serializer module class sorry to do to do serializers is a class and query set is a variable that i will declare and i will assign it to to do dot objects dot all in order to populate everything all right now let's go ahead to url stop by which is in the backend project folder okay and let's add some modifications so i want to import from to do i want to import the views import oops from to do i want to import views okay i want also so the path i want to add to that include okay and i want also um what we want we want routers from rest framework so from rest framework this is very important for the routing so from rest framework we will import routers and let's create a router object so router will be equal to routers dot default router and router dot router dot register and say tasks call it tasks and here a second argument yeah the view set which is the views views dot um the to-do view which is the main class here in views the to-do view all right and also oops and also task okay as a base name all right so these are the url patterns i will add another path and uh just when you will go to the url and you will type localhost 8000 slash api okay you should be routed to the django rest framework website so here router.urls okay and this is the final step that completes the building of the api we can now perform any crowd operations in the to-do model so routers basically allows us to make some queries so when you will go to tasks this will return a list of all the tasks or the to-do items okay create and read operations can be done when you're inside tasks and also you can have a task with an id to return a single or individual to do item or task item okay and the id is a primary key of course and also update and delete operations can be done here okay so uh perfect let's just save in views by the way guys i forgot to mention that in settings let's just save that first okay um i forgot that in settings in the middleware we need to add for the course header settings so we will add course headers dot middleware dot course middleware middle where all right this is also very important all right guys so let's give that a shot actually see the backend run server and fingers crossed hope won't find any bugs alright great so let's go ahead and open the localhost local host port 8000 slash api um let me just show you to just a quick reminder you remember here in in the urls we have said that the default path is the api slash so hit enter and there it is the django rest framework okay api root we have uh in a json format api we'll click here you will have in json format we'll have it here also okay http 200 okay the status code allow get head options very accept and all this is useless but if we will go to tasks we will have our to-do list okay so we can interact here by the way so you can say um let's say for example play music description play piano for one hour okay and post all right and boom we have it in our to-do list with id2 but that's okay you might have id one that's fine no big deal okay and also you can update it so you can make completed and post and you will find that completed has changed from false to true let me show you that again completed post so completed false and completed with a check mark post completed true okay and in this case we can delete it all right and you can display different tasks so if you make task slash 2 you will have only with the id2 okay with the play music with completed false all right you can delete it okay you can update it you can modify it with the put request okay so that's all for the back end of the application in the next part we're going to move on to flashing out the front and with react welcome back so as our backend is working perfectly now we'll create our front and side and we'll make it communicate with the backend over the interface that we have created so let's go ahead directly and create our react app and i will use create react app cli for that so we will say npx which stands for note package execute create react app and for more information about create react app please check out the link that will appear here and this will take you to the latest video that i made on django and react all right so following that i will type the name of the project or the app that i want to create and i will call it front-end as we said we will have two folders one for the back-end and one for the front-end and the installation of the package is going to take some time so i will pause the video here and i will be back when it's all done all right perfect so let's go ahead and run the development server by typing npm start all right and there is an error somewhere oh because i'm not inside the front-end folder npm start all right perfect so this is the default page of react so now we're sure that everything is working perfectly let's kill the server and let's add some ui flare using bootstrap and react strap as i told you in the beginning of the video so to do so we'll say npm install react strap and bootstrap okay perfect so that's okay for the moment and let's go ahead and open uh the react folder the front-end folder with visual studio code all right so let's keep our react app running on the right side and let's go directly to index.js which is the main entry point to our react app and we'll need to do a couple of things the first thing we need to do is to import bootstrap so import bootstrap slash dist slash css slash css slash um it's called bootstrap.man.css okay so this is the first thing and the second thing um you know what no that's okay never mind and let's open app.js now and in app.js we're going to work a lot so let me just close that and we'll say hello okay right okay so let me actually uh we don't need that and let's import react okay so let's actually delete that and let's import react and component well there is a shortcut for that imrc and i'm going to use a state based component so let's actually delete the functional component and let's create a class to extend the component all right oops okay and of course we need a constructor to take props and the super with the props so this dot state is equal to you just make this bigger all right and let's have view completed and we'll set that to false and also let's have a second key and we'll call that task list and we'll set it to let's actually create that above here so i want to create a variable we'll call it tasks and tasks is an array of different objects and this will be different uh just different tasks dummy data to just to display them on the screen but eventually we'll delete this and we will just interact with the ui using the react app itself okay so let me just copy four objects we'll paste them here okay and let me set the task list to tasks variable all right okay so all is good now we need to set completed tasks to check if a task is completed then view completed will be set to true so by default we said that view completed will be set to false and we will do that by creating just a property called display completed so let me actually put it below so let's come here and let's say display completed actually put semicolon here so display completed is equal to an arrow function that takes stages as a parameter and will return one of two things so if status is true we will return this dot set stages set oops status and view completed will be set to true okay perfect and actually cut that [Music] all right else we want to return you completed set to false all right all right so this is one thing this is one property let's actually have a second property and this will render two spans which help control which set of items are displayed so clicking on completed tab will show the completed tasks and the same thing for the incompleted basically so we will call it render tab list tab list this will be equal to an arrow function or return and here just for the sake of time i will copy what's inside the div like that just what we want to return all right so we have basically one div with the class name and this is a bootstrap class my5 or m on the y-axis margin on the y-axis of five pixels uh called tab list all right and we have a span so on click okay we return this dot display completed equal to true and then we have a span and this has on click property and it has an error function that returns uh this display completed to true then we have a class or a class name that's set to a ternary expression it's actually a condition so if this state dot view completed is true then active else uh then just empty string and in the middle we want to complete it as a text okay which will be like in the form of button but it's not a button actually it's just a div with a span okay and the same thing with the incompleted but in the class name if this dot state dot view completed is empty that means that we want to make it active so these are the two spans that controlling the set of items which are displayed whether completed or incompleted okay and let's go below here and render items so we will render items and this will be equal to an arrow function which will return so we'll have const and what have you completed passed inside and this will be equal to this dot state okay and const um let's call it new items this will be equal to this dot this dot state dot task list all right and we will use an array method the filter array method taking item as a parameter oops so we're going to filter the completed item so item.completed must be equal to view completed okay and i always forget semicolon then what we want to do next is we want to return new items while mapping each item and map is another array function which calls a callback function taking item as a parameter so we will return here the key and title each item has an id as we have defined it in the tasks array okay so let's go ahead and do that um let me actually below here all right so this is to render all the items that we have in the list so rendering items in the list completed or incompleted okay so let's actually render on the screen because it's an empty canvas i don't like it so let's render we will return so let's have main with a class name context and close that and let's have an h1 tag h1 with a class name of so we'll make it text black and this is bootstrap so text black text upper case and we'll put it in the center with the margin on the y-axis of four pixels and here we'll write task manager okay let's make it smaller all right and next let's have another h1 tag with a class name of raw and this will take a div or the class name md 6 small 10 with max auto and here we'll have another div so div with a class name of class name oops of card p3 and we'll have another div and i want to have a button give it class name equal to btn for the btm primary okay and we'll say oops add task um we can change it even to dark if you like i personally like the warning the yellow like i showed you um in the demo so we'll keep it like that we'll keep it the warning okay so and we'll close we have this closing div and here we want to render the tab list so we'll pass this dot render tab list okay all right and we will change that um in the css file just in a moment so ul unordered list with a class name just like that the class name of and let's give it a class name of list group and list group flash i also want to display the render items so this dot render items what did i do okay so it is div not h1 uh just a typo okay that's better so for the render items what we want to do is we want to return new items and we will map each item okay and map is just another array function like filter or reduce or sort all of these are array functions and the map function just it calls a callback function taking item as a parameter so let me show you that so let's actually return new items so we have new items defined above new items okay and we are going to map taking item as a parameter and this is an arrow function okay and it's going to uh what's going on [Music] oh sorry should be here like that okay and here we're going to return the key and the title so let me actually put this in a list item and inside the list the key is going to be equal to the item dot id okay what did i do all right so this is one thing um and also we want so let's make like that and also we want the class name so class name is equal to list group item the flex justify content between and align item center right so this is for each item in the list so inside for each list element we are going to wrap a span so let's have a span and this span will actually wrap will be wrapped around each item title okay so each task title and you can see here the dunning weekly reports okay and these are the incompleted items by the way or the incompleted tasks so we'll scroll above you will find that done in completed set to false and also weekly reports are set to false okay so we're going to wrap a span tag around each item title and for the span we're going to have a class name so class name and i want to check or have a condition to see if the state of view completed exists or true that means that i want to have the to do completed else i will just have an empty string so i'm going to use the backticks or the template literals just to have a placeholder so to do title margin right off um two pixels and uh just have the dollar sign this dot state dot view completed view completed okay if this is true then i want to have the completed to do else and empty string and i think that's not enough so here i want to set the title title equal to item dot title so this is the first span okay and let's have a second span i just need two buttons so button okay and the button will take a class name of btn btn info margin right to pixels and here say edit and another one and here we'll say delete okay next to each other and just but i will change them so here is info and here danger for deleting to be read okay delete not deleter all right and let's make that um cleaner make like that so i hope guys this part is clear to you what we did all right um what i want to do actually i want to go to the index.css i want to delete all of that and let's have general settings for the body so we'll have margin set to zero padding is set to zero also font family font family uh sans serif uh let's have the to do title so this has a class name off to do title so i will make just the cursor to pointer we're going to turn these uh text just it will look like a button in a minute all right and also the completed to do we want to give it text decoration show decoration line through and the tab list so tap lists for this pan and this span child i want to give it a padding of 5 pixel uh top and bottom and 8 pixels right and left okay and the border i want to give it one pixel solid and the rgb is that color that requires color 13 1 59 and 204 and also i want to give a border radius why nothing is changing okay border radius 10 pixels you have here cursor pointer for the to-do title you see here that um we have a pointer for the cursor and the padding's here and everything so here is solid all right now it's better let's also give it some margin right to give some space give it 20 pixels all right neat uh also give it cursor pointer so i'll hover over it will be a pointer like that okay good we're almost done also i want the span child when it's active to have some properties so dot tab list and here i want the background color when it's active to be the same as this rgb so i'll copy that paste it here next i want to give it a white color just for contrast fff all right perfect now let's go ahead and work on the model on the construction of the model so let's close the index.css and let's go to the same folder of course in the source and i will create another folder i will call it components and here i will have a file called model.jsx dot js so let's go ahead and import react and component from react and we want to import different things from react strap so we will import just copy that so we want to import button model model header a model body a model footer a form form group input and label okay all of that from react strap okay so mainly the react strap is is imported to create the model okay constructor of props super props and this dot state is equal to so active item i will set it to this dot props dot active item all right and make like that okay and i want to create different properties here so i'll create handle change like that equal to and i will give it event as a parameter let's make it e just like that as parameter and uh we'll return so we'll have name and value okay e.target for the name and value so we want to check if e dot target.type is equal to checkbox and this is for the checkbox for the completed item okay so then the value will be equal to e dot target dot checked check it okay so this is one thing and also the active item active item is equal to uh just put three ellipses here this dot state dot active item okay and [Music] put the name and we'll give it just a value like that all right so this dot set state taking active item as a state okay and the semicolon all right so this is the changes handler this is just to check out if the check box is checked or not that's all what it does so to check if the check box is checked or not so we want also a toggle uh whether um the the model itself is opened or closed on or off so let's go ahead and write our render function and i will have const of toggle and on save because we will save eventually um the tasks that we create or update so desktop props and we want to return and here i want a model model that tag okay and let's just put is open equal to true then toggle equal to the toggle state in the middle here we will have a model header the model body and so on so let's construct that metal model header and here is the task item so this is the header and let's have a buddy now so model body there we go so in the model body what we want to do is we want to create a form and this form will have title description and completed which are the same fields essentially that we have defined as properties on the to-do model in the models.pi file in the back end okay so let's go ahead and create a form and here we will have three groups so let me just copy them quickly like that all right so this is very easy three groups one for the title so let me just title one for the description and one for the completed title label okay and it has an input so it has a title and an input okay this dot state.activeitem.title okay and on change we will invoke handle change basically this is an arrow function assigned to the handle change property okay so we will call it simply and with the placeholder so enter task title enter task description and complete you just completed and that's all that's basically it will need also a footer so after the model buddy i want to create a model footer model footer okay and here i want a button and that button will have a color and this color is the success color the green one and then on click arrow function and so on save i want this dot state dot active item and don't forget to right between the buttons the button tags here save and that's all just we need to export so export default model and let's go ahead and import it so let's go to app and let's import custom custom model from components model there is an error model body is not defined uh model buddy with b capital and also b capital save that all right and you have here incompleted so you have here incompleted oops there is something wrong [Music] this dot set status dot set state i made a typo set state so if completed there you go completed and incompleted okay of course you make edit delete nothing happens because uh we're not connecting it to the backend also add task nothing happens because we need to work on our app.js first first thing that i want to do is inside the constructor where is it yeah here so here i want to add a few properties so here i want to set the model as default to false okay else it will be shown always when you will open them the application right so this is one thing um also i want uh each active item active item to be set to an object and we'll have the three fields so we'll have title and this will be an empty string also we'll have description description and completed we'll set it to false and toggle it's an arrow function and it will return so this dot sets state and inside it will take as a state the model which will be set to not this state dot model okay so this is just for the toggling of the model itself because the model originally is set to false okay and here i don't need that i want it outside i also want to create handle submit so when we will submit the task or the to-do should be equal to an arrow function taking item as a parameter and returning just this for the moment is for testing let's alert or cancel console.log whatever and here we will say saved example and we want the json this is for serialization json dot and we will pass the item okay i forgot something this on toggle so it should be uh a toggle all right like this and close that okay and i will call this handle delete because we want to handle the submit and handle the delete so the item and we don't want this.toggle and here we'll say deleted okay and the same thing json.stringify whatever the item is all right i also want to create item and this will be equal to an error function and inside i want to declare an item variable and this will be equal to so inside here the state with the title of an empty string also model is set to not this dot state up model and also i want to this dot set state and the active item is set to the item itself whatever the item is and model is set to not this dot state dot model okay all right let's move on we're almost done so we need also to edit any item or any task so this will be set to an arrow function with an item as a parameter and we'll return this dot set state this dot set state and inside here i want also the active item basically the same exact line here okay all right and just let me check out below um we don't have the background with the turquoise color but let me just change that and this here will be content with p3 and all that is bootstrap mb3 um and b2 and we'll take the background info which is this turquoise color so if i will save now you will find that the background color has changed let me actually let's change here let's make it white all right there we go and also let me add a footer below the last div so it will add a footer and i'll give it a class or class name rather and here we'll say margin on the y-axis five pixels pixels also bg info um text white okay and we'll put it in the middle center all right and here we'll just put um copyright so copy rights 2021 and for the copyright symbol and copy and semicolon like that so there you go yeah we can put it on the same line all rights reserved okay and i think this um we give it too much of margin let's make it three for example just make it narrower that's better we still don't see our model because we will need to put it just here below so here's how our model works actually this dot state dot model just make it bigger for you guys let's close that okay so here i'm checking if this dot state dot model is true i want to receive active item toggle and unsave as props so i want to insert them as props so model and the first property active item right will be equal to this dot state dot active item okay and the active item actually represents the task item that we want to be edited and the second property is toggle so toggle is equal to this dot toggle all right and toggle is just the function that we have defined above which is used to control the model state so whether we will have an open model or closed model and the third property or the third props um is on save okay we need that to save the task and this will be equal to this dot handle submit handle submit and that's it so if this dot state dot model is true we want all of that to happen let me just close the tag and it's complaining why because we need else so if this.state.model is true we want all of that as we said else just return nothing null all right and that's all so let's actually if we'll click on add task nothing will happen and if you'll go to your dev tools and i hope you have react dev tools installed for your chrome browser and when we'll click on app you will find here below that model is set to false and that's absolutely fine because we did that in the code so if you will click on that check box it will appear to you and if you will save you will find here saved title description completed just this is for checking i put it here in our code with the json.stringify this one here when we hit save it will give us what has been saved each item and it will just alert it okay so that's what's happening you can close that okay you can see here view completed is false but if you will click that you will find that you have the completed because it's true task list this is our dummy data that we have that we have defined above here all of that alright so that's what's happening behind the scenes and you can see here active item completed is set to false description nothing and title is nothing okay exactly like we have set it here [Music] we will now modify the application so it interacts with the django api that we have built let me actually open the terminal and by the way i have moved the back end and front-end folders in the main directory in the main django react app i recommend that you do the same okay so let's navigate to backend and let's not npm python manage.pi and server all right let's go to localhost port 8000 that's okay we need to go to api and two tasks okay so we have node working on port 3000 react and django working on port 8000 okay fantastic we have two instances of um of the terminal okay so for us to make requests to the api endpoints on the backend server in django we will need to install axios okay and i also have explained axios in the last video um in react django tutorial so let's go ahead and let's open actually a third terminal and let's go to the front end folder and that's mpm install axios and we will notice in package.json here it should be added in the packages okay so you have seen that axis has been added to the package.json all right so now we'll need to modify in the app.js so it doesn't use the hard-coded items above let's actually delete all of that so we'll delete all this okay let's create to do list with an empty array and we have a function called component did mount so let me show you component did mount and i have spoken about component did mount in the last django react tutorial but basically component did mount is invoked immediately after a component is mounted inserted into the tree and that's exactly what we're going to do we're going to invoke the component did mount all right and it will return this dot it's a function that we will create it now refresh list which will be assigned to a function an arrow function so i want axes to connect between the back end and the front end right oops sorry all right so this is the main goal of axios to connect both to send the requests from the client to the server and getting the responses from the server to the client okay so axios dot get method and here we want the http colon slash slash i'm sorry the backend 8000 api tasks okay dot then this is um this is a promise actually it returns a promise so the response as a parameter and this dot state and inside here the to do list res.data this is the promise this is what we will do with the response and in case of any errors we want to catch them so that and we can console.log whatever error that might occur so this is one thing the refresh list just to refresh the list of the completed and the incompleted tasks i also want to update the handle submit so here instead of just having an alert above we want to change that so this dot toggle that's okay and i want to check if item dot id then axios dot get and here uh just i will use the backticks and we'll go to localhost port 8000 api the tasks tasks and whatever the item is okay so like that item dot id okay and we'll return the item as well outside all right so just close that all right i don't know why i said get uh it's put just for updating dot then and it takes a response and returns the refresh list okay and this is not enough because we have just modified it so we want to post it after so we'll have another axios object and we will post this time then http no backtext this time localhost 8000 api tasks okay and uh i want to return the task itself the item okay and also or a promise i'll just make it like that we also want to apply the same thing on the lead so let me actually take this from here we will change the method to delete okay and we don't want to return the item just like that all right let's see why it's complaining um yeah because here we have changed the task list to to-do list so let's go below to render items here this should be to-do list okay and that's okay perfect so you can see that all the tasks that we have written before they have disappeared actually all right so let's test that all right so moment of truth let's click on add task let's say calling nothing is happening i'm not able to type in model uh it's my bad form with a capital f okay also the button should be with the capital b like that otherwise uh look to the button okay save c here if i will make it be with with small letters i will save that everything here won't be applied the color the the functionality itself don't click nothing will happen so let's return that so this is my bad i apologize for that uh let's go ahead and try again and we're still not typing um active item oh it's missing okay that's missing an e it's good to spell things right all right let's try again calling perfect okay calling customers calling customers for cash collection okay and we can market completed or incompleted so we can leave it like that we can save and boom and let's go to our django framework let's refresh and we'll find that id number six calling customers okay and incompleted now let's edit it and let's make it completed for instance let's save and it disappeared from the incompleted list and it's in the completed list all right so we can delete all of that all right perfect and if we were refresh it's empty as well as empty here right let's add another one say walk the dog okay save and complete it all right we can edit it okay so this is the full fledged application using django for the back end and react for the front end if you like this video please like it share it with your friends and i appreciate always your support guys thank you very much for watching and i will see you in the next videos take it easy

Channel: Bek Brace

Views: 16,897

Rating: 4.9152217 out of 5

Keywords:

Id: F5OUT3ijk8M

Length: 76min 52sec (4612 seconds)

Published: Sun Feb 14 2021