React + Django Integration Tutorial | Hello World App

hey guys so in this video I'm gonna show you how we can integrate a Django and react app within the same project so Django will handle everything on the back end while react takes care of everything on the front end so we're just gonna build a simple hello world app and show you how that integration works right now we'll just render out a template but in another video we will actually build off of this and build a full-fledged to-do app with the REST API where we'll handle all that crud operation so there's just gonna be a better idea of how all this works in just a little bit more advanced so for now what we're gonna do is just run this npx create react app command and we're gonna set this up on our desktop and then drag this into a Django project that we built here so I just ran django - admin start project and that's it so if you look here we have no apps there's no integration so we're starting fresh we're just going to bring in react here and start our server so I have two command prompts open one I have my Django app which I'm seedbead into and we'll just call it to do even though this is a hello world app and in the other I'm just seed into my desktop so from here let's just go ahead and run npx create - react - app and there's many ways to do this but I'm choosing just a simple version because this is just an integration video so we're just rying to get it set up and started so we'll just go ahead and call it react app let's just try that see if it lets us do that and give it a minute it's gonna run some installs and once this is done I'll probably just fast forward this and we'll go ahead and throw this into our Django project okay so that just set up our react project and that should be somewhere within our desktop so let's go ahead and just close that out here and go ahead and find the app somewhere here so just move all these files down and here we go so I think it's in react app right here so there's a react app and here is our jingle project so what we're gonna do is actually just drag the react app into the jingle root directory so if I open up my project here we're gonna see the react app appear within it so that's the to-do app and just give it a second to move that in and what we're gonna have to do is actually go ahead and CD again into that react app and now within the Django project so there's our react app and everything checked out so there's all of our files and I'll just go ahead and make this full screen and it's sitting again right within the root directory of our jingle app so in our command prompt let's go ahead and CD into that so now we're gonna do desktop to do and not a zero but we even go there and then react app and then let's go ahead and just run build right now so this command and get everything prepped so NPM and then run build and get everything set up for our template okay so that should be taken care of I think that ran and PM run bill that needs to be a space there okay so we just ran that build and that should give us this folder within react so what we need to do is connect to things we need to connect our template and then the react static assets so in here and build we need to connect to this index dot HTML file so that's just a compiled react code so first what we're gonna do is actually go into our Django templates directory and we're gonna give django another area to look for templates so in here we're just gonna create another list item and give django another option to find our templates so we're gonna do s dot path join and this is gonna be base directory and i'm assuming you already know django and react at this point this is just the integration so i won't go into too much detail and what this is but we're gonna do base dirt and then our react app is called simply as a string react app ford slash build and that'll give us access to this folder here and index.html sits right here so now that we can use this template what we need to do is actually connect this into our urls that py file so within our root directory in our Django project first we're gonna run an import and we just want to use class-based view here that just allows us to render a template without actually calling a view so we're gonna import from Django views dot generic import and then we're gonna do template view so template view Capital V there and we're just gonna create the path and what we're gonna do is allow the base URL to be our jingle app so we're just gonna set that as empty there and we'll just do template view and because this is a class-based view we're gonna do dot as underscore view and then we're just going to give it the name of the template that we want to find so we're going to do template name so it's template underscore name and that's going to be equal to that index.html and what's happening here is make sure that's right and I need to be a string there what did I mess up here oh I put a quote around template ok so what's happening here is because we included this path right here into our react project into this build folder right here we're able to set a file path just to render out this template so this built template every time we run that run build command so index dot HTML so if we set that up and now connect our static files so we also want to connect to static and then all those react static files we need to make one more configuration down here so down in our settings dot py file we're gonna do static files dirt so static files underscore ders and that's gonna be equal to you just to list there and here we're gonna copy instead of writing it out again just because I'm a really slow typer when I'm talking we're just gonna do this Oh s dot path and paste that in and change up one little thing there so instead of react app build we're gonna do react app build and then we want to go into this file here so for slash static so now we know to get all the static files here so right now our jingle project if we open it up I believe it'll just be it'll give us an error at this point if I run my server so let's go ahead and open up our to do app and if I run the server ok so it gives us that default app but if I make some changes it's gonna give me it won't show our changes right now so this actually covers that configuration process so what I'm gonna do now is actually just work within that react app and render out some template data but the configuration is done so every time we go into our Django app or our react app so let's actually go ahead and try that we're gonna have to run run build and I'll just show you what I mean by that so if I open up within react and that is within source and we'll just work within app dot GS and I'm gonna turn on the syntax of babel make sure that's all cleaned up and if i take this out and I'm actually gonna copy and paste my own code here so give me a second I'm gonna drag this in from another project here so I'm gonna copy and paste just within our app wrapper here and what we're doing is throwing in one more Center to call them and that's what you saw in that preview and then just three bars here so those are gonna be those to-do items so if I save this and I actually need to also update my app to a CSS file within react and I'll just go ahead and remove all of this and paste that in so you can copy this from my source code or just write that out it's not too much so if i refresh my jingle app it's not gonna work I'm assuming you know this if you know react we just have to run build again so in PM run build and if i refresh this in a second we should see what I showed you in that demo okay so that bill just ran and there we go there's our static data with our styled app so let's go ahead and recap everything so I started off the video with a Django project set up all I did was just ran Django - Adam and start project then I went ahead and ran create react app put those into a folder next to each other out here so within my desktop I just opened up - or create a - apps side by side dragged in our react app into our Django app so this to-do app once we were in here I went ahead and ran those builds so we wanted to make sure we had this folder and within settings we wanted to make sure Django could find that react template so within our templates right here not actually additives and templates within that directories list right here we just created a file path to our react app and to that build file so build right here which stores index.html once we did that all I had to do was go to our URL path and get the view that just allows us to render a template we find that template because we can find it right here and the last thing we had to do was connect our static files so in static files we wanted Django to find the static files within the bill folder and within static which is right here static and all of these so that all it takes to configure a jingle react app it's not much harder than that if you're going through the customizations and setting everything up yourself there's different ways of doing this sure it's the steps are gonna be a little different but if you're if you're just trying to get started this is all it takes so in the next video this isn't gonna be a series necessarily but I will build a to-do app based off of this so make sure you're watching that and make sure you're subscribe if you want to see that so a really quick note I was just about to start editing this but once you download the source code if you are working with my source code I will exclude in the github repository at this build file and this node modules file so make sure to run this build and also you might have to start your own react app and just drag it in here because there are too many files for me to throw up on github so this will be missing so make sure you have both of these and properly set it up so you might again just have to set up your own react app and follow along it's going to be kind of hard to drag that in if you're completely new with react

Channel: Dennis Ivy

Views: 118,797

Rating: 4.9233928 out of 5

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov, Django, Python, React, React Js

Id: F9o4GSkSo40

Length: 11min 0sec (660 seconds)

Published: Sun Jan 12 2020