Django + React JS - How To Integrate React Into Your Django Project

in this video we're going to be integrating react into our django project so as you can see here this is a default react template and it's running on the django port 8000 so what we're just going to be doing is that we're going to have our jungle project and our react project so we're going to integrate that react project into our django project and then we're going to render the react template as our django template so this is just the basics of the beginning of react and django integration so it's going to be a very simple one and a very quick one so let's get straight into the video so right here i have two command prompt windows opened now this is the first one and right here is where i'm going to be doing everything about the jungle and right here for the react so they are in the same directory and yeah i'm going to create my jungle project that's the first thing i want to do so i'm going to say django admin start project and i can just name it jungle bridge something like that so now that is going to create the jungle project for us in this directory so now when that is done i'm going to come here also and create a new react app so that is done if i press d i r you can see right here now that i have a new folder named django project so i'm going to leave it like that and right here in this window i'm going to create a new react app and i'm going to say mpx create react app and then let me just name it react up like this so this command is going to create a new reactor for us in this directory so this directory is the same as this directory as i said in the beginning i open the same directory just two different windows so um the mpx ray creates react app command is a lot slower than jungle so as you can see within like two seconds or five seconds the jungle project was created but for react it takes a little bit longer so i'm definitely just gonna speed that up and when it's done we'll continue so as you can see the react app has created successfully so what i want to do now is to first of all check so as you can see now we have the jungle project and then we have the react app so what i want to do is to drag this react app into the roots directory of this jungle project so i'm going to open up the folder now this is it i'm just going to click on this reactor and then drag it into django project so now you can see we have it in here now this is my jungle project with the react app in it so i'm just gonna import this project into the visual studio code so just open this up and i'm gonna open a new folder and then i saved it as the jungle react and then i'm just gonna open up this so when i select folder it should open that up for me so let me just give that a minute so as that is opening up i'm just gonna come into the react app so right here i'm just gonna cd into jungle project and then in there i'm gonna cd into the react app i just want to make sure i'm inside that react app in this second terminal so yeah i'm in the react app and here let me go into the jungle project so right here the jungle project and right there react app so let me close this up to make it more neat so that's it and then right here so the first thing i want to do is to first of all run build so what i mean is that let me just remove all this and then close it so right here in my react app you see that i don't have any build folder so i'm expecting you to know react and jungle at least to know to have an understanding of it because i'm not going to explain that from scratch in this video but here i don't have my build up my beaut folder because i haven't run build so right here in my command prompt we have the react app i'm just going to say npm run field now this build once it's done successfully it's going to create a new folder that is just gonna have the template files in it so i'm just gonna give that a couple of seconds to do so right here we have that done so if we come into the visual studio code you see that we have this new folder named build so what we just want to do now is to connect this build so in this build you see that we have the index.html so we want to connect this index.html to our jungle template so um as you know in django for django to be able to render an html template we need to configure that in the settings file so let's quickly do that but this time around we are configuring the template to link to this react app template so let's come in here settings.py and then what we just want to do now first of all we need to import os right here so i'm just going to come right here and press import os and when that's done we're going to scroll down to where we see templates and under the templates we're gonna go to dares so right here say os.path dot join and then we'll save base there based on this code there and then we're going to say from the roots directory it should go into react app react up slash build [Music] so that is where the index.html file is located reacts are should build so that's where it's located now we can just save this and um what we just want to do is to also configure for the static files so in django we have what we call the template files which are the html pages as i said and then static files are any external file we use in our template rendering unless we have an external image or we have any external css file or javascript file those are what we call static files in jungle so now let's quickly set that also so we're just gonna scroll down but before we scroll down let's make sure you just copy this to avoid repetition now we scroll down and right here we say static files underscore theirs and then you just paste it but now under build react app slash build then slash static so this is where all the static files are located css js and media so now we have that configured we can easily save these and then what we just need to do for this to be complete is to go render or go do some url mapping so in our django project we're going to create a new file i'm going to name it views dot pure now in here is where we're going to render the html page so first of all we'll say from jungle dot shortcut import render so this is going to allow us to be able to render a template file so now say df so we're having a new function and i just taken a request and i want to return render i want to request for index.html so now we're just going to come into the urls.py let's cancel this up and then let's make sure that we're importing views so from the directory import views now we can say path when they go to the home directory if you take them to views dot index and then let's just give it a name of index now we can save this now i'm gonna come into this command prompt and i'm gonna say python manage.py run server [Music] so now this is just going to run the jungle project on the localhost so that should just take a couple of seconds to run so now as you can see it runs successfully we just need to go to this port in our browser so we open up our browser and then we can just simply paste that in there and then go to the glucose that should load up within a second so as you can see everything is working successfully that was how easy it was to just connect the react app into our jungle project so this is the default template file here so if you know react very well then i'm sure you know what to do when you want to make some changes you can edit this out and then put your own template but for now i just stick into connecting the template files together so i'm also going to have a tutorial in the future uh on jungle and react integration we're going to build a project using django unreact so that's going to be um very soon so you guys should stay tuned to the channel so having all this said i really hope you enjoyed this video i hope you understood what we did in this video so if you have any question drop it on your comment and don't forget to smash that like button and subscribe and i will see you in the next one

Channel: Code With Tomi

Views: 99,550

Keywords: django, django tutorial, react, django react, react js, django react js, codewithtomi, code with tomi

Id: FhkqMHxchZ8

Length: 10min 46sec (646 seconds)

Published: Mon May 03 2021