Build a To Do App with React & Django | React To Do App Tutorial

hello and welcome in this video we're going to build a to-do app using react and jungle here's a demo of what we're going to build so i have a list of to do here as you can see i can add in a new to-do i can also update the to-do by clicking on this edit icon here then i can mark the to-do as completed and i can also delete the to-do if i want to the to-do's are also organized so that incomplete to-do's are shown before completed to-do's so that's the end of the demo before we build this app we will need to have a few tools installed into our machine the first tool is node.js as we will need this to initialize our via app then we will need to have 3 installed as we will use this to initialize our jungle project as for code editor i would suggest vs code but you can use whatever you want then we will use postman to test out the to-do apis now we can start coding first of all create a folder that will store all of our source code and cd into that folder i have already created one folder called to-do app and i'm already inside this folder but you can name the folder whatever you want then inside here we want to create a virtual environment with python depending on your operating system the command to create the virtual environment will be slightly different in my case i will run python3 dash n v e and d env to create the virtual environment because i'm on a mac now the virtual environment should be created now we can activate the virtual environment again the command to activate the virtual environment will be slightly different depending on your operating system in my case i will run source env bin slash and the virtual environment is activated now we want to install some dependencies for this environment so we run hit install django and jungle rest framework now we can create our django project so run django admin start project project then cd into the project folder and run python manage the pi run server and our jungle app should be running on localhost 8000 now i will go back to the terminal i will need to open the to-do app folder with my code editor so i will open a new tab here and go back to the root folder and run code space and dot to open the code editor now we can work on our to-do app first of all go back to the terminal and shut down the django server and we want to create a new app here so we run python manage the pi start add to loose and we want to restart our server so run python manage the pi run server now go back to the code editor and we want to open the settings for pi file under the project folder and here we want to update the install apps list to include our to-do's app now we can save the file now if you see this warning here to say that auto pep8 is not installed this is just a formatter for python so i'm just going to click yes to install the tool and close the terminal here now we want to update our modus or pi file inside the todos folder so in here we write plus to do and it will extend modus dot model within here we say name is modus node chart field and let's say the max link is 100 and we want to provide our completed field so it will be modus dot boolean view and by default it's going to be false now save the file and go to the terminal in here shut down the jungle server and run python manage the pi make migrations now we want to apply our initial migrations so we run python manage the pi migrate so this is going to help us to sync up between the models in our files and the tables in the database other than our to-do model django will also run migrations for other built-in models now i will restart the server and go back to the code editor and our db.sqlite3 file should be created now we want to create a new file called serializers.pi under the to-dos folder the purpose of serializers in the context of jungle rest framework is to translate between python data types and json because we will be exchanging data with the front-end app using json so in here we write from rest framework import serializers then from dot modules import to do and we want to define a class named total serializer that extends serializers dot model serializer and within here we define another class called meta and we say model is to do and fields is underscore underscore or underscore underscore now save the file and open the view store profile we want to update our imports first so at the top we write from res framework import view sets then from dot serializers import to do serializer and from dot modules import to do and we can create our views here so we say class to do view set and it will extend view sets dot model view set within here we say serializer class is total serializer and query set is to do the objects.o so we're just going to return all of the tools in our database to the user when we are using modal view set we essentially let the model view set to help us handle common operations we want to do with a resource like reading creating updating and deleting now we don't actually have to write a code to implement these operations unless we want to customize it now save the file now we want to create a new file under the tooltools folder called urls.pi in here we write from rest framework import routers from dot views import to dual view set and we say router is equal to routers the default router and router dot register and we pass in a rejects here so we say r quotes api slash to loose then we pass in to do view set and for the base name we can just say it's to-do's now we say url patterns is equal to router.urls so this is going to help expose our to-do apis with this rejects pattern here now save the file and open the url supply under the project folder in here we want to update our imports so we write from jungle.url import include then inside the url patterns list we want to add in path and pass in an empty string here then we say include to those urls and save the file now our to-do apis should be ready and we can test out the apis using postman i have already opened my postman app and i have my request ready on the panel here so this collection is available in the github people you can just clone the github repo and copy over the postman collection then import the postman collection into your postman app the link to the github repo is in the description below first of all we are going to test out the create endpoint so in the request body i say the name is prepare meeting notes and if i send the request i should get back a response like this now i can use the get list api to get back the to-do i just created i can also get this to do by specifying the id so if i say the id is 1 and send the request i will get back the to-do i just created we can also update this to do to a different name and mark it as completed so if i send the request i will get back the updated to do finally i'm going to delete this to do so i will say the id is one and send the request and if we get back to all for no content it means that the to-do is deleted if i use the get list api again i should get back an empty list now we can view our react app to integrate with the to-do apis so on my terminal i will open a new tab and go back to the root folder and run mpx create react app front end now this is going to take some time so i will speed up the video now our react app is created we can cd into the front-end folder and run npm run star then on localhost 3000 we should be able to see our react app running here before we develop our vr app we need to install a few dependencies so go back to the terminal and shut down the rx server now we want to run npm install axios react-bootstrap react-icons and bootstrap at 5.1.3 axis is a library that can help us to make network requests to the apis and react bootstrap is one of the real adaptation of bootstrap then via icons is a library that can let us to use icons in our app easily now we can restart our server now we want to do some cleanup of our files so delete the app.test.js file and the app.css file and the index.css file and we want to clean up our app.js file so we want to remove these two imports here and inside the div we just want to return hello and let's also remove this class name here and at the top i will import video from yeah now save the file and open the index.js file in here we want to remove the index.css import and save the file and our hello text should be displayed on the browser now we want to update our react app here to display a navbar first of all open the index.js file and at the top we want to import bootstrap slash this slash css slash bootstrap.min.css this is going to import the styling needed for bootstrap components so save the file and go back to the m.js file in here we want to import nasbar from react dash bootstrap slash nest bar and within the div i will remove this hello world text and instead pass in navbar bj is live and style is margin bottom 20 pixel and within the navbar i will pass in a container now we will need to import this container at the top first so import container from react bootstrap slash container and within the container we pass in navbar.brand and we can say hashgraph is just equal to a hashtag then within the navbar.brand component we pass in the text of to-do app and save the file now our navbar should be displaying on the browser now we want to display a list of to-do's so under the src folder create a new folder called components and create a new file called to-do list dot js and in this file we want to use components from react bootstrap to display the list first of all we import via from react then we write export default function to-do list and for now we just want to return an empty div here now we can go to the documentation of react bootstrap to find the list group component so we can just copy this content here and replace the different and at the top we want to import this group from react bootstrap slash list group now save the file and go back to the app.js file and here we want to import to-do list from dot slash components slash to-do list and under the nav bar we want to add in a new container and within the container we declare the to-do list component and save the file now i should be able to see a list of items on the react app now we want to add in a form that can be used to create new to-do's so under the components folder create a new file called toolphone.js in here we want to import react and use state from react we also want to import button from react bootstrap slash button and import import group from react bootstrap flash input group and import form control from react bootstrap slash form control and import form from react bootstrap phone then we write export default function to do form and inside the component we want to return form and within the form we pass in input group with class name of mb4 this is just a bootstrap class name to add some margin at the bottom let me say form control and the placeholder is new to do then we pass in a button with type of submit and within the button we just add in the add text now we can save the file and go to the app.js file and here we want to import to-do form from dot slash components slash to-do form and under the container component we want to add in to-do form above our to-do list component now save the file and we should be able to see our to-do fold now we want to enter our to-do form to manage the state of the to-do so inside the component we want to say cons name set name to use state and by default it's just going to be an empty string then we write cons handle change and it will accept e as the param then we say set name e.target.value now we want to update our form control to be a control input so we say on change is equal to handle change then value will be named now save the file and if i try to type something here the changes should be reflected on the input now we want to update our react app to integrate with the apis so open the app.js file and at the top we want to import usage and use effect from vf then inside the component we write cons to do's set to do's with use state and we pass in an empty array as the default value then we add in use effect within here we say axios dot get slash api slash to do slash and we write the date statement and we get back the response and we can say set to do's to restore data and for error handling we can say don't catch we're just going to alert our something went wrong now we also want to import axios at the top of the file then we want to pass in this to-do's list to our to-do list component so i will pass in to those equals to to do's now save the file now it looks like something general so let me inspect the network request so currently we are requesting the api from localhost 3000 but our jungle app is running on localhost 8000 to resolve this we can update our package.json file so under the scripts key we want to add in proxy and the value will be http colon slash localhost 8000 and save the file now we want to restart our react server and now our vr app should be requesting the data from the api and it's currently returning an empty array because i have deleted all of my to-do's so i will go to postman and create a new to-do now if i go back to the react app and refresh the page and click on the network request i can see that the to-do list contain the to-do i just created now we want to display this to do inside our list so open the to-do list component in here we will accept to-do's as a pro and we want to look through this produce array to display the list of to-do's from the api so in here under the list group component we write to do store map and we want to return let's go dot item for each of the to do so i will change the content to p dot name we also need to pass in the keyboard to the list group the item component here so we say the key is t dot id now we can remove the rest of the list group the item components here and save the file now we should be able to see the list of to-do's that comes from the api on our vm app now we want to update the list so that there's a checkbox icon on the left side of the to-do and user can click on it to mark the to-do as completed we will also add in the edit icon and the delete icon on the right side of the to-do so open the to-do list.js file in here we want to add in a new function called render list group item and it will accept t as the program and we want to return list group dot item and we say key is t id then we pass in the class name of the flex justify content between and align items center so these are just flexbox utilities provided from bootstrap within the list group item component we pass in a div we have class name equals to d-flex and justify content center and we pass in a span element here with style equals to an object and we say margin right is 12 pixel and closer is pointer now we close the span element and within here we want to check if t dot completed is equal to true if it is we want to render a checkbox icon but we need to import the icons component at the top first so we import md checkbox and the checkbox outline blank from rear icons now we go back to the function and in here we want to render and the checkbox now if the to-do is not completed yet we want to render and the checkbox outline blank now after the first this element we want to add in another div element within here we want to add in two icons so at the top we want to import md edit and nd delete now actually we should import from via icons slash md now go back to the div within here we pass in md edit and we pass in a style object within here we say cursor is pointer then margin right is 12 pixel now we can close the element and we want to pass in nd delete style is equal to cursor pointer and we can close the icon here now save the file now i actually forgot something here so after this spam element we also want to add in another span element that displays the name of the to-do so we write t dot name now we want to update our return statement here so i will remove this callback here and write render list group item now save the file and our changes should be reflected on the browser now we want to update our component to integrate with the patch api so that when the user clicks on the checkbox icon here it's going to launch the network request so inside the component we want to add in cons handle update and it's going to be an async function that accepts id and value and in here we want to return axios.patch and we pass in slash api slash todos slash then we pass in the id and we add in another slasher now we can pass in the value and we write the then statement here now we take out data from rest and we say cons new to those is equal to to do stop map and we check if p dot id is equal to id if it is we want to return data or else we want to return t then we can run set to rules to new to-do's now we also need to accept this set to dose as a pro for this component so we add in set to loose and for error handling we can say dot catch and we run alert something when wrong now what we are doing here is that we are updating the local state of the toulouse when we have successfully updated a to-do now we need to pass in this handle update function to the checkbox icon here so go to the render list group item function and within the first span element we want to pass in and on click pro and within here we pass in a function then we run handle update we pass in t dot id and we pass in an object here that says computer is equal to the inverse of p dot computer so if the to do is not completed yet we want to update it to be completed but if the to do is already completed we want to set the completed field to false now save the file and go to the m.js file and here we want to pass in set to rules to the to-do list component and save the file now we can give this a try on the browser so if i click on the checkbox of the first to do i can see that a patch request is made to the backend with completed equals to true and in the preview tab i can see that the to-do is updated and if i click on the checkbox again another patch request is made with completed equals to false and the completed field of the to-do is updated to be false now we want to let the user update the name of the to-do so scroll to the top of the to-do list.js file in here we want to import button from react bootstrap slash button and import modal from react bootstrap slash modal now go to the return statement and in here i will add in a div as the container of the list group component and under the list group component we want to add in a model and for now we say show is equal to true and within the model we want to say modal dot header and we pass in close button then we pass in modal title and for the title we can say edit to do after the header component we want to say model dot body and we pass in a form control here so we say form control value is equal to an empty string then we can close the form control for now after the modal body we say modal footer and we pass in a button here with variant equals to secondary and on click will be now for now and for the text we can pass in close now we add in a second button this time the variant will be primary on click will also be now for now then we pass in save changes as the text of the button now save the file okay we need to import form control at the top of the file so import form control from react bootstrap form control and save the file again now we should be able to see the model that lets us edit existing to-do now we want to update the model so that we control whether it's open or not and it will also display the to-do we want to add it on the input here so inside the component we want to add in cons show set show equals to use state false then cons record set record equals to use stay now then we want to add in a function called handle close and this is just going to help us to close the model so we say set show equals to false then we want to update our render this group item function so for the empty edit icon we want to add in unclaim equals to a function and within here we say set record to t and set show to true we also want to update our form control component here so go to the component and we want to check if record exists if it exists we want to say the value is record don't name or else it's just an empty string we also want to update the form control to be a control input so above the return segment we add in a function called handle change and it will accept e as the program then we write set record and we pass in an object here and we spread out the current record and we say name is e.target dot value now we can pass in this handle change function to the form control input so we say on change is equal to handle change now we want to update the save changes button here to sum in the request when we click on it so above the return statement we say cons handle save changes is equal to an async function within here we say await handle update we pass in record.id and an object here and within the object we say name is record.name and after the to-do is updated we want to close the model so we say handle close now we need to pass in this function to the button here so scroll down for the second button i'm going to change the on click to handle save changes now let's also update the first button so that when the user clicks on it it's going to close the model so in here we say handle close now we should also update the model component to include the prop of on height equals to handle close now save the file okay we need to import usa from the app now save the file again and the error should be gone now we should also pass in the show state to the show pro of the model component so i will change this to show equals to show and save the file again now we can give this a try on the browser so if i click on the edit icon of the first to do a modal pops up with the to-do text here so i'm going to change this to update meeting notes and click on the save changes button and a patch request should be made to the back end with the name of the updated text i provided and as you can see the to-do is updated now if i open the model and i don't want to edit this to do here if i click on either this icon or this close button here it should close the model now we can update the app to support deletion of the to-do so inside the to-do list component we want to add in another function called handler delete above the handle update function so in here we say handle delete and it will accept the id of the to-do within here we say axios dot delete and we pass in slash api slash to lose slash then we pass in the id and we pass in another slash here and we write the dense statement and we say cons new to loose is equal to to do stop filter then we want to return t id is not equal to id and we run set to rules to new to loose so we are just removing the deleted to do from our reaction as for error handling we can just alert out something went wrong now we want to pass in this handle delay function to the daily icon here so go to the render list group item function and we want to update the mdd icon so we pass in the on click pro and we pass in a function here within here we say handle delete then we pass in pe.id now we can save the file now let's try this out on the browser so i'm going to delete the first to do by clicking on this delete icon here and as you can see a delete request is made to the backend and i'm getting back empty content here but i'm getting back to offer no content as the response which means that the to-do is deleted we can verify this by refreshing the page and i'm still getting only one to do here now we want to update our app so that incomplete to-do's are shown before completed to do's so above the return statement of the component we want to add in cons completed to loose is equal to to do store filter and we want to return p dot completed equals to true then we write cons incomplete produce is equal to to do stop filter and we want to return t dot completed equals to force now we want to update our return statement here so i'm going to change the to-do store map function to completed to-do's not map and i will copy this entire list group component and paste it and i will change computer to do's to incomplete to-do's we also want to display the count of completed to-do's and incomplete to-do's so above the list group item i will add in this with class name of mb2 and mt4 within the div i will say incomplete to lose and within here i will say incomplete produce don't link now i will copy this and paste it above the second this group item component and i will change the text to completed to lose then change the incomplete to-do's to completed to loose now save the file and our changes should be reflected okay i made a mistake here so for the first list group item it should be incomplete to loose and for the second list group item it should be completed to loose now save the file again and we can see that incomplete to-do's are shown before completed to do's so i will add in a new to do and i will mark this to do to be completed and we can see that the completed to-do is being displayed under the computer to lose text here now as a final touch if you want to commit your changes with git you will need to add in a dot git ignore file inside the root folder so i will add in dot git ignore and for this file we can copy a template available from github under the git ignore repository so in here you can find the python dot git ignore file so we can just copy all of the content here with this icon here and paste it to our dot git ignore file now if you are using mac os you will need to update this file a bit to include the ds store file now we can save the file so that's it our to-do app is completed if you enjoy the content you can also check out this course on udemy in this course we will further explore how we can use django and react to build full step web applications and we will cover topics like pagination filtering authentication resetting users password deployment and more the link of this course is in the description below so that's all i have for this video if you enjoy the content please leave a like and subscribe if you would like to see more content in the future thank you for watching

Channel: Harvey Winters

Views: 19,222

Keywords: react-bootstrap, django, todoapp, tutorial, hooks

Id: OSYAjTG46EI

Length: 38min 19sec (2299 seconds)

Published: Sun Mar 27 2022