Django + React Notes App

hey what's going on everybody and welcome to this stream where we are going to be connecting a react application with a django backend so in this series or in this video what we're going to be doing is building out the back end of an application that we built out in yesterday's stream or sorry in monday stream so two days ago we built out an entire react application and we never really built out a back end so today we're gonna be doing this with django i'm still gonna build out the react application from scratch so if anybody didn't follow that video and wants to still completely follow from scratch you can still follow along we're going to go a lot faster through the react portion just because that's been covered if you want to go through the basics of react and kind of go through that crash course you can follow that video so what we're going to be doing here is for anybody that's completely new is we're going to be continuing this notes application here so it's a simple notes application we can edit items add items remove them and we work with a different way of adding the data along with trimming down the data to render down things like dates and little body sections here with these notes so in this application the point of this is to show you how to connect django and react along with building something cool now if you're looking for just a quick integration i do have a youtube video already on uh i already have a video on this topic it's about 11 minutes long i posted it a year ago or maybe a year and a half ago so if you're just looking on how to integrate a react application into django follow that video and that'll get you straight to the point in this video we're going to go a little bit longer because we are building out an entire application so the whole point of it is to show you that process and build something cool so that's what we're going to take care of right now now uh if you're looking for if you're looking for a full django introduction i do have some links down in the description i have a full django course a react crash course and i also have a more complex django course where we put together a full ecommerce website these are all on udemy if you want to go above and beyond follow those and i also have a lot of other youtube videos on these topics and the basics so we're not really going to be going into the basics of django we're just going to be building out our api and just kind of going through this process i'll try to explain as much as possible but yeah we're just going to get straight into it so let's go ahead and talk about how this is going to work so there's different ways of deploying a react application with django one way to do it which is what i like to do is to build them completely separately they're going to be running on different ports and then i completely integrate them so i drag my react project once it's complete into my django application and i serve it from django and this is server side rendering now there's a lot of different ways to do it as far as maybe completely separating them you could use something like netlify and then deploy your django api on one end with heroku or something like that and then have the django application completely separated they don't have to even know about each other all they have to do is talk to each other so um one second i see praveen telling me to hide this button there there we go so there's a lot of different ways to do it and what i want to do is show you two ways i'll try the netlife version where i'll completely separate them we'll have to work with something called cores where because they're not in one application we need a way for them to talk to each other and then we'll also do the full integration so let's go ahead and just get right into it so we saw the product demo i highly recommend if you don't know react and if you want to get an intro check that video out because we're going to be going a lot faster but so if you want to build this out from scratch go ahead and watch that one it's also linked up in the video description so at this point uh if you want to get the source code to this project if you want to follow along in this stream uh this link should also be linked up in the video description let me know if it's not there and at some point i'm probably going to update it with the code that we're going to write today so the file structure is not the same maybe the names of the files if they're not exactly the same these will be updated later but the link will probably remain exactly like this so if you want to follow along i highly recommend go ahead go to github clone this and that should get you started so with that being said let's go ahead and take care of the django version first so or the django side so we're going to build out our api so that means we're going to set up our django application we'll install the django rest framework we'll make sure that we have an api and after we build out our first two routes which are going to be to get our notes and to get a detail of a note we'll start with the react side so a build out the react version of this will make the api calls and then we'll continue adding in different routes and different endpoints for things like adding for things like adding updating and deleting items so we'll go ahead and get right in there so source code link is there i'm seeing somebody comment that let me just make sure that it's in here give me one second here so just pull that up i just want to make sure that everyone can actually follow along here so the source code link is there okay so yeah it's all ready go ahead and download that i'll give everyone a second i'm just checking the chat here all right so we have 92 people in the stream right now let's go ahead and get started this stream will be posted after so for anybody that wants to watch it after and is worried about missing something this will all be posted after i always make sure these streams are available so the first thing is let's go ahead and get started with the django site so remember we're going to build them out as two separate applications at this point so let's go ahead and first make sure you have python installed so if anyone doesn't have that i'm guess i'm gonna go through a little bit of a crash course make sure you have python installed we do need the pip package manager so we're gonna be using that to install django and we also want to install virtual env after you have python installed so we're going to set up our virtual environment and we're going to use a command prompt for this at first and then i'm going to use vs code and use that terminal so let's go ahead and cd into whatever folder that we're going to set up our project in in my case i'm just going to keep it in the desktop let's see someone's saying it's a private repo is that the case give me one second i might have actually said it as a private repo and didn't realize that so let's see yeah you're right okay so it's private let's go ahead and change that setting here sorry about that okay so i'll make that public and make sure to confirm that all right so now it should be available okay so let me know if it's still not working but it should be a public repo now so there we go now it says it's public okay so i'm gonna cd into my desktop that's where i'm gonna keep my folder or my project so wherever you're gonna keep it make sure you cd into that file and let's just first install we'll do pip install virtual env okay so there's different ways to uh to have to set up a virtual environment i like to use the virtual mv package so we'll just use that if you have another option go ahead and get that going and technically you don't need to install the virtual environment but it's really good to separate your application so you don't you don't have conflicts with other packages that you install in different projects in different environments so we're going to set it up and make sure it's all ready so once you have virtual v installed pip works because of python we're just going to do virtual env and then i just like to call my environment env you can give it whatever name you want but we're going to set that up and that's going to create a folder on my desktop because i ran that from my desktop so now that i have that i'm going to activate my virtual environment so we're just going to do env backslash scripts and then activate and i am running this from a windows machine so it's going to be a little bit different on mac i'd recommend looking that up and now we have our virtual environment set up so i want to install django inside of this virtual environment so we're going to pip install django and that should give me the latest version so that's going to take a second here and once we have that we should be able to set up our project so give that a second here so what we're going to do here one way of setting up the virtual environment what i like to do is actually take my virtual environment and put it into my django project so i always know where it's at so at this point i just installed django here so i'm going to create the django project right now so we installed it and now we can just run django dash admin and then we're just going to do start project and this is going to set up a new django project for us so we're going to do start project and then give our project a name so we'll just do um my notes like that so we'll just keep it consistent like we did in the last video so now we should have some boilerplate files here for our django project so if you can see my desktop i'll just make sure that you can see everything so we see my notes and my virtual environment so what i'm going to do here is actually take my virtual environment and move that into my django project so i like to put them together and they're going to be in one folder now so i see somebody asking if we have authentication in this video no in this case we're not going to do it i have a lot of videos on that and we'll be doing a lot of react and django authentication in the future so if you're using your command prompt go ahead and cd into the django project so whatever you called it in my case i called it my notes so go ahead and cd into it and then just turn on your server so you can just do python manage dot py run server so that's going to get your django project started and it's going to turn up or start up your development server so what i'm going to do is actually close this out and i'm going to open this up from vs code so i'm going to go ahead and prep this and i'm going to use a vs code terminal so we'll go into the folder and this is definitely my favorite text editor the theme that i'm using is atom1darkpro for anybody that wants to follow that so we're gonna open up our django project the one on our desktop and here are our files here so i see the virtual environment my django project with some default files here and some folders so from the terminal you could just do control tilde and that's on the top left of your keyboard usually it's like this weird looking backtick thing or you could just go into terminal and just do new terminal and go ahead and start that up and that should be in your django project already so make sure the file path is there and now let's actually turn on that server so we'll just do python manage dot py run server okay so all we did was install django we turned on our server don't worry about these errors we'll take care of that in a little bit here so let's go ahead and check that out make sure it's all working so it should be on port 8000 so copy that right there put that in your browser and i actually have to turn off my other server so give me one second i need to make sure that's off so now on poor 8000 what i do is usually save that tab so all i have to do is click this link right here and that will give me there if not just go ahead and write that out and open up port 8000 so our django project setup we're going a little bit slow and we're going to start moving up here so we have that set up what i want to do is build my first app in django and if you don't understand what apps are that's also covered in my course i have a couple of videos on that but basically a django project is constructed of multiple apps and these apps are where you contain all your business logic where we're going to build out our api and our database and so on so things like that that's all going to be inside of an app so here's a django project so let's go ahead and we'll leave the server on but now we want to start our app so i'm going to open up a new terminal if you're using the command prompt you could just open one up or another one up or you could turn it off or turn off your server and just run this command again so what we're gonna run now is python manage dot py and then we'll just do start app and i'm gonna call my app um in this case we're only gonna have an api and i typically like to manually generate my api by creating the folders but in this case i'm just going to call it api and build it out of an app here because i'm just going to keep the database and all that inside of one app so the entire api is inside of an app so once i run that here we go we see that folder we see our models where and this is where we're going to design our database we have our views and we're going to build out our api so let's connect our app really quick so at this point what i want to do is go into my project here so the root directory inside of the main project folders inside of settings.py we talk a lot about this inside of my django course so if you want to get familiar with it on youtube or udemy i have that we need to connect our app to our django main project here so let's go ahead and go into our app so we're just going to go ahead and add this to installed apps we'll go into api so we're going into this folder here and we need to point to apps.py and we need to point to this config folder what this is going to do is connect our core django project to the app that we just added and that app is going to sit inside of our django project so you can see that file structure there so we'll go into api dot apps so we're going into that folder and we're going into app config okay so we connected the project here and i'm just going to go ahead and install this for vs code that's just a python thing here so we'll give that a second we see those kind of things i guess do what you feel is best i just by default install those so we connected the app and what i want to do is just generate some kind of url and connect that so let's go into our app which is api here we'll go into views and i'm just going to import a simple uh json response method here so we'll just do from django dot http and we'll just do import json response so we just want a view that's going to render out a simple json response so we'll create the view right now and let's just call this get routes so this view is just going to specify all the routes inside of my application we need to pass in the request object to that for the http request and we'll just do a return and then we can do http or json response and at this point we'll just say let's just say our api or something like that so we just want to be able to see it so our api and then inside of a json response we need to pass in save and we're going to set this to false and safe just basically means if i'm going to if i remember it right and then oops i turned on my phone there so this just basically means that i can return back more data than just a python dictionary so that's what safe is going to do for us if i explain that correctly and let's go ahead and call this route now so we created our first route and we want to go into our api now the api folder and let's create a new file for our url so we're going to call this urls.py and in here we're going to create all the url routing for our app so every single route that the user goes to or you can think of it as a page so every single endpoint that the user goes to this is what we're gonna uh where we're gonna configure it so we're gonna make a quick import so from django dot urls we're just gonna import path here so we need that we also wanna import our views so they're in the same file structure so let's just go ahead and get this view so we can render that so we'll just do from and then the same directory just import views like that now we actually need to create the url pattern so we'll just do url patterns so why not write an ordinary api well in this case i'm only doing this in side of i'm only creating my database inside of one app so there's no need to actually separate the database from the api so that's why i'm just making it quicker here so url patterns this is going to be a python list and we're going to use the path method to specify the path so the path method is going to specify the route that we need to go to so in this case the first route is just going to be an empty string that's going to be like the home page then we need to specify the view to trigger this on so we're just going into the views folder and we're going to render get route and somebody asked me why i'm camel casing this for functions i always camel case them for classes i just make sure that every single first letter is capitalized it's just a a form of doing it's more of a my preference so in this case i will add a name here so we'll just do get or we'll just do routes like this so we can also add a name to the path and that allows us to access this dynamically not sure if we'll use that so we created a view that's going to give us this response and a json response we have a url and the last thing to do here is to connect this app's urls file here so we have a urls.py file we need to connect this to our main project here so in the root directory if we go to my notes let's go into the rootdirectoriesurls.py file so there's two urls file right now or url files and in here we're first going to use the include method and we're going to create a pattern for that api route so in order to go into the api urls file we're just going to go ahead and specify the empty string which means that when we set this as a path go ahead and use the include method and then go into api so into this folder and then go into this urls file so we'll go into api.urls so we're basically saying let this file take care of all the routing for every path that starts with this so now this file will take care of it and let's check this out let's see if we have any errors so we do have one error inside of settings.py we have api and then this is supposed to be api config sorry about that so it's supposed to be the app name right there okay so now it looks good on poor 8000 everything should be running correctly so let's check this out if i refresh it now we don't get the default uh response there we see our api so that's what we just set up in the view so we just connected this so what i'm going to do here is actually add in some endpoints so we can actually see what the routes are going to look like so in this case i'm just going to copy and paste a python list of dictionaries so we're just going to copy something from my source code so that's actually inside of the project inside of github here if you want to go in here go to in this case it's no api then we're going into the api folder in views and we're just copying this right here so let's just grab all of this and you don't need to do this part i'm just specifying some routes here and the methods that are going to go with it so i'm going to minimize the terminal here and let's bring this into our views here so inside of get routes here the whole purpose of this view is to specify all the endpoints so once i do this i'm going to take routes here and i'm just going to pass that in here instead of our api so we'll just do routes and that's not going to be in a quote okay so now in our api response we should see this so it looks a little bit ugly right now this is what the django rest framework is going to take care of for us so we'll do that in a second but at this point here are the routes here so the first endpoint is going to be forward slash notes now this is going to give us a json response of all the objects or all the nodes inside of our database the method here is going to be get and then the body well we don't need to specify anything in the body so that's just set to none and then there's the description of how it works and what's happening now the next endpoint is going to be to get a single note so in this case we're going to notes and then we're passing in the note id and this is how we're going to query the database for a specific note the method is going to be get and then if we continue here to create a note this is going to be a post method we pass in what we need for the body and so on so this is what we're going to be building out and we have that inside of our first view so i'm just going to minimize that and that's all in here now okay so the next step here is going to be to set up our database so now what i'm going to do here is create a model and that's going to be inside of our app here the api app and in models.py for anyone that isn't too familiar with django this is where we create our database replica of how we want our database tables to look like so in this case we're using python classes that inherit from a django model and then every single class is going to represent a table on our database or in the database and the attributes are going to represent columns the instances of each model are going to be the rows in the database so uh someone's asking why we don't use json formatter well we're not going to need it especially once we work with the rest or the django rest framework it's going to be way easier than that and also json response works just fine so let's go ahead and actually design our database in this case we're only going to have one model here and this is going to be for our note so let's go ahead and start building this out so in this case it's going to be a python class so we'll do class we're going to call this note and this needs to inherit from models here so that's already imported by default so we'll just do models and then we'll just do model and the model is going to be with a capital m now for the attributes i'm just going to specify the body here and this is going to go from models dot text field so it's going to be a text field and let's see i'm going to set null to true and blank also to true for now usually i change these but this just means that it can be saved in the database without an actual attribute value so that's null and then blank also means that we can't submit a form where we can submit a form with no values this was set to false which is what that is by default then we wouldn't be able to actually submit these values okay so i'm just going to bring my face and i realized it wasn't in the frame here okay so after that we want an updated value so we want to know when a note was updated so we're just going to do models dot and then we'll just do date time field and in this case for the updated value we're going to set auto underscore now to true here so auto now means that every single time the save method is run on this method so every time we save a note it's going to take a time stamp of when we saved that note and added it or updated it in the database now the next value is going to be created and created is going to be a lot like updated here so we're going to do models dot date time field and then we're going to specify auto now and then we're going to do add and that will also be true so the difference between auto now and auto now add is that auto now add only takes a time stamp on the creation of that model so on the first creation of the note we'll take a time stamp we know when it's created and then next time we save it this will not take that timestamp but updated will because this is auto now on each save and then auto now add is on the ad or on the original creation of it so that's the difference between the two now what i'm going to do is also create a string representation of it so this is a python class we want to make sure it looks good as far as the string representation when we use this from the admin panel so we'll create the string method pass in self and let's just return the body here so we'll just do self dot body and we're just going to do the first 50 characters so when i'm saving this a lot of these notes can be extremely long so we only want to get the first 50 characters and trim that down so that'll look a little bit cleaner and that's it so that's the only item we're going to have in our database and now if i open up my command prompt i'm actually going to turn off the server and we want to take care of this issue first so what i'm going to do here is run my first migrations so this is telling me to run python manage.py migrate now if you have the basics of django already figured out and you understand this you know that we start with an sqlite database by default it's right here in more of a production environment i'd move to something like postgres or mysql but django gives us an sqlite database to start with so it's just this file right here and it's good for development so we're going to run these migrations and what's happening here is django already has some default tables built in for us for things like our user for sessions and different items in our database so django has these prepped and when we run migrate we're just getting all those preparations these migrations which are basically like sql commands and we're going to execute them and these are going to build out our database tables so we'll just run that really quick so python manage dot py migrate and that just ran our first initial migrations so if i want to add this model to the database the first thing i need to do is i need to run python manage dot py make migrations so what that's going to do is it's going to create a migrations file here and if we look at that this is the first migration it just generated this and it's saying that when we run our migrate command this is what we're going to execute and build out in the database so now we need to execute that so make migrations to prep the migrations and then we need to execute that so let's just do python manage dot py migrate so that's going to take this migration and now execute it so we're going to see applying the migrations and we just applied all the migrations inside of that file so that was done really quick for us one of the really cool things about django and this built-in orm makes this process really easy so sorry about going slow here we're just going through the first steps as slow as possible and then we'll go faster here so we have our migrations made so we have our database set up and at this point i need to create a user so one of the tables that was auto-generated for us was a user table so we don't actually see the model here but we already have one and in order to access the django admin panel so let's actually try this so python managed py run server almost forgot the command here so if we go to our root directories urls file let's take a look at this so inside of our main project so my notes urls we have this path and it goes into forward slash admin so if we want to go to the admin panel and actually view our data we just go to port 8000 forward slash admin and we should be able to just log in and go into the admin panel and actually see our database this is like a viewport and a simple way of working with the database so what we're going to do here is actually create a user to access that so we can't access that table or that admin panel until we create a user to actually log in so i'm going to turn off my server and let's just go ahead and actually create a user so we'll do python manage.py create super user and then we just hit enter and if i'm going to leave this blank that means it's going to name my user dennis ivy based on my computer name or i could just write it out like that whatever i want here that'll create it it's going to ask me for an email we'll just use some kind of some kind of fake email we'll just do dennis email.com and then i'll type in some kind of password so as i'm typing we're not going to see the password but it is being typed in it's just going to confirm it for us and let's run our server again someone's asking me why i'm not doing harder projects i actually am going to be adding in tougher projects but at the same time i also have why can't i run that i also do have uh tougher projects on django and react specifically on udemy where we create a full ecommerce website so okay i keep running run servers while i'm talking okay so the server is on now there we go okay so now that i'm in here i can go to the admin panel and my password should be auto filled so just go ahead and type in your credentials and here we can see some default tables so i see the user i just created and in order to actually see the database table that i just added the models one what i'm going to do is go into my app here so api and we'll just go into admin dot py and i need to import my model and then register it with the admin panel this isn't a necessary step but if you want to use your models inside of the admin panel you do need to register them so let's go ahead and go into the models folder so we'll just do dot models it's in the same directory right here and we'll just do import note so that was the model name we're just grabbing this importing it and then we just need to register this this is going to be admin dot site dot register so we're passing in note and now if i refresh it we should see this note this thing pop-up keeps messing up so if i refresh it there we go we have our notes here so let me try to zoom in here so we have our notes and let's just go ahead and add a few nodes so we'll just say note number one and then we'll just do one two three here so let's make a replica of a note we'll just do two of these and then the next one we'll just do second note okay so we're actually able to deal with crud functionality from the admin panel now we want to build this out on our own this is just good for getting set up really quickly but we don't want to actually have to handle this from the django admin panel we want our own system here so i just added some notes really quick and the purpose of this was to get the first part of our api built out and we just want to be able to query our database and render these items out after we serialize them so now that we have two notes let's go ahead and move on to the next section and that is to to work with the django rest framework so the django rest framework is an awesome package built on top of django that allows us to make apis with django so we could do all of this manually we could try to serialize our objects here and try to render those out but there's a lot of built-in methods that the django rest framework gives us so we're going to install it and then work with that so let's go ahead and open up django rest framework so this is the documentation it's a package on top of django so the django docs are going to be a little bit different from the django rest framework docs and let's just go ahead and get this installed here so here we see this pip install so it's pip install django rest framework and then we need to add it to installed apps so let's take care of this now so we'll minimize that terminal okay and let's go into actually we want to do that from our terminal so i'm just going to open up a new one here copy and paste that so it's pip install django rest framework all as one word so i just want to make sure you can see that so we're going to run that pip install and hit enter for some reason that did not run so one second i might have to do python dash m pip install django rest framework okay so that took care of it so just because of my setup i have to run python dash m you might not have to do that so go ahead and run that install that will give you the latest version of the django rest framework and then we need to add in rest underscore framework to install the apps inside of settings.py so read through the documentation follow along it's really good to follow tutorials but also read the documentation yourself and you might find something or maybe better understand something that was said inside of a tutorial like this so i'm going to add this just underneath my first app installation here so that's rest framework and we just added that so we ran the pip install and now rest framework is installed so what i want to do next here is actually start working with django rest framework views instead of the default views that i have here so if we go into views at this point we're just using json response and this is already built into django it's a simple json response but it's actually not that powerful if we look at our api here it's very plain it gives us our data in a plain format and we want to have some styling to this along with the advanced methods that we get with it so let's go ahead and change this up a little bit so now that we have the django rest framework installed what we can do is actually import a package called a response and then actually use that to return our data so we're going to completely get rid of this and we're just going to do from rest underscore framework and we're just going to import response and that's going to be with the capital r so we have response here and now all we need to do is take response and change that from a json response to use the response import let's see and that's from restframework.response here so we want to change that and there we go okay so now in order to use this i need to tell this view to be a view using the django rest framework so there's class based views and there's also function based views i really like function based views especially in tutorials like this so what we're going to do here is use a decorator on our function based view and change up this route here so remember i didn't delete my routes i just minimized them so they're still here so let's go ahead and import that decorator so we'll just do from rest framework dot decorators let's just import api underscore view so we're going to import that and here just above the function or the view we can just do at api underscore view then what we need to do is pass in a list here and we need to specify all the methods that are going to be allowed to this view so these are the http methods so get put post delete you can add in multiple in this case i only want a get request at this point so there's no need to send a post request to this view so that's all we're going to allow so that means if someone tries to send a post request to this view it will not work if we wanted to add it then we would just do post and then continue on like that so now that i have this let's see where is that okay here we go let's check this out so if i refresh this uh save okay i don't need save with response so we need to remove that that's only for the json response so that's also a little bit nicer about this method if i refresh that there we go so what i get now is my json response but it's more formatted so i still call this data like i would any other api but when i go directly to it i get to see my information right here formatted like this it tells me some information about it it looks a little bit nicer we see the indentation and it just looks a lot cleaner now if i want to actually view this as simple json data i can just click on that and it adds that to the end of the url and formats it for me so here are all my options here for this route tells me the method and so on so it's a lot cleaner not that cool right now all it did was style uh just our rest api here so we have that built out and what i'm gonna do here is add in another route here really quick or two more routes and the next one here is gonna be to get all of our notes from our database so we're just rendering out this python list right here all these uh dictionaries in that python list but we want to actually get some data from the database the things that we added in our admin panel so we added some notes here we want to query the database and then render these out as a inside of our api and these need to be serialized before we can do that so these python objects need to be serialized before we can actually render them out so let's go ahead and do this real quick so we're going to create another method here and we're just going to call this get notes so we'll go ahead and just pass in request here let's put the decorator above it so we'll just do api underscore view and this is going to take a get request then for the return method we'll just do return response and we're just going to pass in our notes for now i'm just going to pass in a string like that so we'll just do notes and that's it so for the url i need to connect the url now we're going to create another path here and we're just going to notes like that with no forward slash so let's go into notes and we're going to views dot get notes and let's pass in the name and we'll just throw in notes like that so we just created a route and let's check that out here so now if i go to my api poor 8000 forward slash notes now we see this so there's our response we want to actually get that data now so we have another route to get our notes now so let's go ahead and actually query this data and before we can do that typically inside of django what we could do is just import our notes so we're just going to go into models here and then we're just going to import note like that then we can go into our view here we can just go into notes then we can do note objects dot all that's going to get all the nodes from the database now this can't be passed in right here these are a this is a list or a query set of python objects here so what we need to do is serialize the data and that means it's going to take our python objects and turn those into json format so in order to do that we need to create some serializers so inside of our app the api app we're going to create a new file and we're going to call this serializers okay so that's serializers.py now we're only going to have one serializer here but typically i would create a file for that and then just add in all the serializers so later on if we had different models and objects we would serialize those too but for now we only have the one so inside of our serializers.py file we're just gonna do from rest framework dot serializers we're just gonna import model serializer so we have that import and now for the actual serializer all we're going to do is we're going to create a class here and this is going to be a serializer for a specific model so the method that i like to use is put the model name and then just add in serializer after so we're going to specify the model that's the note and then we're just going to do serializer so serializer you can never spell serializer it's a weird word for me okay so note serializer did i spell that right yeah that looks correct so far if i misspelled that let me know try to watch the chat here okay so we have that serializer and then we imported model serializer so there's different types of serializers that we can make so in this case we're going to use model sterilizer that we just imported and for a model serializer all we need to do is specify the model name so we'll specify the model which is going to be imported we'll just do from models import note and we need to specify the model that we're going to serialize and then the fields that we want to actually allow here so the fields that we want to serialize so in this case i'm just going to do all like that so this means every single attribute in this model serialize all of these now if i only wanted to serialize the body i could just add that in a list here so this would be a list and i could say body and then another field i can just do updated and so on so i can manually specify these or i can just say go ahead and give us all the fields so now that i have my serializer let's go ahead and save it and let's go into our views and import that so we're just going into from serializers so it's in the same file structure right here let's import note serializer okay so we have that serializer imported and we're just going to go ahead and specify a variable so we're going to call this serializer i keep saying serializer i'm actually annoyed of myself right now and in this case we're going to use the note serializer so we're using that import that we just made we're passing that in and we need to tell the note serializer what we want to do here so we're going to pass in the notes into that serializer then we need to specify many and this is going to be either true or false and what this means is do we want to serialize multiple objects or a single object so in this case we're going to pass in just one object here or multiple objects so that means we're going to return back a query set now serializer itself is going to be an object so to return this to the front end we're going to do serializer dot data so we want to get the data out of the serializer so we'll go ahead and save that and let's go to get notes now so we've got the notes we serialize them and then we return that specifically the data value there so now if i refresh this we're inside of the notes route if i refresh that here we go so we have a list and now this is json data we see the first object so we see where we see the first note then we see the second note with the timestamps i see john wood is in here good to see you john so we serialize the objects and now we have our data so that's the first part of our api and i'm going to do i'm going to make one more route here and that's going to be to get a single note and then we're going to go to the react part and build out the front end and actually get this data so let's go ahead and add in a new route and for this all i'm going to do is copy this route right here and i'm going to change this to get note so it's a single note now the method is still going to be get and in this case we need to pass in the primary key so the id of the specific node that we want to get then for the query method here we're going to do get instead of all and we are going into the id attribute and we're going to say go ahead and get the parameter that we get out the parameter that we get out of the url which is going to be pk so the current id go ahead and filter the notes and get the current note that value or that matches that value so we're getting the note we're passing it into the same serializer so it's the same object and we're going to specify many to false here that means we only want to serialize one single object so we have the method so it's get note just making sure everything's good and now we want to create the url parameter for that so we'll go to urls and at this point let's just copy notes here and let's just pass in the angle brackets here we'll do str so i'm going to set that to a string value and we'll just pass in the primary key so we called it pk here that means we need to call that pk inside of the view here so we'll save that and then the method is going to be get note not get notes that's going to be no so i just remove the s here out of these two here i'm going to leave it like that because that's typically how you build out a restful api you would still specify the query set name and then you can pass in a parameter after so at this point what we're going to do is we're going to make our api just a standard api and then at the end if we have time i'll make it actually follow restful practices so there's a difference between an api and a restful api so i'll kind of show you the difference there so let's go ahead and save that and at this point if we go to that url we should get back a single object so in order to get this note all i have to do is go to notes and then pass in the id and there we go so we see this object if i go to the first one so id number one we get the first or the note with the id of one if i go to three because we don't have that id i'm gonna get an error so that means that we don't have a query set that matches that i could write a condition that checks for that at this point we're just going to leave it so let's go ahead and continue here so somebody's asking about model view sets i've used those before i'm actually not a big fan of them and my biggest issue with this is when i'm teaching people the beginner levels of this kind of stuff there's a lot of magic that happens under the hood that people don't understand and while you could create the views it makes it hard to understand what's actually going on so that's why i prefer starting with function based views and somebody's asking for my wallpaper i'll just have to link that up it's just a picture i'll just link that up maybe in the source code so i'll just put it there okay so we got the first part done we have our backend we have a database and we have an api with two endpoints so we can get a single note and we can get a list of notes so let's move on to the react portion of this so we still have some things to do on the back end we still we are still gonna come back to this but now what i'm going to do is open up a completely new project and we're going to start the react portion and then just work with with both servers on here so at this point for the react project make sure that you have npm or uh nodejs installed this is in the tutorial that we did on monday or two days ago make sure you have nodejs installed we do need the npm package manager and we also need npx which helps us execute these commands so let's go ahead and run that so we're going to do this from the command prompt so i still have vs code open with my django project and we're just going to cd into my desktop so i'm going to keep both projects on my desktop they're going to be next to each other and i'm just going to do npx remember make sure you have node.js installed so go to nodejs.org and just download whatever version you want i would recommend the lts version so download that first and then run npx create dash react dash app so just like django dash admin start project created our django boilerplate files for us create react app will do the same there's different ways to create react apps but this is going to give us that core boilerplate file structure without having to manually do it for us and it's going to configure a lot so at this point let's just call our react project front end like that front end so you can call it whatever you want in my case my react project is going to sit inside of my django project so i have my main project and then this is going to take care of everything on the front end so that's why i'll call it that so you can name it whatever you want this is going to take a few minutes here maybe one to two minutes so i'll just watch the chat for a second so while this is happening let's jump into the chat so let's see who do we have here so somebody's asking how could we can you please show us how to query params like that where we add in the question mark that's um i mean i do that in tutorials that's a simple search parameter you would just add in that url as you're showing right now and you would just have to in the back end so let's say that was your request right there let's say you did four slash notes and then the id in the back end because that's coming from a get request you do something like this where you can go into request dot get and then you can do dot get use the get method and then you would just grab the id so if the method is oh one second here we go okay so you would just do that right there so you just say something like id is equal to or param whatever you want to call your variable and then you would just do request dot get so you're getting the get method from the request object and then you're getting the id value so in this case your name of that parameter is id so if you called it anything else you would just change the name for it so i hope that answers a question i guess that one wasn't that hard to show so the react project is still installing let's see change notes to get note where is that okay so we have get notes and get no i don't know what you mean by that let's see in the urls it looks good to me i'm not sure what you mean by that or maybe that was just earlier good to have everyone here let's see i appreciate that appreciate the hellos here everybody i'm hearing a lot of stories about people getting jobs by learning this kind of stuff it's so cool to hear if you have those share them with me i absolutely love love seeing this kind of stuff okay so let's see someone said i didn't get the django rest framework error response format errors inside of errors can you show us how to handle that so the api can be easily easily integrated in the front end well there is uh let's see if you go into the django rest framework documentation let's see somewhere here you can see you can work on the error handling section and there's ways to create your own custom errors so you can actually generate your own status code so i'd recommend importing status and then have some kind of response or have some kind of logic in your view that checks for these errors and then render out your own responses you can specify the message that comes with it and then the type of response or error response that you're going to generate if a specific error occurs so i'd recommend working with that all right so the react app is done so we're going to get to that now so just want to spend a minute in the chat and let's continue so the react app just got set up here at this point we already did this in the tutorial but you could cd into your react app at this point it's not going to be in our django project so go ahead and cd into that if you're working from your command prompt and then just do npm start like that and that's going to start your development server and if i start that we're going to see this pop up in a second it's going to open up my base react project so just like we got the django base project now we have the react project running on port 3000 so this is what reacts set up here so i won't go into a full description of react we're just going to start building watch the last stream or the full course in the video description okay so let's continue here so i'm going to open up vs code here and i'm going to open up a new window so i'm going to completely separate the two right now so now inside of this project i'm going to open up the folder and that was on my desktop and i called that frontend so go ahead and open up the new react file if you're following along or if you're watching this after and here are my core react projects if you follow the last stream or the crash course linked in the video description you'll know that we're going to work with the source folder so this is where we're going to build out our app here so let's go ahead and clean a few things up so the first thing is i'm going to remove setup test right here so this is inside of source we'll remove that at this point i don't need these so we'll just get rid of these folders we'll get rid of report web vitals we'll get rid of logo.svg and we'll get rid of index.css and then app.test.js and we're just going to be left with index.js app.js and app.css now in my development server i am going to get errors so if i open up that react project on port 3000 we're going to see some errors here so let's fix this really quick so let's go ahead and go back here we'll go into app.js let's first get rid of the logo then inside of the app component let's get rid of everything from header from the opening to the closing tab we'll save that then in index.js let's get rid of web vitals here so we imported that now we don't have it so we're going to get rid of it we'll get rid of that import and index.css and then let's go into our css file so app.css and let's get rid of everything from here to down here okay so now we have our base react project if i refresh that we have nothing in here let's just go ahead and add something so we can see it so there is hot reloading so if i just add in my app we'll save that and that is going to appear here so that is my react project this is all we have at this point remember if you're not following along here for the react stuff if things don't make sense watch the video in the link description that's the full stream to the react crash course and there's also the udemy course for that so we have our react project and what we're going to do here is we're going to build out some basic components we're going to call the api data so i want to connect django with react then we'll style it we'll add in all the closing routes like delete create and update and then we're gonna officially link the two by adding and react into django so we're gonna take care of building out the components and then calling the data so at this point what i'm going to do here is create a folder for our components so we'll create our components here and we're going to create a folder for our pages remember everything in react is still going to be a component but some components will represent pages while others will represent actual components inside of the ui so let's go ahead and first create a header component so we'll create a new file and we're going to call this header.js and i'm using a shortcut here called react or es7 so es7 code snippets i talk about this in the stream and i have these shortcut methods that i'm going to type out that are going to generate react components and imports so we have a list of shortcut methods here and then this is going to generate this code if i type in little shortcuts like that and also my components will be generated using these shortcuts so i'm using arrow function components so in this case i'm going to do a shortcut like r a f c e which stands for react arrow functional component exported and that's going to generate a component for me like that so that's a good one and then auto rename tag is something that i use this helps me generate or edit a tag here so if i start to edit an opening part of a tag the closing tag will also be edited so i don't have to fix both ends so you type component i'll fix that here in a second so auto rename tag is good and then i also have something called prettier i talked about this in the last video but we'll recap it prettier code formatter this allows me to save as i'm coding and it just indents my code and fixes it according to the language that it's supposed to be working with so let's see did i misspell components i did okay we'll rename that components and there we go so we have a header component and i'm going to use that shortcut so we're going to do r a r a f c e so react arrow function component exported we're using function based components and here we have a function with a return method and that's returning back our html or jsx so in this case let's just go ahead and add this we'll add in an h1 tag and we'll just say our header so we have the first component and we are gonna go into app.js import this component and then add it to our application or to our main page so we'll just do import which i can do imp that's a shortcut from the es7 code snippets and if you're using vs code you can install that and then we're going into the components folder and we are going into header so we'll just import header so import header from components and then we're going to header.js and to use a component here we can just do header like that that's with the capital h if i save that this component is now imported into my application so we have our page and we have our header component all right so let's move on to our notes page now so now we actually want to create a page and get some data so we're first going to get make an api call this is all going to be within one page and then we'll use the react router to actually add in some pages so we'll go into the pages folder and in here we'll just do notes list page dot js so we're going to go ahead and create the react arrow function component exported and for anybody that doesn't know how that works a shortcut generates the component name based off of the file name so we'll just call this notes here we won't add any tags here we'll just throw in notes like that and let's bring this into app.js also so we'll just go ahead and import in this case the import is going into for slash pages and we're going into notes list page and we need to import i made the wrong kind of import so we need to import notes list page like that so i did imd which is a destructured import so we'll save that then let's grab that import and we'll just do notes list page forward slash and close that off okay so we have our header and we have our notes list page i see shubo is in the chat that's my designer does awesome work he designed this app at this point all we've done was build out our django backend with the api and we just started with the react side so that's all you miss shivo for anybody else that's catching up and let's see okay so there we go so we see our notes component and we see our header component yeah shivo this is going to be a little bit of a recap of what we did on monday but it's going to be a lot faster because i'm just connecting the two so before we start working with different pages let's actually make some api calls and query that database so we're going to call the django backend at this point we have two text editors open or if you're using the command prompt we have two terminals open so we have our poor 8000 running that's where our api is at and we have port 3000 this is our react front end and it looks like i actually turned it off so let's just do npm start turn that back on all right looks like i already had it on that's weird give me one second let's see i thought i completely had it off but apparently not so npm start and it says i'm already running on port 3000 not sure why i may have opened that up for my command prompt yes i think i did this if anyone sees what i'm missing here i can't figure out what i did let's try that one more time so npm start okay there we go so i must have uh had it on in the command prompt okay so uh we talked about state in the stream on monday two days ago so now what we're gonna do yeah i see someone just called that out there so it's on the command prompt we're going to work with state and we're actually going to get some data so i won't explain what state is i might recap it really quickly but we can go into our notes list page and in our function based components we're going to use react hooks here so with react hooks or with yeah with react hooks we can now add state to function based components so we're going to import use state here and then we're going to import use effect so use effect is going to replicate our life cycle methods of component did mount component did update and component will unmount so we did a full breakdown of that check that one out but at this point let's just go ahead and do let here and we're going to use the use state method so this is the initial state of our application or of this this specific component or page and the initial state of our notes is going to be an empty array we don't have any data in here so it's going to be empty now the use state method is going to return back the value so that's going to be the notes and then a way to update the nodes so to update the state so we're going to pass in set notes so we have the value and a way to update it so you use state just returns this array and we destructure that so now that we have that we're going to go ahead and use use effect here and use effect is another hook that takes in an arrow function and at the end of it we have an optional parameter here to pass in a list of dependencies and we're going to do that we're going to pass in our dependencies so this is the dependencies on when use effect fires off again and now what we want to do is create a function to get our nodes so inside of this component we're going to create a method called get notes and we're going to use async await so if you're not familiar with this or promises i recommend checking this you know go look up some tutorials online this is a javascript concept here so async awaits if you don't know it try following along you should be able to follow it and then study it later so in order to use a weight we have to make an async function so we're going to create an arrow function and let's go ahead and first make our calls so we're going to use the fetch api so there's also axios there's different ways to do it in this case i'm going to use fetch and we're just going to specify the endpoint that we want to make this call to so in this case we want to go to our api and we're going to go to notes here and just get this data so at this point what i actually want to do is i want to go back to my django application and i actually want to update the urls here so when we go to nodes because i'm going to host my django application inside of or my react app inside of django i actually want this to start with api so every single route that starts with an api will be sent to this route right here so we're going to go into api forward slash nodes api forward slash notes and then the id so the routes are going to change up a little bit so now if i go to that route it's not going to work i just need to add in api like that okay so api nodes on poor 8000 so let's go ahead and grab that we're going to go in here and let's see in fetch we're going to pass this inside of the quotes here we're throwing that in so it's going to make an api it's going to be a get request by default and we want to get these notes and in this case i am going to set the response here so this is going to be response it's going to be a variable it's going to be the response that we get from our api we're going to use a wait so we're going to wait for that data to come back then we need to parse it we're going to do let data and we're just going to do response dot json so that's something that we have to do with the fetch api so if we don't use a weight here what's going to happen is we're actually going to return back a promise which isn't going to be the data so we use a weight to basically say wait till this method right here is done before we continue with the next one so it slows it down and it actually allows us to get the response so at this point what i can do is i can take set notes and i can update this state right here so we're going to take this data so this response right here we want to take this and then pass that into our state so we can actually render that out in our component so in order to do that we use the set state or the set notes method and we're just going to pass in the data and that's going to be a json response so let's just console that out we'll just do console.log and let's see what that response was so we'll just do data and we'll pass in the actual data so we're actually going to run into an error right here and i want to show you the error before we fix it so inside of use effect on the first load of this component when we first go to our website we want to call this method get the notes update our state and then we want to render it out down here eventually so we're going gonna get an issue right now and i see a question is react django a good match absolutely it's my favorite uh absolutely love it react is an awesome front end it's one of the best uh but django is a great back end and it also does really well for building out apis so let's go ahead and see this issue so if we go to our react app here let's go ahead and refresh that and let's see what's going on here so if i try to open up my console here let's see we are returning an issue inside of the promise is that because the fetch failed let's see okay we're going to that path we're going to api then we get the response dot json i think that should be fine so what we should be dealing with right now is actually an error called cores which stands for cross origin resource sharing and i'm just not sure if this error is coming from that coors air right now looks like it's something else let's see if anyone sees the air let me know yeah we'll fix cores and i'll explain to you why we need to fix it too and how this works okay so uh we have the arrow function oh wait no that doesn't look right give me one second let me check my notes here i see someone saying larval is best yeah it's also a really good framework i think it's probably the most popular for php i'm a pretty agnostic when it comes to frameworks like that i tend not to go with one or another i just like python and i think django is awesome and it builds out apis i know it's not as popular as far as a stack on youtube and how people use it but it works great and i like to advocate for it okay so let's see what the heck am i doing wrong here called the async method we have the function we use a weight we get the data await the response all right so sorry about the delay here it's going to take me a second to figure out what's going on so it's saying it's in the response okay so yeah we'll check the network tab i see shoeville saying that hold on this thing keeps going up a little bit too fast okay so here we go all right so it was the coors air perfect i guess that that's a good thing to run into and show you that fix so these cores errors um it's going to look something like this right here and i'll just google it up too so to show you a more common i guess look of the issue so we're running into this air i'll try it one more time so we're seeing this right here if i hover over it it's in red and we see this course air cross origin re resource sharing error so what's happening is uh here let me just look it up another way so we'll just do coors air i'll just google image it so typically it would look like this in your browser and that's why it was hard to find so it looks like this access to fetch so basically it's blocking it and says no access to control origin header so what's happening here is we are running our application on two different ports so react is on port 3000 django is on port 8000 and if you built this inside of your django application this issue technically wouldn't occur but what's happening is react is trying to make a request to django and django is saying hey i don't know who you are and it's blocking it it's saying we don't have any permission to allow anybody other than our own server to call these endpoints so don't don't go here you're not allowed to come here so it's blocking it and that's it so our react application is trying to make a phone call in a sense to get some data and django is saying no so there is a package to take care of this and what we're going to do is we can actually specify a list of urls that are allowed to call our api or we can just say allow all urls to color api or don't allow any so by default it's set to not allow any so let's just go ahead and look up django cores headers and this is a package that we can install and actually use to fix this issue so that's why i wanted to make that request run into the issue issue first and then we'll fix it so we'll scroll down here so uh this is inside of a github link i know they also have a an entire page on this or some documentation on it it's kind of hard to find it as of late i'll link this up in the video description i'll also add it in the chat so we'll throw that in there and that is all in the chat now okay so here we go coors is going to allow us to fix that issue so the first thing we want to do is run this pip install so we'll do pip install django cores headers sorry about that delay i know that's where streams are annoying because then anybody re-watching it has to watch that error so at this point i'm gonna leave my server on but i'm gonna open up the other terminal and this is the django terminal now this is not the react one so pay attention to what project you're in we're working in two separate projects and we're just gonna paste that in so python dash m pip install django dash cores dash headers run that install and that's going to get that prep for you now in the documentation it's also linked in the chat here the next step is to add course headers to installed apps inside of settings.py so we'll bring that in we'll go into our django app and we'll go into settings.py and we'll just add that underneath rest framework so course headers as one word now the next part is we set up the installation of that we need to add the middleware almost forgot about that so we'll add that copy this section only not the bottom one and back in settings.py we'll go to middleware and we're just going to add that right here so just underneath our security middleware we'll add course header make sure you add in the quotes and the comma and we'll just do the last step here so we have a few different options the first one is to uh allow all so here are the three options course origin course allowed origins so this is going to be a list that we can provide of all the endpoints that are allowed to call our api so that would look something like this we can say these are all the urls that are allowed to have access to our api and this is a good way to do things now we can also add in rejects to this or regex however you want to say it we can also allow all origins so cores allow all origins and that's a boolean value so true or false and this is what i'm going to use right now but i'd recommend if you have if you're not trying to share your app and you have a specific url that you want to allow use this method right here and then just add import 3000 then when you deploy your site add in that url so in my case i'm just gonna do cores allow all origins and we're just gonna put that in settings.py and i'm just gonna put that at the bottom of my page here so at the bottom of settings.py we're just gonna allow all cores allow all origins so we'll save that and then if i run this again let me try this one more time if i go to my react app let me close out the django rest framework close out the admin panel and we'll leave the notes open so if i refresh this and if i go into inspect let's see if we have that error so now we don't have that error so i consoled out my response and here we go we see that array and now i officially got my data from the back end into my react app so we console that out and we updated our state so now let's actually render that out inside of our notes so in this case what i'm going to do here is just continue building this out so we consoled it we set our notes so this state right here that we can access by the value of notes is now full of that data so we'll create another div here and i'm just going to call this notes list or we'll give it a class here because we are going to style this in a second so we'll do class name and this will be notes dash list so in here this is jsx code we talked about this in the last stream that's linked up in the video description now we can do notes dot map and we're just going to loop through all of our notes and i'm going to add in another parenthesis there so we're going to do note so the actual no object and the current index then outside of that we're going to add in the arrow function and we're going to output every single node so we'll just do an h3 tag and we'll just do note dot body so if i save that in the last video we use the json server to replicate this but now we have a real backend so this is going to be pretty neat here so we made the call we call that inside of use effect updated our state and we rendered the data out so let's take a look at this so looks like i have an error we'll fix that in a second but now we can see this api data inside of our notes so pretty cool there we're actually calling that and outputting this so this issue here we talked about this in the stream each each component here needs a prop called key and we talk about props and state we won't cover too much of that but at this point we just pass in the index which starts at zero and every single item in the virtual dom needs this key prop if it's inside of a list so if i refresh that and then actually refresh the browser now that error goes away and we have our data so let's go to a single note right now actually let's make this into a list item so in the last stream i made the list item its own component and we want to do that here too so this is where we start nesting components we'll go into components and we'll just do list item list item.js then we'll use a shortcut react arrow function component exported and what we're going to do is destructure the prop that we're going to pass into it so if this isn't making sense watch that last stream we're going to pass in the current note and we're just going to output the note right here in an h3 tag and that's going to be note dot body so we have this component we need to bring this component into our notes list page so we'll do imp for the shortcut we're going into components so we'll do two dots and then components and list item all right so list item this is going to be a little bit redundant from the last stream if you watch that but we're going a lot faster and instead of rendering out like this we're just going to go ahead and do list item forward slash and we're going to pass in first of all the key prop which we need so index and then we're going to pass in the note so on each iteration we get the no object we set that prop and we pass it in it's like passing down a function parameter so we can pass down an object to the list item component which is right here we destructure that object and we render that out right here and this is going to be a big advantage to do this in our components like this later on as far as the ui you're not really going to see a difference but now it's outside in that prop there so let's go ahead and continue with our detail now so we want to get some more data so we want to add in some pages so at this point we're going to go into the documentation for react router dom and this is how we add in routing to our react application so we run this install so let's go ahead and run that installation in our react application i'm going to open up another terminal paste that in so npm install react router dom and we'll get that set up so we're going to create a page for a note here okay so while that's happening that's going to take a second we're going to create a proxy url so at this point inside of our notes list page we're specifying the entire domain here now i want to do something like this where i just specify that endpoint right there so i just do forward slash api and notes and then i just want to call the data without having to specify the entire uh url path because if i push this live we're going to have an issue because now when we're live we're not going to be calling port 8000 we're going to be calling a real domain so if i save this in theory it should work but we're going to have an issue here so that react router dom just installed we'll take care of that in a second so if i refresh this we're getting an issue and the reason why this is happening is because if i go into my network tab i guess i'll show it to you first so we'll go into network refresh that and let's find the error can't seem to find it okay so basically what's happening here i'll just explain it is we're on port 3000 so when we do forward slash and leave it like that this call is going to port 3000 api and then nodes but we don't want it to go to port 3000 our api is on port 8000 so a different url so what we can do is we can actually go into package.json and we can specify a proxy url so let's just go ahead and add proxy and then we're going to specify the actual port number so go ahead and write that in quotes then let's go ahead and go into our django application let's copy that and let's paste that in here so we won't have the closing forward slash but now it knows that this is one of the urls that we can work with so when we do forward slash and then whatever route that we add it's going to poor 8000. now in order for this to work make sure your server is off so turn it off and then restart it and that's going to have to update so we just added that proxy url so if i refresh it once that's on give that a second to open and there we go so now we're able to just do forward slash all right so our router is installed so i just wanted to fix that proxy url first that's all we had to do inside of package.json and now we can just do api for slash notes so the react router is installed and we'll go back to the documentation to continue this process so i'm going to import this into app.js so we're going to import browser router and then we're going to import all these other options and remove a few of those so we'll bring those in into app.js i'll close out all the other components it's starting to get messy here and let's go at the very top actually and let's get rid of link that's going to replicate the react version of the a tag in html then let's get rid of switch i'm not going to use that right now and we just want router which is the browser router and then we want route okay so in order to add in some pages now we need to wrap our root component inside of a router so we'll just do router like that and we'll just bring in the closing tag around it so we're wrapping all the components because we only had one page at this point now in order to actually work with pages we need to change this component right here to a route so we use the router and then we have a route so we specify a route and then what we can do is specify the path for this route so this is going to be the home page we'll add in the forward slash we'll add in exact i talked about this in the previous tutorial so if you're not familiar with it check that out and then we add in the component that we want to render whenever the url route matches that so we'll just do notes list page all right so now we have a page so if i go back here we're not going to see a difference so if i refresh it we still see the page because that's the home page but if i go to another route now we're not going to see it and we're only seeing that header now the header is going to appear on every page because that component is just imported into our main project so now let's create a single note page so to actually view a note so we'll go into components or pages we'll go to new file note page here dot js and let's go ahead and use a shortcut react arrow function component exported all right so that's a regular function i want to use an arrow function so react arrow function component exported and let's continue here so we'll just do h1 and then we'll just do a single note all right so we have the single note we'll bring that into our page here so we'll do imp we'll go into pages note page and then note page okay so for this we're going to specify another route so we're just going to do route and we're going into path we're specifying the path here so the path is going to be going to note forward slash and then the dynamic parameter is going to be id so kind of like what we did in django where we pass in the id and we use this value to actually get certain data and query the database we're going to pass in that id that can change all the time and then we need to specify the component now we don't need to specify the exact parameter like we did before i talked about that in the last stream and that is because this path right here if we just go to forward slash and then we try to go to this page if we don't specify exact this component will render because this path technically is going to be true every single time so we say only render this component when this path is exact so we just make sure that there's no conflict there and this needs to be note page okay so with our urls now i can go to note and then pass in the id of one that should give us our note page let's see i'll save that for some reason it's not showing up okay give me a second did i not output any content with that let's go to our note page so we have single note we export it and let's see we'll go back to app.js we import from pages notepage specify the route the component and the path what am i doing wrong here i might try to do a hard refresh maybe let's see if i just go to note it's also not going to work first note second note give me one second if anyone sees what i'm doing wrong let me know passing the prop to the note page well at this point it should just output some text i just want to make sure that it's working that's why i always test them i'm not sure if that's the issue note page dot js that looks good let's just try to restart the server sometimes you just have to do that and it'll work so we'll see okay so let's open it up in a new tab note and then one gosh that's annoying here let's just try removing the prop let's uh or this parameter right here we'll get rid of that and we'll just see if note works maybe it's supposed to be oh i found it we're supposed to start it with a forward slash that's why dang it okay so now if i go to note we see we see single nodes if i go to node with the parameter f2 so this parameter right here is dynamic just like when we query a note object here okay so we have that single note and now what we want to do is actually get that note data from that page and actually access this so with our router we are able to get a prop that was added to our components here and in this case one of those props is going to be something called match it's also in that stream i'm going to keep referring to it so i don't spend time on this for the people that already know this or watch that stream so we have the match parameter and in this case we want to get the note id well what did i click here i think it opened up a completely new vs code project okay so we want to get the note id here so we're going to camel case that so we're going into match dot props or match dot params let me double check this so we're going to match.param so we're getting the ids or parameters and then we need to go into the id so whatever we called it right here in this case we called it id so whatever we name that we can access this so that's going to give us our note id so now that we have that let's just add that out here just to see that so we'll just do note id just to make sure we'll just go to note one let's just change that up so whatever this parameter is i can even call it pizza like that and there we go so all these items are gonna be output so at this point we just want an id so let's go ahead and actually get that specific note so in this case we're going to use use state and use effect so we'll do use state use effect i'll try watching the chat as much as possible so if anybody has questions related to this let's uh go ahead i see somebody's asking is the back end drf yes so we built it in django and then use the django rest framework to uh to work with the api to build that out so we'll do use effect create the function add in the arrow function inside of it and we also want to set our state so we'll do let note and then we'll just do set no so the getter and setter or i guess just a setter i don't know if it's called a getter so the value and then the setter so set note should encode and type and then we're going to do use state and in this case what we're going to do for the object here is we're going to set that to null so by default until we load in an object this value will be null so let's go ahead and add in the function so we actually want to get the note so we'll just do get note this is going to call the database this will be an async function and we need to set the value here so equals to create the arrow function and let's continue so we're gonna use fetch here so we'll do fetch let's take in this parameter here so we'll go into our api and in this case we want to get a single note so remember we go to api forward slash notes and then the id and now we don't need the poor 8000 because we set up that proxy url so in backticks here so we're going to use template literals so in this case we're not using we're not using quotes we're doing backticks and that's going to allow us to pass in dynamic parameters here so we can do the dollar symbol and actually pass in a variable so in this case we'll just pass in the note id so we're getting the note id from the url and then we're making the request we will be doing authentication edward so we'll get to that part see the comment okay so we're making that call and this is going to be response here so the response set that value and that's going to be a weight and then we'll get the data so we'll parse it we'll just do data and that's going to be await and we'll just do response dot json all right so then we're going to take that note the set note value i'm going to pass that in right here and we're going to throw in data okay so in order to actually pass in the note what i'm going to do is just add in a paragraph tag and we're just going to do note body eventually this will be a text field so we can update it but we'll do note dash body and we're going to get an error until that note load so what we can do is actually pass in the question mark like that and that's just going to avoid from throwing an error so it basically says if we have a note body then pass one in if we don't don't do anything so just go ahead and ignore it how do i set the proxy url that was inside of package.json go ahead and add that in like that so proxy so proxy and then the actual url make sure to turn off your server and then start it back up if you don't do that it won't work right away so we have that we pass in notes and we get the data we set notes and then we want to call this from use effect now inside of use effect i'm going to add in the array for the dependencies if i don't i believe it's going to spin that into an infinite loop and we just want to pass in the note id for the dependencies we talked about that in the crash course okay so let's go ahead and try this so we'll go to the note page if we go to two we're getting the data and we're passing that in so what i want to do is link this up from this page here so instead of using the a tag like a typical link from our notes list we're gonna work with the react router dom so we're gonna go ahead and make an import here from react dash router dash dom and we're gonna import link so it's very similar to the a tag and html except for we're doing two instead of href so we're gonna wrap our link not inside of the notes list page we're gonna remove that we're gonna do that from the list item component so we're going to import that and then let's change this div to list or to link and auto rename tag auto renames the closing tag here so we'll specify that to 2 and then for the parameter we're just going to go ahead and do the back ticks here we'll do forward slash note and then the note id note dot id so it's going to link it up and let's check it out so now if i click on one of these we can see the note we're calling the database and we're getting everything that we need so let's see i think the next step is to style this so at this point it's going to be a little bit repetitive i'm going to go pretty fast through the styling if you want to watch the styling from the last video where i do go a bit slower i'll try to go as slow as possible here but even though we're still going to be just copying and pasting it's still going to be decently slow i guess but if you want to watch that one i think i explain it a little bit more so let's go ahead and work with this let's talk about styling so inside of the github repo we are going to get the styling from the front end folder and we're going to go into source and in source you should see a file called app.css go ahead and just grab all this styling here there is a dark theme and a light theme go ahead and grab all the styling and let's just paste it in so this is i guess the least important part of this tutorial we're just styling it now but it also is pretty important because how something looks makes a big impact on how it's going to be used and perceived so here's all the code here we're styling the note the notes list we have buttons here that we're styling and the entire body styling along with themes i might deploy i'm not sure we will see how the how we are on time we're at an hour and 32 minutes and we're getting close so we're still decently good i want to make sure this lasts maybe two two and a half hours so if we have time we will deploy and if i do deploy i want to do two options i want to deploy the api to heroku and then the front end probably to netlify and then i also want to deploy react to heroku also and i talked about that in the opening part but there's different ways that we can do this so we copied and pasted the styling and the styling is imported already into our app.js component or index.js i believe so it's already imported so that means that all the styling will apply to all the components so if i go to my application let's go in here we're going to see the styling change a little bit looks like the font is applying some of the padding and spacing is actually being applied so we're actually going to start building out the html portion so the styles actually apply all right so let's go ahead and get into that so we're going to start with our app component we're going to go pretty quick here so in app.js i'm also going to look up my notes here so in app.js we're going to start with a container so we're going to change this to container we'll wrap that then that div right there is also going to be wrapped inside of a clasp or inside of a div called class or called app so we're going to go ahead and open and close that div copy and paste that and paste that down here so we're wrapping the container and then another div and this one is going to have the class of app so that's going to do here is it's going to automatically style my app like this now we do have a dark theme i took a or i did a poll on youtube and i think out of like two and a half thousand votes everybody voted for dark mode so let's switch it to dark mode and that is done by these variables right here so we have variables for the root application and then all the dark theme settings so to apply this we're just going to our container and we're just going to do dark so if i save that our app's going to look like this so it looks a little bit not better i guess but in preference whoever likes dark theme we'll like this one better so now let's go into our notes here so let's style these list items and everything that we have in here how's everyone doing by the way if you want to say hi in the chat i'm watching it right now so this is a slower part so say hello if you're i here it's bonj rana thanks for saying hi i see you in the chat all right so for the notes list page let's wrap the entire page a class name of notes here then we are going to create a header so we'll create the header we'll create the div and this is going to be notes header some notes dash header and we want to create the title here so we'll just do i see z yusuf is that enrique starts with an h i don't know maybe i'm just this is silent h i'm not sure but thanks for saying hi mathis sharir some of these names are harder to pronounce so sorry if i butcher them woodshop and then job steen david i think that's the right way to say it okay let's see i'm gonna answer this question so quick question i saw the title about the django about django where where is the django files so that is uh we did that earlier we're connecting those two right now we'll uh we'll get to that right now we are building out two different applications i have two different text editors open so two different apps and they're in two different files all right thanks for saying hi everyone i appreciate it it makes me feel like i'm not alone i see 131 people are watching it so i know someone's there all right so inside of our header what we're going to do is output just an icon with the title and then uh just the note count so let's go ahead and do this inside of the header and that's not supposed to be a div that's supposed to be an h2 tag thanks for saying hi everyone all right so this h2 tag is going to be a title so in this case it's going to be just a like a hex code so we'll just do the and symbol pound symbol and it's going to give us a cool icon and then nine seven 8 2 and like that so if i save that this is what it looks like so it's just this icon right here it looks kind of cool so we'll just go ahead and give this a class name and that is going to be notes dash title and if i add in the class name of notes title it's going to make it orange because of the css file and then we also want to add in the count so in this case that's going to be inside of a paragraph tag with the class name of notes dash count and then the note count here which i can use the curly braces for and i can just do notes dot length so i'm just getting the length of that list and that'll tell me all the notes that we have so as we keep adding right now we see the count is two but as we add to it that will keep updating and it'll keep the current count someone's asking if i remember the code yeah for the most part if i'm doing this alone it's really easy to do it but during the streams i do have like a preparation file that i reference so it's not that hard once you've prepped it it's pretty basic stuff so the tougher applications would be more difficult okay so we have that icon and i see shuvo my designer who's hates when i ruin his designs it's telling me to add in the notes title he's right sorry shuvo you work hard on these i want to make sure they look good so we added that in we have the header and let's update the list items here so we have the notes list we already put in that class the next styling goes into the list item component so the actual items that are being output right here these t these things right here almost said that like an irishman these things okay so that's for me talking too much all right so the note components or the list item component let's see what do we need to do here so in this case we're just going to the link here and in the link we're going to create a div so we're going to wrap this div let's create the space there we'll just add in the title into the div and let's see class name and this is going to be notes dash list dash item and that's it for now so we're going to style this later where we have the time stamps and so on but at this point we just added in the styling to create the spacing the border bottom right there and that hover effect so that looks a little bit better it's going to look a lot nicer when we add in the styling all right so let's see now we need to go to the actual note page so we're just outputting a paragraph tag and this in this case it's going to be a text area so we'll go to the note page i see usual is in the chat he's worked with me before good uh good developer so we're uh we're dealing with the back end part which will um i promise you we're not just redoing the same application without modifications uh we just have to do this part because i like to do it from scratch just in case anyone didn't see the last one so all right uh the note page let's see in this section we're just going to add in the text area so let's add in a wrapper we'll just call this note or give it the class name then we're going to add in a text area instead of the p tag so we'll do text area and for the value instead of just adding value because i had this issue last time we're going to do default value i think that's going to work better so we'll just do default value and then we'll throw in this note body into that default value so that should work with it and not mess with our state as much so i can still do stuff like this but we're actually gonna allow that to update the state so this is inside of a text area so now we can actually modify the note it won't actually save but we're gonna let's see how do you handle handle click sorry i just want to address this one right here so how do you handle the click i saw where you clicked on the note to pull it up but i don't see the on click event that's because of the link that we added so inside of the list item we add in the link from react router dom so we don't have to handle click the link will take care of that for us all right so inside of the note page we wrap that i also want to add in a header so we're almost done with the styling i promise sorry about the repetitiveness let's see inside of the note we do need a note header we'll create a div here this will be note dash header and at this point i just want to add in an icon here so that's going to be in the source code so if you go to the code here inside of the front end folder inside of assets so source and then in assets there's going to be these icons here and right now we want this arrow left icon it's going to be like a back icon for some reason it's kind of hard to see them so i promise they're there go ahead and download those or you could just go to mumbleui.com and then just do arrow and then just get this one right here so the one with uh no line with it so this left icon download the svg file and drag that into your project so inside of source we're going to create a new folder called assets and we're going to bring this icon in there so we'll just grab that that's going into the assets folder and i'm just going to call that arrow dash left dot svg okay so instead of just dragging in the svg file let's go ahead and import the arrow left icon as a component so inside of the note page let's see i'm like messing up all my files here okay so let's go into the note component or the note page and bring that in so it's up here so we're just going to import and that's going to be a destructured one we're going into assets and then we're going into arrow dash left dot s v g and then we're just gonna do react component as component as and then we're just gonna do arrow left so we import this icon and then we can treat it like a react component we name it so in this case i can use this as a typical react component and i can bring that in here so if i save that let's take a look so we see that right there it's not colored and that's because we're not done with the styling around it so what i'm going to do here is add in a link and a wrapper around this so we'll just do h3 close that off we'll throw in the arrow left component into the h3 tag that's going to give us some styling and then i also want to add in a link around it which i'll need to import i don't think it's imported yet so we'll grab that link and then we'll wrap the arrow left icon someone's saying i could have used react icons yeah i mean there's a ton of options this is just the way that we designed it with shuvo so at this point when someone clicks on that we want to send them back so that's what we're going to do we're pointing them to that and let's take a look oh link is not defined i forgot to import that okay so we're gonna go in here and we're just gonna do import from react dash router dash dom and we'll import link so we wanna be able to use that all right so if i go back i can go to the notes and continue back so the styling is almost done i think we have one last section and that is the header component so we'll just fix that up really quick and that's going to be easy we'll just go back to the header and we'll just do note list and then i want to give this a class and this will just be app dash header all right looking a lot better we have our header and the actual items all right so um someone's saying if you want emmett to work you can just change the language and type language type from js to javascript react i don't use emmett i should but in tutorials i'm using shortcuts right now and because i do a lot of tutorials i tend to want to write things out by hand because i don't like skipping around so for anybody that's newer i feel like it's easier for them to follow okay so thank you simon saying dennis awesome work you make a simple mind mac mapping app uh that'd be fun to do we'll get into more complex stuff with react for sure i'm trying to change my content up to react a little bit okay so we have this where are we now so at this point we styled our component i know that took 15 was at 15 20 minutes to style it it's not important for this tutorial but i wanted it to look good now let's continue with the back end so for whoever asked how this works we do have a back end right here this is our api that we built out and we want to continue with this so the next thing i want to do is actually deal with updating a component so praveen is saying make the front end living i'll probably just do that during this tutorial because i don't want to skip around to that so we need a route to actually update our components so let's go ahead and create the backend path so let's go back to our django project and we will close everything out at first so inside of our views we have get notes and we have get note so for a single note object now let's continue with that and for this we're just going to call this one update note so we're going to create another view and we'll just do update note pass in request we do want to know which note we are updating so we'll pass in the primary key and we also want to make this uh view for the django rest framework and inside of this list of the methods that we want to allow we're going to use or take in a put request so the only request this route can take is a put request post is usually for creating items whereas put is for updating items so it's for partial updates of an object okay so for the response what i want to do is uh i guess we don't really have to do too much for the response we could just return back the object uh in this case let's just do return oh that's okay so return and then response let's just return the object we'll just do that we might as well so in this case i'm just going to take we'll just do serializer.data when we actually do it so serializer.data and we'll make that a lowercase s and we need to get the note first so i know we're a little bit ahead of ourselves so let's actually process this so when we're sending our requests we're going to send it in the body sorry for hitting that we're going to send our request in the body with our fetch call so in that case we're going to get the data and we can get that with request.data this is something that we have access to with the django rest framework if you weren't using the django rest framework you'd probably do request.body or request.post and then get whatever data was in there so in this case we're just going to do request.data and it's going to give us that json file it's already json data so we don't have to parse it now we're going to get that data and then we need to continue processing this so we also want to get the note so let's see i'm trying to think about how i want to do this so we got the data then we're going to get the note so we'll just do note and it's going to be note objects dot get and we're going to get it by the id so we want to know which note are we going to update so we get the note and then we want to get the serializer so serializer keep hitting enter and it gives me the capital s so we're getting the serializer we're passing that into the note serializer we're going to pass in the note that we got and then we're going to set many to false so we're getting back a single object okay and then we want to go ahead and actually process that so what we can do with this serializer is we can actually just do if serializer dot is underscore valid then we can actually save that so we'll just do serializer dot save okay so let's talk about what's happening here so if you are if you are familiar with model forms we can simply pass in data into our serializer and call the save method and is valid just like you would on a typical model form so it's processing that data and we can just run save on it now we could do all this manually but the serializer really makes things faster for us so we might as well use it so we're throwing in the new values into that serializer and then we're saving them so for the serializer now there are a few things that we need to do here so what we need to do actually is pass in the instance of the note so i actually messed this up here so we'll just do instance so we're basically saying we're getting the instance of the node because we want to know which node to update and then we need to specify data and the data is going to be the data that we got from the front end here we go so sorry about that i forgot that so we're getting the data we're getting the note we're using the serializer we're passing in the instance of the note so we're serializing that particular note then we're passing in the new data into that note so it's going to update it then we save it so whatever new data we send in it's going to save it so we have the back end portion almost done we have the view and we have the url that we want to continue with so for the url here let's see we're just going to do notes so we'll just take this route here we'll do notes the id and we will just do update like that now the issue with the way that i'm doing things is that this route right here needs to be put at the bottom so we'll just get the single note from the very bottom and then we'll probably fix this up towards the end so we're taking the notes parameter we're passing in the id and we're saying we want to update the note and we're going to take update note and paste that in for the view and we'll just do update dash note okay so if i try to access this from the api here this is what this is what's going to happen here so it's just saying that this get method is not allowed and it's going to tell us that we need to pass in a put method so if i were to pass in some content here like a json object we would actually update the note based on that content passed in so we have to send that put request so we want to do this from the front end and not from here so let's go back to our react application now so at this point we have an endpoint we have the url so the url is notes id and then update that sends it to this view we pass in that data and we modify it let's go to the front end here and we'll continue so let's close out our header close out our list item and we'll go into the note page so let's see the first thing i want to do is update the state when my note gets updated so let's go in here into the text area and we'll just do on change so we're going to submit the state the actual state of our note so we'll just do on change and we'll pass in a function here because we need to delay our function call we'll use an arrow function and we're just going to do set node so on each key up as we're updating our text area we want to update the note and in this case we're going to update the note object so we're going to use the spread operator we're saying that we want to update the no object and specifically we want to update the body of the note and that's going to be e dot target dot value well what the heck did i do there okay e.target.value so on key up let me just show you what's going on here as we update here this is updating the state so on every single change we're calling that key up method or on change method and we're updating the state once that state is updated so once we make our modifications we want to send a call to the back end and actually update that note so let's do that so in here let's see inside of our method here we're going to call another method and we're going to call this update note and let's see we're going to wrap this inside of async here because there is going to be a fetch request being made here we'll go ahead and make that fetch call so this fetch call right here we're going to use the backticks and this needs to be sent to this route so api notes id and then update so we'll throw that in there then we can pass in the variable so we'll denote id and i need to set equals right here it's going to fix that so we're making the call and at this point because we're sending data we need to pass in some more things here so we're going to set the method and this is going to be a put request so we'll just do put then we're going to pass in the headers so we'll just do headers this is going to be the type of content that we're sending so this will be content dash type like that and then we'll just do application for slash json so we're sending json data we're sending a put request when this method is called and after that we do need to pass in a body so body is going to be the data that we're sending with this so this needs to be stringified so we'll do json.stringify so that's what we have to do with the fetch api we have to stringify the data first then in here we're just going to pass in the know so in the last tutorial on the stream that we did on monday two days ago we had to do something like this where we passed in the spread operator and the note and then we had to pass in the date so we knew when this note was updated now in this case we're just passing the note body and i mentioned that we had to do that because we're using the json server which wasn't a full back end so we're just simply passing the object and we're not having to do the date because the date will be automatically updated on its own so the backend will take care of that so we actually don't have to deal with that right now so it's a little bit nicer and cleaner to handle things that way so we have our update note method and that's it now when do we want to call this so i want to call this whenever we click on the back link so we're not going to have like a done button unless we're creating a note so the note is supposed to be seamless and how we update it so we click on it make a change hit back and that should update it so in this case i need to add in an event handler on this arrow left button and what i'm going to do is actually just get rid of that back link because we're not going to need it anymore and we're going to create a method that handles that redirect process so we're just going to do let and then handle submit so we want to handle each one of these clicks here and that's going to be an arrow function and in this case we're going to add in some logic here in a second but but right now all we want to do is update our note so we're calling the update note method we're going to pass in that note send the request to the back end and then we want to redirect a user so because of that router we also have access to something called history also talked about in the last tutorial so we have history dot push and we're gonna send the user back to the home page so that's it so we handle the click we call the method and we send the user so that's why we didn't need that link anymore now i don't think that's gonna affect styling but let's just test it and let's just see how all this works so if i go ahead and make a change if i hit back we have an issue oh i forgot to call it so we're just going to do on click let's just pass in handle submit that should do it so let's refresh it and let's just say uh updated right here so we'll do updated let's hit back and there we go so that's in the back end our api is now updated so if i refresh this if i go to my notes list we see this updated right here so that sent the call so as i make this call if i look at my python or my python my django server i can actually see those requests being made so if i go back here minimize this this is my jango server so if i make that request if i click on it and go back we're seeing these calls be made so for some reason it's not showing up i'll restart that so we can see that that request is sending it there we go and every single update we're updating it at that point perfect so let's do a little bit of ordering here so if i click on a note and make a change technically anytime i click on it and go back it's going to update it so what i'm going to do here is make sure that based on my model structure in the back end i just want to make sure that we are always ordering by the time that we updated our notes so in my phone this app actually updates the note just when i edit it and it automatically goes to the top so my most recently edited note should be at the top so we'll go to get notes and there's different ways of doing this and in this case i'm just going to order this query set right here and we're just going to do ordering or order by and we'll just say updated so if i invert it i believe that's going to invert it by ascending order so if i go to second note and then go back that's going to be at the top if i go to this note and go back it's just going to re reorder that so i like that feature it's going to give me the most recent note if i go to a note that i added months ago and then happened to work on it it should appear at the top so now let's work on deleting a note so we'll go back here and we're going to create a delete note method so before we can actually build that in the front end we need to create that in the back end so let's go down here and we're going to create a view for that and delete note will be pretty easy so we're going to create the view where we'll just say delete note pass in request here and let's see what i want to do here so i do want to get the note by the primary key i want to make sure this is using the django rest framework style to view we'll take in the http request of delete so that's the type of method that we can take and we'll just do return response and that will just be note was deleted so we'll just let the user know that the note was deleted and that's it so for the actual value we want to get the note so we'll just do note objects dot get get that value by the id so we'll get that value and then we'll just do note dot delete that's it so delete will simply remove that object from the database so now we have a back end we need the view here i see uh praveen and shuvo talking in the chat and usual so i'm not following it too much but it's hilarious watching you guys talk there i'm seeing a lot of hearts and laughs so i don't know if that's a good thing or a bad thing so inside of our paths here let's go ahead and copy update note so we'll take update note paste that in and we're just going to do notes id and then delete then in here we're just going to do delete here and then we'll just do delete note all right so we have the url and we have the method and all we need to do is pass and delete we don't even need to pass in an object at this point so let's go to the front end now and let's handle this so we'll go we'll go back here and let's create or let's just um actually we'll create it from scratch at this point so let's just do let update note or a delete note delete note and that's going to be async method so we'll just do equals to async and we'll just do the arrow function continue that and we're we're going to use the fetch api call too so fetch and the route that we're using we're still going to use the similar parameter here or the path except for we're going to pass in delete so that's the route that we're going to we just created that endpoint and for the headers here we need to pass in the method and that's going to be delete so that's the type of method then we'll just do headers and let's see we'll just do content type application json so i'll just copy and paste this right here go through this part faster now i don't think i need to send a body for a delete method i don't think i need to send it so that should be it and what i'm going to do here is take history.push and paste that just after my fetch call here so once fetch is complete let's see it ends right here so we'll put that just after that so i want to be able to take delete note and then actually have a button here so we're going to create a button and this is gonna take in on click we're just gonna do delete note like that so then we should delete the note send that request and redirect a user all right let's check this out let's go back here go to a note here it should say delete why is that not showing up what i do here oh i didn't add the value into the actual button so we'll just do delete like that i'm going to turn off this fan it's actually making my head cold i had a fan above me all right so we have the delete button it should trigger that delete method and then redirect a user so if i go here why is it lined up like that give me a second to fix that here oh i think i was supposed to add that outside of this h3 tag so the h3 tag was for some styling so the delete note needs to be right here let's uh try that again we'll go to the note second note if i click delete there we go so we sent the request to the backend we removed the note from the database and the note was removed and then we rendered out the new node so we have the delete method we have the update method now we need to create the create method so for this in the last stream we added a button here so it's a floating button just like you saw in the preview we're going to add that in right now so let's go ahead and do that see 125 people in the stream am i boring anybody yet no one's falling asleep all right so we need to add the button so at this point what i'm going to do is add it as its own component so we'll go into components and we'll just do add button dot js and we do this because it's going to have its own styling and things that kind of go with it so we'll create it as its own component and that'll give us more customization options let me pull up some notes for that and let's make a few imports so the first thing is this button is going to have to link somewhere so we're going to have to make a link and this is going to be from react router dash dom we'll import the link come on gary you're messing with me here just fell asleep that's because you're a designer how do you like my design by the way let me know it's not my design it's actually shuvo who works with me this isn't the final version but it's a notes app so if you're feeling uh tough today go ahead and comment on it all right so we import the link we also want to import an svg file in this case we're going to go into mumble ui and we're going to grab in the add button so we'll just do add we're taking this plus icon it's also inside of the source code so inside of that assets folder in the github repo go ahead and check out the add.svg file it needs more cotton cowbell all right so we're gonna add that i don't know what that means cowbell buzz like it needs to pop like every designer loves to hear so funny story uh shuvo is actually working on a client project with me i hired him for one my one of the first projects that i take on in a while because i don't freelance anymore and the client asked us to make the design pop so we had a good laugh about that because of gary's tweet where designers hate dealing with that but it's all going good though saturday night live meme oh okay all right so we got that ad icon so it's right here and we're going to import that as a component again so we're just going to do imd and then uh let's see what am i going or where am i going so i'm going into assets and i'm doing add svg import that as a react component and then that's going to be add icon all right so let's bring this icon in here so we're just going to drag that in here add the link we'll change the div to that link and we'll point the route here to note and instead of passing in the id we're just going to do new so we'll throw in that and then that's how we're going to decide whether we're creating a creating a new object creating a new note or if we're updating one so we're going to be able to identify it by that so we'll do add icon bring that in right there that needs to close with the forward slash and there we go by the way gary i heard you hate javascript frameworks i'm actually curious on why because you have a video on spelt i was wondering how you like that and if that was actually true because i thought i heard you say you hate them i guess as a designer i can see that all right so our note icon i can bring that into my notes list page now so let's import that so we'll go into the assets folder so we'll do or not assets but components add button that's what it was okay add button getting distracted trying to keep a conversation and code here all right so we have the add button we just have a link and an icon we bring that into our notes list page we take this icon and we have to give it a class so make sure you add that because that is styled and that's what's going to make it like float inside of the notes list and let's add that just underneath our notes list div so now if we go back if i close that out let's see we have a issue assets add svg it's not working did i import that ron oh that was supposed to be svg okay so that was the issue all right so here we go we have the icon here we click on it we should be able to add a note now a few conditional things here when somebody's adding a note i don't want them to be able to delete a note that makes no sense uh they're the note hasn't been created yet so we're going to add a condition here and that's going to be inside of our note page so we want to go here and we want to create the condition using the ternary operator it's going to give us a shortcut here and we're just going to say if note id is not equal to new so we'll just do new so that's that's going to be the url here if it's not equal to new then let's go ahead and add in the delete button so we'll throw that in now if that parameter is new we can add in the colon here and we'll throw in a new button so i just copied and pasted that and we'll work on the on delete method in a second at this point i want to prompt the user to just hit done now they can save the note just by going back but i want to give them a more user-friendly way of doing it because somebody might go to the website and they might not understand how to actually save this node so if they go here if they click back they think the nodes can be deleted so we want to prompt them so if i go to create a new node if that url parameter is new we see done if i go to a regular note it's delete so we have that we just threw that in here and we want to fix up another thing so when we go to this page what's happening is by default in this page or in this component we are requesting a component let's see shubo is saying dennis beware of gary you code in python he owns the i hate snakes so bad i can't believe he has him i gag every time i see pictures of garry's well that just sounded bad i don't see gary snake that just sounded wrong all right so anyways let's get serious so we have an issue here and the issue is that we are making a request if i go to the network tab if we go to the request of the endpoint of port 8000 i guess 3 000 at this point why is it doing that it's trying to make a request and it's trying to go to notes and then new we don't have that endpoint right now now what i'm going to do here to fix that is i'm going to stop this request from trying to get a new note if we are trying to create a note so all we have to do is create a condition here so we'll just say if note id is equal to new then we're just going to return and it's going to stop this code from executing right here so we're going to stop that request from being made so if i save that that network issue should go away so if i go here let's check this out yeah so that issue goes away in the console that air also goes away so now we did a little bit of cleanup we fixed that button we made sure that when we go to this page and we're not trying to edit a note we're not requesting that data for a no all right so now we can actually work on adding the note itself so let me just pull up my personal notes for this so we're saying notes quite a bit all right so for the note to add it we're just going to take update note and i'm just going to copy this i'm going to paste that and we're just gonna call this create note and before i execute this i actually want to comment that out so let me just finish something up here actually i forgot one thing on handle submit when a note gets completely removed so for example if we go here and a user they have two options to delete they could hit the delete button or if they happen to remove all the content from a note like that if they go back that note should be automatically deleted this is how that notes app works in my phone so i want the note to delete then too so when there are no notes here so we'll fix that up so we'll go into handle submit and let's just remove update note and let's create a condition so we'll just go ahead and first check if the note id is not equal to new so if it's not equal to new then or and we have no note body so the no note dot body so if it's not a new note and there is no new no new wow can't talk no note body there we go then what do we want to do here well at this point we could just trigger delete note because it's a note that exists but it has no body so go ahead and remove it that means our user deleted stuff and the note was removed then we can just do else if and at this point we'll just say if the note id is not equal to new if the no id is not equal to new then let's just go ahead and update the note so we just have a few conditions here and handle submit will take care of all this if it's not new update it if it's not new and it has no body delete it and that's it now let's go back here so i'm going to go back and re-edit this so we change the method name now we want to create a node so we need to create the endpoint to actually build out a note so let's see we have update note we have delete note and we want to do create note at this point so let's create a new view and i'm going to create that above our update note view so we'll just do at api underscore view we'll start with this first the decorator we need a post request create the method we'll call this create note and we'll just do request and let's see how do i want to process this so in this case i think i could just pass in the entire body so we'll just do return response and we're going to pass in that serializer so let's just go ahead and take in the data so the data is going to be request dot data so that's going to send the json data then we could just go ahead and do note and that's going to be equal to note and there's different ways of doing it i'm just going to do it this way now so we'll just do note.objects.create so we can just do create like that and we're just going to specify the body and the other attributes are going to be created automatically so updated and created will generate themselves i don't need to send that data so we're taking in the body we'll just do data and we'll request the body from that so once we pass that in once that's sent in we'll just use the serializer and we'll just do note serializer pass in the note if for some reason we want to do something with this data in the front end many is going to be set to false where we're turning back one single object we need to set that value and then we'll just do serializer.data okay so that's create note we take the data we create the note serialize it and return it so for the actual url here we also want to render that so let's go into the urls and i'm going to put this just underneath notes right here so let's create the new path okay so someone someone's asking a good question here so let's see this is uh how to use forms method post and get data well we're not working with standard forms this is the i guess the beauty and the difference between react and using things like the django rest framework is we're not working with the traditional forms and the post methods in this case we have like a whole different set of tools to work with and it actually makes our life a lot easier when it comes to things like csrf tokens or not having to send those and different things like that so that's why we're not using that because we're using the django rest framework for this so if you look at the front end we're not even submitting a form technically we actually just have a text area there's no form wrapper around it so we're using the fetch api to make this call this is javascript to actually submit that so if you just joined i'll recommend rewatching kind of see how we set things up here but it's a little bit different from a traditional application or how i traditionally build out django applications and tutorials so now we're just going to note create that's going to be how we make one and we're just going to go ahead and do views dot create note and the name will just be create dash note all right so i'll try to get to some questions a little bit later so i just want to try to finish this up so notes create that's going to trigger the create note method that's going to fire this off and that looks good at this point i don't think i'm missing anything so let's go to the front end now in the front end we have our create note method we call that route at this point we can get rid of that and we're just going to do create so that's the end point we're sending a post request now not a put request and we're just sending the note object and that's it so we'll take create note and let's see so at this point what i could do is just add in the submit button directly on this button so we'll just do on click on the done button let's just actually here i got a better idea so let's do this so let's write in the last statement so we'll just do else if and we'll let this method handle everything i believe that's how we did it in uh monday's tutorial so or monday stream so we'll just let this handle everything so else if the note id is equal to new so if this is a new note then let's go ahead and create it so not only does it have to be a new note but it also has to make sure that note is not empty so we want to make sure that we actually have something there before we submit it so if we have this then let's go ahead and trigger create note all right so we trigger that method so we have a delete update and create so that means that i can now use handle submit here and that should take care of everything right here so on click let's just do handle submit and that should run through that logic even though it's only supposed to create but this should fix that so i saw the question um says hey dennis i was watching your previous react video followed it but when i update the item or create a new one it doesn't show on the home page unless i reload it manually uh i believe it depends it must be on how you're redirecting it i see shuvo here he's responded he said check the logic of the else statement so how is that redirecting it depends on that it should reload if the component is being re-rendered i'm not sure i would have to see it it's kind of hard to understand exactly why but it seems like that that state method is not being triggered again so let's finish this up here so we'll start with a done method so we'll go in here and let's just do another note so if i hit done now that note was added so we triggered the last method and then we'll just do one two and so on and i can also update these updated all right so that looks good so if i go back the note was updated and oh i also added in this logic so i wanted to show you that so we have one updated let's get rid of two so instead of hitting delete if i get rid of that and go back two should be up or removed let's fix this okay so 2 is not being removed so if the note id is not equal to new and the note body doesn't exist let's get rid of it let's delete the note why is that not happening let's see we'll do triple equals right there because that should remove it technically there is no no body uh hmm let's try another note okay let me try doing a hard refresh shivo if you see the issue let me know so dennis no body and empty on the last if statement okay so i'm guessing that's in the handle submit else if no body the last if statement works that's how i built it out originally now we could change it here let's try this let me just console out note all right let's give this a shot so we'll just go into note here see which one's firing off so it might not read it correctly so we'll go to another note we'll get rid of that so we'll change it up then go back note body is empty maybe i can put it's weird because this worked before but i could try doing an and so that's a little bit tricky i can't figure out why that's not the case i might have to get back to this in a second because i don't want it to delete or delay the stream here let's try this if uh and if a note body no dot body is not equal to an empty string because technically it should be an empty string actually if the note is not new it should exist so let's try this if i go to updated go back yeah that does delete it okay so now it's working i think that's going to be the better solution than to what i did the other day so there we go that removes it so once i remove the content the it's going to be an empty string now inside of the state so when i hit back the delete method should trigger and that's good and we can also add new notes if we click like that and we can also go back and that will add the notes and then remove them okay so it's still not happening i'm gonna get back to it in a little bit so uh no dot body not equal to null that's what i thought i had before let's try this okay so note dot body not equal to null because it's going to be an empty string that's the weird thing so let's try this method one more time i can't figure this out it's funny because it worked and this is how a lot of things happen it's kind of annoying but if uh it worked and then all of a sudden it changes so if no dot body not equal to an empty string filter an ecb so rather so shuvo is saying he then is try if body is equal to oh if body is equal to not not equal to is that what i didn't do last time maybe i forgot that okay so if i refresh this now if i go back all right that's annoying all right on the last this is exactly where i had the issue last time so no id is equal to new go ahead and create a note if note id is not equal to new go ahead and update it let's see is the delete method even being triggered let's just do that so console.log and maybe it's actually firing off it's just not working so delete okay so let's check the console now so if i do this i see that the okay so it wasn't that conditional so let's just try going here so it's not even firing off so it's this condition for sure if no body is equal to an empty string yeah all this code will be so no doubt body it should be a triple equal to though it's not i mean let's try it like that let's just it's usually safer to do the all right um i think i'm going to skip this and get back to it that's really annoying note not equal to new yeah because the idea is not new when i'm clicking that all right let's skip it and then we'll get back to this later uh let's see where do i need to continue so we have the create method that's all done on the last else let's see okay let me it's going to bother me i won't be able to continue so on the last else if check the second statement if no id is equal to new and the note is not equal to null that seems right to me here let me just console out the note one more time so here's what's happening technically the note is supposed to be an empty string when i remove everything from it so if i go to two and i click back when i cancel this out if i look at the note the body oh okay so i'm seeing i'm seeing an issue so for some reason it looks like the state is not updating so now it removes it but for some reason when there's only one element so check this out if i do one two so if i save okay so it looks like i'm gonna have to rework a few things here so if i remove this one and i go back or go all the way back it should remove the element but it's that key up method that's not working so it's not it's not someone's saying it's the last else if statement i keep seeing that but i don't see why that's the issue so let's try this if i just do one the note is there and then when i click remove and i go back so let's actually uh let's add it let's refresh it so i can see the fresh console if i go back the note body still remains so it looks like the state is not being updated okay so it seems like this is being delayed nobody everyone keeps saying this okay let's see use instead of instead of note use note body but that's for the create note again that's what's okay so for the create note you're probably right you actually did that was another issue that i saw but it's still on the delete method so that's going to delete it look if i add an a and go back it's added and then if i remove it it won't remove it so we fixed that you're right with the notebody thing okay so for some reason my it looks like my state is not updating right here on set no it looks like it like has like a delay in how it's updating the state so check it out if i have one letter there and i hit back it's going to cancel out the note and the note still has a inside of it the the video won't be deleted unfortunately it's starting to get really long because we're trying to fix this issue i'll put in a timestamp that says we're working with this so the problem is with the set note logic yeah that's what i'm seeing okay so what i could do is just add in like a handle change function so we have the note so we have the spread operator and we update the note body so it's updating let's try this let's uh let's create another method so we'll just do handle change and it could be in the way that it's colonized so in this case we'll just take set note right here okay so we'll pass in handle change okay so handle change gets triggered and inside of handle change we want to pass in the event i guess or e dot target dot value because the update stays depending on the previous state okay hold on let me try to fix this issue and i'm going to get to the comment section so handle change we'll just do set note because we do have the value i'm wondering if it's the default value issue i i get this comment right here this one actually makes sense i'm just trying to figure out how to logically put that into action so let's just try this and then if anything we'll just leave this as a method and then we'll fix it from there so we'll just do value like that so set note that's going to be the value of the body so in this case we're going to set we're going to use a spread operator so the spread operator for the note and we're just going to do body like that if you can change on change to unchange to handle change then that should be the value this should be the note body and let's trigger handle change so let's see all right let's try this yeah it's totally in how i'm how i'm updating the state set null set note note dot value that's exactly how i had it what am i set note we have the note we use this oh okay you're here shivo you want to hop on or let me know just okay i'm gonna try that method that you just did you just went to note and then okay hold on a sec i just wrote that completely wrong okay so we have the arrow function i completely missed or lost the chat oh here it is okay yeah okay so that's a set note note value oh i did the spread operator again okay so note for some reason i won't let me copy the chat message is that not how i'm doing it so we have we have the note then we pass in we use a spread operator body dot value body should be in quotes i believe i don't think yeah i think that needs to be in quotes i'll fix that if anything all right shuvo if you want to get on voice chat with me uh let me know we can uh yeah it's it's so weird in how it's updating it i'm like reading all the comments because we do need to solve this for this right here like if i if i end the stream without this i'm leaving out a big part so on change is that is this the is that the default value that's causing it that shouldn't be the case okay guys i think it's i think it's a default value free beer i guess i got that free beer so it had something to do with the fact that i have the default value shiva let me know if you notice anything there but i had it as default value now i set it as the value and for some reason when i deleted that last element it wouldn't work so before the issue wasn't this so if i had a note like this if i removed it it would work just fine right so if i go back the note is gone if i had one item let's say i have just a letter a and if i go back it wouldn't go away so right now it does but if i change it back to default value and i'm not sure why that's the case i just that's the only thing i can see that was different from the last time that i made it or the last time i that i did this what's up danny i see danny thompson in the chat so right now if i add in an a right there right and if i go back here remove it it doesn't go away but if i use that if i change the default value that fixes it so we're going to leave it at that for the stream because that is way too much of a headache to deal with it's in the way that it's updating the state and it's something to do with that default value so now if i do that remember or if you look at it now if i added that if i add the a and remove it it goes away okay so current problem is resolved now where the heck am i okay so we have the create functionality we finished all that up we do have some methods that trim our data down so we wanted to fix up this actual note so let's take care of that and we'll do that pretty quick because i built out all these methods in the last stream so i'm not really going to explain too much i was thinking about copying and pasting them but i'll just write them out so inside of our list items right here we see the actual note item here and we see something like this so if i were to add another note so we'll just say today's agenda so technically this is a note so you can add in like different things we'll just say walk dog code sleep or something like that so i just want to add a few of them so in the stream two days ago what we did here is we trimmed this down so we generated a title even though our database only has a single body we're going to generate a title a timestamp and the actual body to the code but we're going to remove the title from the body so you see right here this looks pretty bad especially if we did something like this if we added a bunch we're going to do this pretty quick but if we added in this lorem ipsum text here let's just say we throw that in put that in right here add in a new line look at that so the entire notes app is completely messed up that looks horrendous hard to see and the entire content of the note is there so we're just going to trim that down and instead of just doing like a body trim here what we're going to do is generate the title and then generate the body from the titles that's going to be inside of the list item here so this is where we're going to create these methods now i guess i need to kind of regain some time after that 15 minutes of uh 15 minutes of messing up there so let's go ahead and do that the first thing i want to do here is generate the title so we'll create we're going to create a method outside of this list item method and we're going to call this get title so create that we're going to pass in the note and we're going to go ahead and return the title value which we are about to generate so in this case we need to create the arrow function all right so in this case let's go ahead and generate a title so this was done in the last stream so if you really want to see the details of this check that out it's linked in the video description that was monday's stream so we have our title and this is going to be note dot body dot split and we're going to split this by the lines here so what this is going to do is it's going to take all of these items right here in this json array that we generated that we got from our api and it's going to take this new line and it's going to basically create a space and it's going to create a list out of this element this element and this one right here so it's just going to split them up so we're going to create an array here so we're first going to split them and then we want to get the first index of that array so we want to get that title and that needs to be an end right there once we get that title we're just going to go ahead and check a condition and we're just going to say if the title length so title.length so if the title length is greater than 45 then let's go ahead and just trim it down so we'll just go ahead and return that so we'll just do return title dot slice and we'll just do index 0 to 45 all right so that's going to get the title for us and we can bring that down here and instead of just doing no body we're just going to do get title pass in the note object all right so if i go back here in our application title.slice is not a function so let's see title.splice slice okay all right so we trimmed that down but now we want to generate the date in the body so we can go ahead and create another method so we'll just do let actually here i'll show you what the issue is first so down here we'll create a paragraph tag in the paragraph tag first we want to generate the timestamp so we could just do note dot updated and that's going to generate a timestamp for us but that looks really bad right now because it has all those extra characters so we want to make that in a more readable format without taking up all this space so we're going to create a new method right here and we're just going to call this get time and let's create the arrow function and with this inside of the return method there's not that much that we need to do with it we're just going to generate a new date and in this date method we're just going to do note dot updated and we're going to do two local date string here so we'll pass in the actual note object and let's see why is the return method looking funny because we forgot the equal symbol okay so now down here we'll do get time we'll pass in note all right and there we go so that looks a little bit more readable so let's go back here and let's generate the body so this case we had to generate a title for our body we couldn't just trim it so we'll just do get content and we'll take in the note object and to finish this up we first need to get the title so that's why we need the title method two it wasn't easy trim so we just have to do title and we'll just do get title we'll pass in the note so we get the original title then what i want to do is re remove all the new lines inside of our content so all that space here we're going to trim it down so we'll just do content and this is going to be note dot body and we're going to do dot replace all and we're going to replace all the new lines with an empty string like that so that's just going to basically trim it down then we want to go ahead and set our content so we'll do content and this is going to be set to content and we just want to remove the title out of the body here so we'll just do content dot replace all and this is why we have to get the body so we can get the title here so any text in the title we'll go ahead and clear it and remove it from the actual body so we'll just go ahead and clear that up and i'll actually create a space here so we still want spaces here we want to completely remove it all right so the last thing is we just need to return this so we'll just do if the content length if this content length is greater than 45 then let's go ahead and just return it with some dots here so we'll just do return and we can do content dot slice not splice 0 through 45 and then we'll just add in dot dot so the user knows there is more content else if not we'll just go ahead and return the content okay so these three methods are pretty quick here it just helps trim down the data and we can add that right after the span tag and we'll just do get content and we'll pass in the note so let's see what that looks like we have one error return content slice 45. return content oh i need to be a plus yep code is all on github it's going to be in the video description there is actually source code right now but i'm going to update it with this code right here so here we go we see that so for example right here in today's agenda we made this the title and then we just added this to the body and then this lorem ipsum one because the text is so long we just added in those three dots insinuating that we have more to deal with okay so i see shuvo just uh added in that note someone's asking did i just make a notes app two days ago yes i did what we're doing here is we're building out a django back end and that one we didn't add in the back end we used something called the node server and we're using a real django backend so at this point we just trimmed down the data we finished up all the crud functionality and we need to talk about how to put this into react remember if you came here just to see how react and django can be integrated together i have a video in the link description or a link in the video description it's 11 minutes long it shows you how to do that quick now what we're going to do here is try a few different methods now the first one is to keep our two projects completely separated so right now we have a front end if you can see my desktop we have a front end this is our react application and this is our django application and what we just did is we made them communicate together so we basically link them up and we're calling an api built from the back end and we connected it to the front end now what i could do is i could deploy this application to heroku so or something like that i can deploy my django application with the api and then i can deploy my front end completely elsewhere it doesn't have to even know about the django application and then we can just make those phone calls so to speak those requests and they can communicate with each other so we could do it that way what i'm going to do here is use django as my full back end here and connect it to host my back end and my react application now for this we're going to get our react application and i need to close out my react code right here if you want to do things this way and have django host your react front end take your react application and bring that into the django backend if you're following along so just drag it in there and now inside of the back end code you're going to see your api your virtual environment and we can now see my notes and the front end so the react application is now inside of the django project so it's really easy to connect these once that's done if we go to sorry for the squeaking chair if we go to port 8000 here so let's go to port 8000 on the home page right now we have nothing there so we have our api routes by going to forward slash api and that's it so we can see our api but on the home page i want this to be my react project this is going to be the user interface that someone sees when they go to my website so this needs to be the react part so let's go ahead and connect that so now that we dragged the react the react files into the django project what i need to do is cd into the react application to start so we'll go ahead and cd from my django app to front end so check the file path make sure if you're using this from the command prompt that you can see all that and now we need to run npm run build so we did this in the stream two days ago where this is where we bundle up our files and we create an optimized version of our project so we have the development environment and we just created the production environment i guess so we prep those files and now inside of your react project you should see this folder called build so this is what we're actually gonna deploy to react so we just bundled those up and this is basically a copy of everything that we built out so to connect this to to django here we're going to go into our application inside of django we'll go into settings.py and the first thing we want to do is let django know where to find this index.html file which is inside of build and right here so this is now the template that's going to be seen on the front end so we need to point django to that so we'll close everything out here and let's go to front end or my notes settings and we need to go to templates here and we can just go to base dir it's a base directory and we can point to front end and we're going to build so we know now that there is a template directory inside of that folder so front end right here and then build and there's index.html so django now knows that we have some templates there so now what i need to do is configure my react static files because that's pretty much what we have here is static files inside of that build folder we need to configure our react files static files with django so we're just going to go ahead and do static files underscores and this is all inside of the react course too as far as how static files work and so on so check that out it's in the video description or the django course and at this point we could just go to the base directory so baster and we're just going to go into front end and then we're going into build and we're going into static so we're linking up django to react's static files so give me one second here just want to see some notes okay so we linked that up we linked up the template we linked up the static files and now we can go into our urls so let's see inside of our rootdirectoriesurls.py file we're going to make a quick import so the first thing is is we're going to use a class based view to render that django or that react template so we'll do from django.views.generic and we're just going to import template view now template view is a pretty simple built-in view that django already has it's a class based view and we can just use it to specify the path we're going to leave this as an empty string right here so we're basically saying let react handle all the routing from here so we're going to set that to the home url that's why we change this one to api so it wouldn't conflict with that and then we're just going to use template view and we're going into template view dot as underscore view because it's a class based view this is how they have to be handled and we can specify template names template underscore name and that is going to be index dot html so we're pointing to front end we're going into build and we're pointing it to this index.html file which is our react project so now if i save this let's see i just want to make sure i am on the right path here so we set up the url we set up the static files and the templates now on port 8000 because i ran run build i should be able to go to port 8000 let's just restart the server and clear everything so cls then python manage dot py run server let's take a look at this so template view has no attribute as view looks like i misspelled something okay so there we go now it's back on and if i refresh this we should see our react application all right what's happening here let's inspect that did i run run build i feel like i did that all right so let's find the issue really quick so we have network all right let's try this i'm going to completely close out the project sometimes it helps to just restart it we'll go ahead and open up our django application alright so my notes will run the build and then we'll turn on the django server so we'll do cd front end npm run build give that a second and then we'll open up another terminal and we'll turn on our django server so python manage.py run server there was a typo on the last line you wrote okay so as view i think i just took care of that one but for some reason the static files are still not being found okay so give me a second to figure this out it probably is a typo so front end and then we're going into build so in the templates right here so base directory front end and then we're going to build that looks good and then down here in static files we're going into front end build oh start why did i do start okay this is supposed to be uh static okay sorry about that so now that should show up okay here we go here is our same application so if you look at this we have our development server this is on port 3000 but when we're deploying this this is on 8 000. so now django is officially holding my react project so if i wanted to deploy this if you've seen any deployment video or if you know how to deploy a django project all you need to do is go through the process of deploying that to heroku or wherever you want to deploy it and that's it and django would host it now if i wanted to edit this project if i made any changes i would still work within my development environment i would still turn on port 3000 make the changes then we have to run build again and then deploy it so i'll just show you what i mean by that so if i go ahead and cd into front end and we'll just do npm start gotta turn on that development server i did this in the previous video so it's gonna open up on port 3000 yeah so it seems like everyone noticed the misspell all right so here's my project in port 3000 so i could just go ahead and go into front end we'll go into source let's go into our header and we'll just say new header all right so i could just do that and that's going to update on port 3000 but not on poor 8000 this is inside of django now or how django's serving it up so in order for this change to be seen i would have to go back here turn off that development server run npm run build it's going to bundle up those files apply those changes and then re-deploy it so now if once run build is run because my django server is already on it's already on right here on port 8000 let's see okay that build is done now now on port 8000 if i refresh that i see new headers so you have to run build every time you see those changes so i'm just going to go ahead and revert that run that build and let's see what we want to do next here so how's everyone doing by the way let's see i want to see what everyone wants to see next so we'll just do npm run build trying to see if we have time to deploy it we're at two hours and 55 minutes that's a little bit longer than i expected because of the issues that we ran into all right so we'll turn that off right there and our server is officially off okay so what do we want to do next uh i guess we could try to oh i want to show you a few issues here so um there's a few things that kind of uh go on with this there's some downsides uh one of these is kind of an annoying issue so if you go to your project let's turn on our server again this these are actually very important issues and i have uh i actually addressed this in my django react ecommerce course on udemy so let's go ahead and turn on our server good thing i saw that in my notes okay so if we want to actually see this here if we go to our react application or our django version of the application if we go here and then click on these links we can see the pages change so what's happening here is we have react handling all of our routing so django is not handling the routing react has taken care of all this the problem here occurs if i try to go to this url manually or do a hard refresh if i do this we automatically get an error so what's happening here so django is looking at the urls here and it's going to this urls.py file let's see let's go back to the root directory i have so many files open it's starting to throw me off here so if we go into the urls file django is looking in here and it's saying okay we see admin we see api and we see this route but we don't see this right here note and then the id now this is kind of an annoying thing this is the one of the downsides there's absolutely fixes for it some of them are more labor intensive but they work and there's also quick fixes but they don't look as good so with this django goes to that default path it tries to render that template but before reacts files can get together and and basically create the page and all the routing because this is all done in javascript the page already loads and django can't find this route and we need react to handle it so again if we go to it like this by clicking on it it works but if we refresh and go to it manually it won't now there's a few fixes one is a i would say it's not a really good fix at all but it works and i would highly recommend against this there's probably a way to automatic automate automate this but what we could do is we could actually do something like note forward slash and then pass in the dynamic value and then it would just kind of replicate that id so we're not going to do that route i've seen people do that but that means that you're literally creating two different url paths one in react one in django and that's not a good one the easier fix that doesn't look good is using something called a hash router so the react router that we used has something called a hash router instead of a browser router so what i'm going to do is change this to hash and all we do is change that but we don't want to change anything down here because we still import it as router and what's going to happen here is if i go back to my main page if i go to any of these paths let's see do i have to refresh i think i have to refresh it oh i need to run that build so give me a second so just do npm run build because i'm using this from django oh so cd front and i could use this from the development environment but uh it needs to be because i'm trying to show it in django we'll use it from here okay so we're gonna let that build we could also turn on our react environment so we'll just do or the development environment so npm run or start i keep doing this from the django project so front and npm start okay so let's go ahead and go back here so right now if we go to the react application what the hash router is going to do is just going to put in this pound symbol or hashtag whatever you want to call it it's automatically going to put that into any part where react is dealing with the routing so that way when we go to today's agenda if we go to this note we're seeing that pound symbol right there so if we go to that directly react will actually handle that so now if i refresh it we don't have that issue now if i take that out that issue will occur because the hash router is not handling that so it looks a little bit uglier but it is a quick fix right here automatically if i go to my domain port 8000 that hash router will be added so that's a quick fix to it um again i don't like the way it looks but if you're not dealing with if you're just trying to get your project up and going most users might not even recognize that it just kind of looks funny there but the hash router actually solves that issue another one would be to literally go into django and replicate every single url and point it to the react project uh definitely not the ideal one now there are other other methods i would recommend looking them up just look up hash or react router url routing issues when it comes to server side rendering that's i guess one of the issues in how i'm deploying it because i'm using django here as the back end we run into this whereas if i just deploy this to netlify right away and connected it to my api this issue wouldn't occur so there's so many different ways of actually dealing with it that's just one of the the negatives that would come up here so as far as the api i don't really see a point in making it restful i could try to do that so with class based views or the view sets and routers it would be easy to make our api restful it's kind of outside of the scope of this tutorial but um i guess we can try it anybody want to see that where we can make it to where we go to the same url and just change up the uh the actual call if you if you understand what a restful api is and how that works i guess here i'll just start it so we have our get notes route and i would just say uh i guess i can leave this route as get notes and what we can do is make all of these take all of these routes right here and put them inside of functions i'm actually trying to think about how to do this all right someone says i didn't notice you're using lorem ipsum since the 1500's all right so let's do this so in class-based views this would be easy because you create a class and then you specify a different function for each view now i've seen people say well that's why you need class-based views because you can't do it with function based views it's not the case you can do everything that you can do with class based views it just has to be done different so let's try this so we'll go into our api and what i'm going to do here is i'm going to create a folder and i'm just going to call this utils right here so this is going to be like util utility functions so anything that we just want to use separately we'll put in here and that needs to be a file not a folder so let me recreate that new file and we'll just call this utils i've actually never done this i just kind of imagined how to do it and it made sense so i think i can apply it here so remember that to a restful api our routes need to look like this so we'll just do this so if we go to notes we'll just add in some comments here so if we go to four slash notes we'll add in the comments later uh if we get a get request this will get us all the endpoints or all the notes if we go to notes and we send a post request this will create a post right now we're going to notes and then we're doing create and that's not very restful that doesn't follow the restful practices so we're just going to go to the same route but we're sending the post so what does that mean here for us for our get notes view well really all we need to do is handle the http methods that are being sent to that route now if we go to notes and then let's just say the id we'll just pass that in then if we do get that's going to get us the object if we do notes and then we pass in the id but if we send in a post request i'm just going to write all of them out or not post but a put request this is going to update our item as long as we send the correct data and then we can do nodes forward slash id and we'll have to update our frontend for this too actually so we'll just do delete so really we have two routes that's it so we have two routes here i'm going to comment these out all we have is notes and then note with an id but we have one two three four five different endpoints that we can technically hit with different methods so we'll save that and let's see how we can do this so get note in notes let's start with notes so let's do the create view so what i'm going to do is take this entire method right here i'm going to comment that out and i'm going to bring that into my utils so i only thought about this so if i completely butcher it i'm sorry but this is just how i imagined it i actually never put this into practice um let's go ahead and remove that decorator then we want to okay hold on a second here so here's what we'll do we'll just do if request dot method is equal to get then we want to do all of this whoops what am i doing wrong here ctrl and then there we go so if the method is get we'll execute this if request dot method is equal to post again this is where class based views are actually cleaner there's just it's just possible to do without them so if the method is post what do we want to do so in this case i'll actually write the code in here and then i'll export them as different functions so if the request method is posed we want to get the data so we'll paste that in we want to create the note and then we want to serialize the note and then we want to return it so i have to uncomment that so i promise we'll make this cleaner in a second okay so then we serialize the note and that's going to be after the create method and then we return it so let's test this right now so we'll start with just this route so now that's all inside of one method here so if the method is post we go through exactly what we did right here so that means on the front end so i'm going to turn on my python server or json my django server here let's just remove all that for now so now we have to go to our views or our urls here and we need to get rid of create node so that's no longer an endpoint we'll save that and that should get rid of the issue and let's just start up our react server the development server so now we're going to stay on port let's see we're going to stay on port 3000 and let's continue here so in order to create an item we need to change the url here so we'll go back to front end and let's see so we'll go into pages note page so create no so now we're just going to notes and we're sending a post request so that's all we have to change here so we changed where we're sending that but as long as the method is right here inside of the view we'll read that so let's see if this works let's make sure so i haven't again i haven't implemented it i don't see any reason why it wouldn't we send the post method we return it that all looks good all right so we'll create a new item test done let's see what went wrong okay api notes method oh okay here we go so the allowed methods what just happened we see this error it told us exactly what happened we need to allow a post method as one of the methods that can be sent to the backend so now we can send a get or a post method so let's try that one more time we'll just do testing new rest api so now it's more restful still did not work uh method not allowed do i need to refresh that let's see give me a second let me try to turn off the server and start it again oh okay i just uh i put all this logic into get note sorry so we're going to take all of this remove it and put that into get notes here so we're going to add in this logic so sorry about the copy and pasting so now we just have to do that to get notes so i'm just going to change this indentation okay so get notes now is going to take in a post method so that's why it didn't work okay so we do if request method is get on the get notes method we also allow a post method if it's post we run this logic right here so now this should work we'll just do new note with rest full api hit submit there we go so we just got rid of a url and all we did was change up the method so we'll clean up a little bit more in a second but let's continue down here so in get note we also want to uh i guess the names here for the actual views should change but we'll keep it at that so we want to allow a get a post a put method so put and a delete method so we're just specifying all the methods that we can allow so that's for the get note method so what i'll do is i'll just leave these commented out right here for anybody looking at the notes here in the github repo once it's uploaded and let's continue here so for the update note we're going to take all this logic we can bring that into get note and we'll say if request dot method is equal to put go ahead and fix this indentation and there we go so if it's a put method we'll run this we'll update the item then in the urls we can get rid of update no need for that it's making our url patterns cleaner now now if we go to uh get note here i'll probably change the name too so i can just comment all this out now i got the hiccup so i'm trying not to try not to have them while i'm talking here all right so now for the delete method we're just going to copy all of that and we're just going to put this in so this method right here gets it doesn't actually take posts i just realized because post will be inside of this one right here so this is get and post this is going to be get put and delete so the last one is going to be delete so we'll just do if request dot method is equal to delete go ahead and delete the note and that's about it again class based views would make this easier but if you want to see how they work in function based views this can actually help you understand it so at this point we need to also change the delete url okay so that's done so now we just have our two urls and let's go into the front end now and update that so in the front end we want to modify that so we'll go into our note page for create note that's done for update note we can get rid of update we can get rid of delete here so they're all going to the same url so i hope that makes sense now let's try it let's test it let's make sure everything's working so we'll go in here new note with restful api we'll do updated go back there we go it's updated we're sending it to those urls if you look at the request here they're all going to that same path and also if i want to delete a note let's go ahead and do note 1 delete get rid of it it's all working cool so um that made it restful let's clean this up though because now our views look kind of ugly here so if you look at this let's comment this one out too if you look at this logic right here there's just kind of a lot of logic inside of one view here so how would we export this into its own method so i want to put this inside of the utils file so what i would rather do is create a method and it would say something like let's see this would be update note like that and we would just pass in the request object into it and then what we can do is take all this logic let's see yeah so we should be able to grab all this logic right here i'm going to comment this out just so i don't delete it yet then i should be able to go in here and we'll just do update note we'll pass in request here that's the request object here and we don't need to add in the decorator because this is technically not a view it's just a method inside of a view let's fix all this indentation and what we'll need to do is import our response method so we are using this technically so let's import that so we do need response we do need our serializer so in theory these serializers could just be brought in right here so the note serializer will also need the model import which would mean that we might not even need those inside of our views so we have the serializer and we have all that so now i should be able to just call get note let's try this i might need to change up the response here so now if we update the note we could just do return i don't think this will actually work let's try it return update note that worked wait did it no no okay so in that case we might just have to change the response itself so we can go into return right here bring that into our view so return response and request or update note would simply return our serialized data so then in our view here let's try this right now so update no oh i also you know what i realized the first time i actually want to retry this first method because what i need to do is go into my utils file so from dot utils and i first need to import this method so the first time it actually could have worked but i just want to see that method first because i actually think that's a lot cleaner so this is new note and we'll go back let's see what the terminal is saying here so name pk is not defined oh i see okay so what i could do here is so basically inside of this method we need to get the primary key i guess cleaning it up won't be as easy all right so i guess i should pass it in as an optional parameter so i could just do uh i believe i can do arguments like that and can i praveen if you can help me out here i see her in the chat i believe i could just do or keyword args or quarks then i believe i could just do the primary key like that and then if anything i can pass that in so the only thing i'm trying to do is just export the methods so they can be completely separate now you can see where class-based fees might actually be nice here making this a little bit easier so update note is going to take in i guess i could just pass in the primary key like that and then just do pk i don't see why i couldn't do that okay i guess the problem here is that the primary key might not always be actually yeah it would always be set never mind okay i way over complicated that all right there we go so it worked so in this case this is what we would do we would uh would go through get rid of all this logic put it inside of its own method and then if the request method was it we would just do uh get note detail or something like that so we'll just remove all that and then create a method here and this one would be called get note detail fix that spacing and so our api is technically restful we're just now cleaning up the actual way that it's working so we pass that in return response serializer data what just happened here okay so what i could do now is just make sure these are all imported so we import get no detail then we can go ahead and bring that down here so if the request method is git we'll just return get note detail passing in the request and the primary key then we could go into delete and then we'll just do delete note like that and then we'll create that method all right so delete note and then we can bring that in here all right does that kind of make sense i know that took a little bit longer like it was kind of annoying to do that but we commented out a lot of this and now we have our restful api this is pretty much what a class based view would do for you so depending on the method we create all these so what i'm going to do here is close it out by just cleaning up this one so when you see the source code you can see exactly what's going on but in this case we'll just do return get notes list like that we'll pass in request here and yeah i think that's going to be it once i finish this up so we'll just put that up here get notes list just wanted to show a new method in doing stuff because you see something different it might not be the best approach but at least you maybe understand it a little bit better or see another option for a time when this might be the better solution okay so we're just importing those i could just do star and import all of them but i'd rather import them manually and then the last one would just be get note detail so in this case okay get notes list and then this would just be an update note method so we'll just do a return update note all right we'll pass in request into that and then we're just gonna quickly throw in let's see what i call that oh that was supposed to be create note like that so we can actually pass that request object down like that so all right so i hope you uh learned something new today with this method and i added in time to the video but we can just make that import really quick let's go ahead and move that to the right create note and there we go so let me just recap this really quick so if the request method is post we call create no if it's get we get the note list then at this view if it's a get method we get the detail if it's a put method we update the note and if it's delete we delete the note just to make sure everything's working we'll go ahead and run through this so we'll just do new there we go we can update it so new is updated we can delete it that removes it our full restful api is complete so restful is more of a practice and a style in how you're building out your apis so um that's going gonna be it then uh we won't talk about deploying it we at this point it's like deploying any other django application i have plenty of videos in that in my course on my youtube channel you can check those out you're just pushing up your react application or your django application and react is inside of it so yeah that pretty much completes it let's check the chat uh thank you so much everybody for the kind words it's uh really motivating to be able to do this and have everyone in here really appreciate it so yeah um i appreciate it yeah if you like the video i mean that if it's useful to you like it i wouldn't tell you just to like it if it actually helped you for sure it would help me too so how to pass an array into some model fields well it depends on what you're trying to do with it it's you can typically in a model field there isn't an array field i don't believe uh you would stringify that so you turn it into a string and then you just have to parse it anytime you're using it so yeah all right well i'll end it now before the stream gets any longer um i guess it's at 3 23 i could do a couple more minutes try to end it at 3 25 so let's see a lot of a lot of people that are recognizing the chat i've been starting to do this more regularly it's nice to see familiar faces and names i'll be prepping some more streams i'm going to do a collaboration with brad i'm probably going to do a django crash course with him but i do want to start moving on to more advanced topics so we'll do that i am getting into react we'll be getting more into javascript too but i also want to make sure the backend developers are also happy with good videos so all right we'll end it here thank you so much for joining we'll see you guys in the next stream

Channel: Dennis Ivy

Views: 16,377

Rating: 4.9745221 out of 5

Keywords:

Id: tYKRAXIio28

Length: 204min 0sec (12240 seconds)

Published: Thu Sep 09 2021