Django and React Tutorial // 1 - Creating a Fullstack Application

so in this tutorial we're going to create an application that combines the best of both worlds of Django and react so if Django the popular Python web development framework and react the now extremely popular front-end framework for developing you eyes so I recommend if you do not know much about Django then please take a look at one of the introduction courses on this channel for Django there's plenty that you can watch to get started on that and for react there's also plenty of courses and videos on YouTube I'll link a few in the description of this video and so if you are then comfortable with working in both of those then let's get started so here I'm just inside my terminal I've got an empty directory here and so what I'm just going to do is I'm going to work out of this directory so I'm going to make a directory and we'll just call this ej react and so we change into this folder I'm going to make a front end folder and a back end folder so now we have back-end and front-end and so before we continue I'm just going to show you that I'm going to be working out of visual studio code so I've decided to start adopting this for Python now as well and for Django specifically so if you aren't using Visual Studio code then that's fine you won't be affected by not using it you can still use something like sublime text but for front-end frameworks I already use Visual Studio code as my preferred editor so this just makes it a lot more convenient to work out of one editor and so if you want to get started with it you can just download it for your computer here and then to start actually configuring it you'll want to go here to the docs and so let's just specifies a couple of things so here you can just read a little bit about Visual Studio code to catch yourself up to speed but I mean it's a normal IDE very intuitive and definitely my favorite so far and then you'll just want to go down to Python and you can go through a tutorial here and just check out a bunch of the settings here that you can define now I'll show you this inside the project as well in a second but just for for clarity I just want to show a couple of these things for linters so that's code language highlighting pilant is the default package that's used for that and so we're going to just define some settings to do that so one thing to take notice of is here the python linting lint args and then going down as well the pep eight you can then specify errors to ignore which will also have to define in a second as well so all in all go through this whole this whole set up just reading about it and then down in the settings reference you can see all of the things you can describe and set inside your general settings so just like the Python path virtual environment path and a whole bunch of other stuff here as well so once you've downloaded that then we can get started but so now let's go into our terminal and here I'm going to go into the backend and so here what we're going to do is we're going to start by creating our virtual environments or said virtual and V in V this will create the virtual environment for us and this will just be used for Django so he I'm going to activate it and so now I'm just going to say puppet install Django to install the latest version which is two point zero point seven right so now we're also going to need the Django rest framework so if we go here into Chrome and just search for Django rest framework yeah you can go to the website and check out the documentation we'll also be taking a look at this but so now to go to installation yeah you can say clip install Django rest framework so we'll just do that so now that's installed well let's just clear this out see how we have the Ifrit environment so now let's just call Django admin start project and I'm just going to pull it EJ react it's now for you let's this out we have that folder day and so now let's go into Visual Studio code so now I've opened the EJ react folder we have the backend and the front-end is obviously still empty but so here we have DJ react and we have env so I'm just going to rename that DJ react folder to become source so this is where the Django project is going to be stored in and so now with this setup we're going to check out this blog post here and I'll link this in the description as well but it's automation panakam and then just type in that URL there and so basically this is just a guide to setting up django inside Visual Studio code and so basically you just have to install these three plugins once you've done that this is just for Python syntax highlighting once you've done that then you're pretty much good to go and then if you scroll all the way down then you'll have this settings here that you can add to your project and just make sure you install those dependencies as well so what you'll eventually land up with you if we just create another folder this is going to be the dot vs code folder that should be in that directory so in your project rhe you've got vias code and inside there you're going to have because settings about JSON file and here you can see then it says workspace settings and this is by default the settings file for your project so you've got your user settings and then you've got your workspace settings and I'm going to just copy the workspace settings into here so just to zoom in and check those out okay so yeah basically it's the Python path alright so I'm on Mac so mine will probably be different to yours but if you have a Mac well then it's probably going to be similar to this but Windows then just find out what your part is for you then you've got format on save linting pep 8 enabled which is true the Pyland path I just sit as pilot pilant args again this is by default what's specified over here pylons enabled must be true and then the the virtual environment path that's quite important so this is relative to the project that's actually open so this meaning the DJ react folder this folder okay this virtual bombing path is relative to that so here dollar and in the brackets workspace folder is referencing the DJ react directory then it goes into back-end E&V open Python 3 okay that's the virtual bombing path and then this linting pipe a togs is just to ignore the specific error that I didn't like which was just about the maximum string length on a file so with this setup you're good to go obviously you can change this to suit your needs but that's how I've set mine up and so now we're good to go so now you can toggle your terminal with this shortcut key so if I just open mine up this brings up the terminal and this is the same thing as accessing this so we actually won't even need this so I'm actually going to deep activate that and I'm going to go back one into the front end and here I'm going to call create react app and if you don't have that installed then you're just going to need to install it so this is the create react up library that was created by Facebook for the react developers and so here you can just follow the instructions here so NPM you can install it and you just need node on your machine and then once you've got it then you can create a react app just by calling create react app and so once you've got that installed then here we can call not inside here but here we will create a react app and we're just going to call this GUI so meaning this is the front-end display of our application and so I'm just going to let that install so yeah if you list everything out we got the back end and the front end so we're going to go into the back end inside Visual Studio code and because I can only have one thing running in this terminal here I'm just going to use this terminal for the front end and this terminal for the back end so we'll activate the virtual environment and then we'll go into the source folder and now we have the deejay react and manage the PI file and so if we start by running the server it says we have some unapplied migrations so let's do that let's say Python managed to acquire my grades cool so there's our migrations done and so now we can run the server and there we go so let's check that out you go here and we have our local server running for Django although we're not actually going to be using it as the front end we can just see that it is working at least and so to get started let's just close this terminal here and say python managed up I start app and we'll call it articles as a basic example and so we're going to add articles to our settings so if we scroll down to the installed settings here then we're going to add articles and we're also going to need to add the rest framework that's coming from Django rest framework so if we go back to the installation here we need to add rest frame which are installed apps we need this URL to be in our URL patterns so that's good to our URLs here and let's just close that get rid of those comments and I'm gonna change this to a path and we'll just fix that up include rest framework URLs cool and we'll just add a comedy as well and what else do we need so we'll just add this rest frame with default settings here so we go into settings all the way at the bottom just add that in there cool so check if everything is working so far so let's just run the server and it's telling us that name include is not defined so that's just go there to path and means import include and seems everything is good so far cool so inside our articles in the models we're just going to get started with the basic model and this is going to be the article that's going to come from Django's model and I'm just going to specify a title I'm just going to be a character field and it's just going to have a maximum length of 120 and then we'll specify content which will just be a text field and then we'll do you define string of self and just return self dot title just like that so now that's fine and we're just going to migrate everything so we'll say make migrations so we've created the article now and then we'll say migrate cool so that's all good and now we can just add that to the admin yes or say from of models import article and then call admin site register that article and let's close that off now great so let's check inside our admin we also need to create a super user so let's close the server they call create super user and just put in some details for this and we'll run the server and let's login so we've got articles so let's just create two articles now alright so we've got two articles here and so we're going to use the rest framework as our default API that we're going to use our front-end application so what we're going to do is just go to API guide and just take a look at the serializers now serializer is basically just a way of converting JSON data into a model so that's that's why we use serializers and so to get started we're going to work out of our articles app and I'm going to create a new folder inside there and call that API inside API we need to initiate that so we'll create the init file are we not actually going to do anything in it and we're also going to then create a serializers papaya and here is just where we're going to specify our serializer so let's import the serializers from Django rest framework so we say from rest framework imported this and then we're going to just create a class which I'm going to call the article serializer and this is going to come from serializers and I'm going to make mine a model serializer so this means here I can specify the class meta and this means we just need to specify the model as article so we just need to import that now so we'll say from models imports article actually that should be articles models so they will specify the article and then we just need to specify the fields which is just this title here and we just specify the title and content because those are the fields on the model here so I'm just going to close that now and then this article serializer we need to use in a view so I'm going to create a new file inside API which will be reviews vampire and so here we're just going to import the generic views so if we go up to generic views in the documentation and we're going to use the list API view and we import this from from rest framework generics so here let's safe from the rest framework dodging Eric's import and I'm going to import the list API view and then here we'll specify a class based view which will make the article list clear and that's going to come from this list API view and for these API views or we just need to do is specify a query set so this is going to come from the article objects so I'm just going to make it article objects not all and I'm going to import this so we'll save from particles of models import article and then we need to specify these serialize of class so we set serializer class equals to and here we need to import serializer so you say import the article serializer and specify that as the serializer class and then i'm going to make another detail which is just the detailed view so i'm just going to call it the detail view and that's going to come from the retrieve API view so let's just copy that in there so that retrieve API view is what is inheriting journey in the article detail view and again I'll set the query said two objects on all and the serializer class to the article serializer and so now we need some URLs so okay the urls file inside the api folder and so first i'm just going to import the path from Django URLs and then we're going to need our two views yes I'm saying import the article list view and article detail view and then here we just specify the URL patterns equal to list here and just specify the path initially as an empty string this is going to be the article list view as view and it's just add another one here I'll make at the detail view and then here we're going to specify the primary key as the kind of regular expression that it's looking forward to call this detail view and so now we need to actually in just include this URLs file in our project URLs so it got include here and then here we'll just add another path and this is going to go to API and we're going to say include the articles API URLs so just like that so if we check if this is working it's not saying we have an invalid syntax let's go to here so we just needed to add a comma D so now everything seems to be working and so let's just close off a bunch of these files so we've got the views done we've got these serializer you don't need our settings open and so lastly let's just check that it's actually working so we've got two articles already so let's go to the API URL so slash a Piana and then if we press ENTER and we get a list of the articles in our database and we can also go to slash primary key and we get a detailed view of that specific article so this is about as complicated as it will get for this tutorial on the rest framework let's actually check out the front-end stuff now so I'm just gonna close these folders and we should have our yes so our create react app is done so let's go into the GUI and we'll type NPM start so this will run that server and so now we get our local host on port 3000 and we get this default sort of page exactly like how Django has so I'm actually just gonna close a bunch of these files yeah and so now let's actually grab the data that's coming through from our API and display it in our react app so we've got the GUI folder inside the front-end folder and currently if we check out source we've got a plot CSS app dot J's and this is where our app component is being created and that is being rendered to the Dom inside index rjs and so we can immediately delete that say the logo we don't need that and that means in apto J's we can remove that logo and okay so the reason for that little faulty save thing is because our vs code is inside the project directory so actually we'll want it to be inside the backend so that it does not apply this whole linting to our front-end so this is only inside the backend so now if we change something yeah so let's just add something like this save and now everything fine cool so yeah we've removed the image and if we take a look at package JSON we've currently got react installed we are done and react scripts and so what I'm going to do is I'm gonna build this you are simply just using a framework called ant so the ant design is similar to the material UI design it's basically a component library that's been styled already so you can check them out here and if we click on getting started you can see all of these generic components that they've made which you can then just import and customize if you really want to but so for now let's just get started with installing it so we'll just say npm install and D and then - save so that's actually inside here we'll say actually making sure in the right folder which we are so we'll say npm install and the save okay so now that this is installed we can start using the ant design instead of inside our project and so what you want to do is you want to import the CSS file so that we can get all of the styling so let's just copy this and inside our app file I'm just going to import that and I'll just get rid of that comment and I'm going to delete everything inside the app components the other stuff and now we actually just want to start looking at how we can structure this design so what I'm going to do is I'm going to look for the layout so if we go to the layout component and you can see a bunch of different layouts and I'm just going to take this basic one here so you can grab the code just like this and then click copy code and now we're going to create a components folder and a containers folder so inside the source folder I'll create components and I'll create containers and so inside the container we'll want to create our layout so I'm just going to create layouts ljs and I'm gonna paste everything in there but we aren't rendering this to the Dom so I'm going to get rid of that and I'm going to import reacts so I'll say import react from react just like that and we're going to create our own component so I'm going to say the custom layout takes in props and then just returns [Music] something so I'm just going to grab the layout there paste that and we'll probably want to just tab that in a little bit and so now the custom layout is the default export so say export default custom layout and here inside the content so this content part here we've got the stove and I'm going to just tab that there and inside the d'oeuvre is where we're going to want to render whatever is being passed into the layout so I'm just going to output that dynamically and say prop start children so basically what that means is that whatever we wrap this component around it's going to include that stuff inside this display so the custom layout we're going to import into app Jas so let's do that here so we'll say import custom layouts braum and this is going to come from the containers layout and we'll just take that component tab it in a little bit and just like this would be a soft closing tag but because we want to wrap this around something we'll just make it a wrapping tag like this and so immediately if we check what this looks like and that's actually just to run the server so you're able to say npm start then we get this little display that is the status showing and that is the same thing as what was right here so this is all working the only difference is that here were saying content but now there's no content being displayed because there's no children that is being wrapped inside this this component so let's take a look for a list component and that's this one here so basically we're going to use this to list out our articles and if we scroll down and we can take this one so the heat code will just click over here and just click copy code and now I'm going to go into components and inside there I'll create a new file which will be article da jeaious so here I'm going to start with importing react from react and I'll say constant article takes in props and it's just going to return some JSX just like this so get rid of that and we don't want we don't want any of that inside our components so it's it's just take that out of the component and the import put at the top here so we're just returning a list item and we just don't want that comment there so we are going to export the article as the default exports so I just say export default article and so now this is going is what we want to use to display every type of article so at the moment there's this list of articles that will be displayed but we will eventually remove all that data and display just one one article component and then we will render all of them inside a container so what I'll do is I'll create a container here inside containers and this will be the article list view objects and again I'm going to import reacts just like that and I'll say class article list which extends from the react component yeah we need to say render which returns something and we'll say export default article list and so here we're going to want to render out all those articles so this article component being exported is what we'll import inside the article list so we'll say import article from we need to go back to components article and I'm just going to render it out of the cow just like that so now our article list is grabbing well is returning the article component and we will change this in a second but now our article list component needs to be outputted and that would be inside our app.js file inside our custom layout so grab the article list and we're going to import the article list from our containers and we will just paste it inside here as a soft closing tag and so now if we check what this looks like now we can see all the articles being displayed as the content for this little UI so now the only thing to do is basically to make this display the data that's actually on our server so we need to get that data and so to do that we're going to use a package called Axios so I'm going to install this and say npm install Axios and - - save so now if the axe is installed I'm just going to run this again and so what we now want to do is we want to take all the data coming from the API and basically display that as the data that is being displayed here in the article component and so what I'm actually going to do is I'm going to call this articles just to actually be a little bit more specific and we're going to import articles like this and I'm going to take this method outside of the article function or the article file and I'm going to put it here inside the article list view and now I'm going to specify the data equal to something that's going to come through in this in this component and so that means this property can actually be defined thanks to the props that's coming through here and here we just need to specify the data source so I'm going to make this props dot data now at the moment the to make this still work the same we would say dot equals list data and if we check that still running so this is still working and actually let's get our app CSS file let's get rid of all of that and all of this as well and actually we might as well just get rid of the whole file there and yeah so now this looks a little bit better so why we installed access is because access is a package that is sort of like Ajax that you can make requests to post or get from servers so that's what we're going to be using it for now so inside the article list view what we want to do is we want to query from the API and then render out all of the articles that are coming through from the API so to start off I'm going to go inside our article list component here and I'm going to specify the state and inside the states it's going to have an array which is empty and that's the articles and we're going to store the articles coming from the API inside here basically we're going to use the component dead mount method because that means when this component is being rendered then it must get the data and so then update the state so this method will be called every time the component is being reamed is being mounted so we're going to import Axios so we'll say import Axios from access like that and simply to use it we just have to say access get and then we pass in the URL and this is going to be poured 8000 slash API so that's the the article list URL to get the list of it of articles returns a promise so we can say dot then and then with that response we then want to set the state and what we want to set are the articles so the articles is going to be the response data because data is going to return the actual list of articles so if we actually see what this looks like it's let's log out the response data and let's just inspect your and so now we get this area here that says no access control header is present so that's a server-side error so what we want to do is we want to go into the source folder of our back-end into DJ react into settings and we want to specify the headers so that we can make requests to the server so we're going to need a package for that which is course headers and so here is the github link so it's django course headers it's a separate package to the rest framework package so we have to install it separately so we're just going to say pipe install and just paste django course headers there and so we need to add this as an installed app so we're going to just go up here and I'll just paste that in there so now we've added course headers and then we also need to add middleware so we're going to copy the course headers middleware the Django middleware is already in there so I'm just going to add it at the top of the middleware just like that and then I'm going to just specify course origin allow all to be true just so that it does work so at the bottom here I'll just say that equals to true right so now with the course headers package installed I'm going to run the server and so now go back in here and refresh the page now you can see that it is getting the from the API they inside this list and so now we just are yet to actually see this being outputted here so let's close these settings file and so we are getting the response data but we aren't linking this the state data to the data property on the articles so here we just have to say this that state table articles and so I'm just gonna keep this here for now but we probably won't need that anymore so now you can see the actual data is being rendered that is in the console but we can actually close that now and so there we go so this is the first article that was the second article so it actually is working but obviously there's a few fields that we're missing and so that is just minor details that you can add onto the model to improve and then just render the data here inside the component so like for example the description just add a field onto the model which is description and then that data will be passed through all the way here and the description field will be displayed so as the last thing that we can try and implement we've got this list view that is working but now let's try and get the detailed view working so to get started with the detail view we're just going to need to install something which is the react rooted on package so I already have this installed but it is the reactor rooted on package so just type NPM install - they're saved and then reactor to dom and basically what this is just used for is for redirecting inside our application so for example creating different pages you would use react rooted um or something like that so let's run the server again and we're going to want to start off by creating a routes file and the roots file is basically just used for defining all the roots that are going to we're going to want to display or contain so we'll just say roots jsut we're going to need react from the act and then we're going to need a package or component from the package which is route and that comes from reactor eater Dom have you just installed and then I'm going to create this component based Reuter which is just going to be a stateless component and actually it can just return j6 just like this and we'll just export the default as base Reuter and so inside here I'm going to return one dev because this will be our our one component that we are returning and we're going to use this root component which is a soft can closing component and here I'm just going to specify two parts first one is going to be to the ListView and the second one is going to be to the detail view so I'm going to specify an exact exactly this path and the path is just going to be slash so when we go to this part will display the list view and the component to render I'm going to import so I'm going to take from here and cut that out paste this here that is the article list so the article list component we want to display on that path and then I'm just going to paste it and I'm going to specify when there's an article ID so this parameter when you just specify a colon meaning that this is the parameter you can give this any name you want but indicating this as a parameter then we would want the detail view component to be there so with the base Ruta we can then import that into our app component and I'll do this above the CSS so I'll say import base Reuter from roots and then we're going to need the browser router component component so that it also comes from the reactor rooted on package and we're going to import it as Reuter just to be more clear so now the Reuter evaluates all the roots that we have and depending on the path that we're on so basically determining what needs to be rendered but we've defined our custom layout and the layout is meant to be displayed all the time so the Reuter I'm going to specify here outside of the custom layout and so basically basically this means the custom they are to still always going to be defined well displayed but then here we want to put the base Reuter to then evaluate what component needs to be the font that needs to be displayed according to these roots here so we don't need to import any of those views all those components in here except for the custom layout and then every time you want to add a new route or new path then you just add it here to the roots JS file so if we check what this looks like it's still working and if I go to slash one then it's still working obviously we want this to be a specific detail view but it's still working at least and so now we'll just want to create a new container which is the detail view so I'll just say article detail view is and I'll copy everything from the list view inside and paste that there and we can close off the roots and that should be enough for now so yeah we don't need any of this in fact we don't need articles and we can just rename this detail and then export it as detail we are not returning articles and in the state we're only containing one article which is an object and so we still have the component dead marked but now we're not written we're not calling the base API rule you API URL with varying the primary key of the article that we want to view so inside this dynamic output here this would be the ID that we want to call and we can get this just by matching the property according to according to this article ID parameter and so the way that we just do that is we'll just say that's a constant article ID equals to the stop props and then we say match parameters dot article ID so that will get the actual article ID meaning if we went 2/1 then the ID is 1/2 the ideas - and then we just pass that in there so meaning get that that article from the database and then we want to set the state of the of the article equal to the response data and we can get rid of that and then here we want to return something that displays the actual article so I'm going to import another component from the ant library and this is the card component and then here we'll just want to output that card and I'm just going to specify the title which will be the title of the article in the state so we say states that article title and then here I'll just put a paragraph tag and again we'll say this without state article content great so now let's take the article detail view go to our roots and we will import it as well so say import article detail which comes from containers article detail so now if we go to for example slash one now we're only seeing what we're seeing a detailed view of the article that we queried from the database from the API so it is working so now that's just improved the navigation so maybe add some links to go back to where you were so we can go to the layout and we'll just improve the navigation in the breadcrumbs so I'll remove one of those breadcrumbs and what I'll do is I'll import a component from the reactor rooted on package so import from reactor rooted on and this is the link component and link just allows you to navigate a little bit better between parts so we wrap it around whatever we want kind of like an anchor tag and we have to specify the two property which is what like a URL so I'll say two is equal to slash so when you click on list it will take you to that path so now if we check this out we click on list it takes us back and now let's add a link here on the article so we'll go to the article and we'll change the href tag here so this would we would want this to be it I put it dynamically as well relative to the actual ID of the article so here I'll just do that and then wrapped us inside the dollar curly bracket and this is the item ID and we just want to put a slash in front of that so meaning it's going to go to slash one more / - but we want to pass the ID from our actual API so let's go to the backend source articles and we need to go to our API serializers and make sure that we're passing in ID here as one of the fields otherwise it work because we're not getting that data and so now if we click on test one it takes us to one and we see the data being rendered so it seems like it is working so let's just close off those Python files and I'm going to remove the footer from the article so that we don't have two photos being displayed and so that seems fine our layout seems fine as well our routes are fine and our article list we could actually get rid of this because we're not using it and we can get rid of the console.log as well and so our files are pretty clean now but this is where I'm going to stop the tutorial and I'm just going to talk about what you could improve or add on to basically finish this off so basically we have our article component here which we took from the ant library and all we want to do is just basically get the data according to what we want to display here so like we have the title we're getting that we have this description content we're getting that but I think those were two different fields so maybe you want to add a another field on the model which would be content so what we would just do is we would go into the back end go to the models add another field here and let's say that would be description so we're to add description here they need to go to the serializer and that is the field in here as well so description and then we'll go to our article list view let's just add that there so we go to the article list view and then we would still be passing the dart in here so we wouldn't even have to look at the article list view we'd only only need to look at article and just make sure that our our fields are being output outputted so description is being called out content is somewhere should be somewhere so yes content is here so content has been hot putted so we just have to make sure that all of the fields are being outputted here on the article and then in the detail view same thing we would just come here and add whatever we want to make this look good and just make sure we're outputting that specific data on the model and so that's the basic approach to how to make this work even though this is a basic tutorial the concept is pretty straightforward having the API and Axios to get that data and then just output it in a simple way using these components so so as some kind of assignment or way that you could try and improve this maybe trying to add some more functionality or both on the backend and the front-end so for example add a create view in our API and meaning that you would be allowed to post to that specific route on the API and then add an article create view here on the front end so that you which would have a form that you could fill in and create an article which would post to the database add that to the database and hence add one one more article to the list of articles to display on the ListView so something like that would be one way to to practice this out a little bit so if you enjoyed this tutorial and you want to see something a little bit more in depth and just leave a comment down below and otherwise thank you for watching if you enjoyed please subscribe for more and I will see you in the next one

Channel: JustDjango

Views: 295,671

Keywords: django tutorial, django react, django react tutorial, django fullstack, react fullstack, django fullstack application, django and react, django and react tutorial, react and django tutorial, react django, django rest framework react, django and react project, python django react tutorial, react and django project, full stack python, full stack python javascript, django react tutorial 2020, python django tutorial, django

Id: uZgRbnIsgrA

Length: 50min 36sec (3036 seconds)

Published: Mon Jul 30 2018