Django & React Tutorial #3 - React Integration Using Webpack & Babel

[Music] hello everybody and welcome to part three of this tutorial series in this video what we're going to be doing is adding react and adding kind of a front-end app to our project now this will be the most amount of setup we do in this series so don't worry it is slightly painful to go through all of these steps but i just want to tell you right now all of the code and all of the resources will be linked in the description so if something's not working for you you're getting frustrated which is definitely a real possibility when going through this many steps please just have a look at the code in the description you can copy it and just paste it into your script and just make sure your directory structure looks the same same as mine because well that will make a big difference when it comes to this setup anyways we need to add react the first thing we're going to need to do for this is we need to make sure we have npm installed so i'm going to open a new terminal here you can just press the plus sign in vs code to do that we're going to cd into our music controller main directory and then we're just going to type npm now we're not going to init a npm project yet but just go ahead and type npm make sure that command works if it does we're good to go if it doesn't make sure you download and install npm and node.js all right now we're inside a music controller next thing we're going to do is actually create a new app inside of our projects we're not going to call this one app in fact what we're going to call it is frontend because this app is going to store the front end of our project so what we're going to do is go django hyphen admin start app front end like that and now we have a front-end app inside of our directory and this is where we're going to be working now so now we're going to cd into frontend and what we're going to do is create a few folders so the first thing we're going to do is make a static and template folder we're also going to make a source and components folder now this app right here is going to be storing all of the stuff related to our front end so related to actually the react aspect of this project there's a lot of files here this where all the javascript is going to go and just keep that in mind this is strictly for the front end where the api here is strictly for the back end all right so inside of here first thing to do new folder we're going to call this one templates we're going to make another folder as well i'm going to call this one static so our static folder is going to hold all of our static files so pretty much anything that the browser would cache and in fact just so we can separate all of the different things inside of here we're going to make three folders so we're going to make the first folder we're going to call this frontend like that this is going to store our main javascript bundle you'll see how that works in a second now we're going to make another folder make sure you're highlighted over static by the way otherwise you'll make one inside of frontend but inside of static another folder i'm going to call this one css so now we have css front end and finally one last folder you can take a guess out what this one is going to be but it is images so these are the three main things we're going to store inside of the static folder all of our css all of our images and then front end which is just going to actually store the bundle of all of our javascript which will come from our source code which we will see in a second now quickly uh actually yeah we can just go ahead and make this other folder now let's bring another folder inside a front end this one is going to be called src standing for source and then inside of source we're going to make another folder and this one is going to be called components now when we talk about react we have react components those will obviously go inside of the components folder so hopefully that's clear but that is what we have that's kind of our directory structure that's all we need in terms of folders now what we're going to do is init an npm project or whatever it is that that stands for we're going to do mpm init hyphen y and what that is going to do is create a node modules package json and all the other things we need uh for our front end project so npm init hyphen y don't worry if this like doesn't make sense to you and you've never done this before you don't really have to know what all of these files are doing and their purpose you just kind of have to get the setup going and then you'll be able to do all the development that you need so we'll continue with the rest of the setup in just a second but i need to thank the sponsor of this video and this series which is algo expert algo expert is a coding interview prep platform and i can honestly say that it's one of the main reasons i was able to land a job at microsoft in a matter of a few months i was able to get extremely good at coding interview questions from following along with the great video explanations that are on the platform if you're looking to land a software engineering job or just improve your coding ability then go ahead and check out algo expert from the link in the description and use the code tech with tim for a discount on the platform so we have our package.json inside of here that is good our node modules folder actually should come in after we do a few things here so now that we have that what we need to do is install a bunch of stuff from npm so essentially npm is going to store all of kind of the modules like react it's going to store babel it's going to store webpack it's going to do all the things that we need to actually transpile our code and get it ready to run in the browser so the first thing we have here is we want to do npm i and then webpack and then web hack hyphen cli and then hyphen hyphen save dev again don't worry too much about these commands but this is going to install webpack we need webpack what webpack is going to do is take all of our source javascript stuff it's going to i believe transpile it i think that's what it's called or pretty much bundle it into one single javascript file and you'll see how that works later but anyways we're going to do this command once that's done installing i'll be back and we will install the other things all right so the next thing we're going to install is babel now in case you're not sure what babel is essentially it will take our code and transpile it into code that is friendly with all different types of browsers so we're going to be writing with i believe it's es6 or es7 javascript code which is like newer javascript code to put it simply and this will just take our code and transpile it so just kind of convert it into code that will run in older browsers that's what babel does for us so it's nice to have that installed we'll just do it at the beginning beginning why not so we have to deal with it later so npm i and then babel hyphen or sorry not hyphen babble slash core we're also going to do babel loader like that there's a few other things you need to type here so just don't press enter yet babble slash preset hyphen env and then at babel slash i gotta look at my other screen to remember this one this is gonna be preset hyphen react and then i believe the last thing we have to add here is hyphen hyphen save hyphen dev all right so there we go we have this line make sure you type it out like that press enter we're going to install all those things and once that's done i will be back all right i am back now we have a few other things we need to install the next one is pretty obvious we need to install react so we're gonna say npm i react and then react hyphen dom once again save dev so let's run that and there's about three or four more things we need to install i'm just doing them all right now so we don't have to come back to this later on the next one i'm going to install is something called material ui this is just some pre-built components that we can use to avoid having to style the web page ourself so i'm going to say mpm install at and then material hyphen ui slash core again just some built-in components it has some nice things like cards and grids and all that it's kind of similar to something like bootstrap for example next what we're going to do is say npm install and we're going to install another thing for babel so we're going to say babel slash plugin if i can spell this correctly hyphen proposal class and then property like that okay so i think i spelt all that correctly let's just have a quick double check and let's install that the reason we need this is so we can use async and a weight in our javascript code it's kind of strange that we need to add that but we do and the last thing we need actually is two more things sorry my bad npm install react router hyphen dom this is going to allow us not counter router this is going to allow us to actually reroute the pages so that we can go well two different pages from our react app so react router hyphen dom we need that one and the last one has to do with material ui npm install at material hyphen ui slash icons so pretty straightforward but we just want to get the icons from material ui okay so i think just doing a scan here that's all we need in terms of the npm packages now what we need to do is set up some configuration scripts that are going to actually run and kind of handle our webpack and our babble and all of that now these i'm going to ask you just to copy from the links in the description you can go to the github and find the source code because they're kind of long to type out but the first thing that we're going to do is make a new file i'm going to call this one make sure it's inside of the front end app by the way babel dot config dot json now you can actually do there's another one called dot babel rc if you're aware of how that works then go ahead and use that but i'm going to use the babel.config.json file if that means nothing to you don't worry just follow along with what i'm doing and all we're going to do is paste this inside of here i'm not really going to get into what all this stuff does but it pretty much just sets up the babel loader for us and says hey the presets we're using is the environment preset that's targeting node version 10. it's just because there was a bug in the version that i was using and then at babel preset react pretty straightforward we're using react so we're going to have that preset and then the plugins this is so we can use async and a weight and remember we just installed this thing right here plug-in proposal class properties from npm all right so that is babel.config.json you can copy that out or you can find it from again the github or the link in the description next we're going to make another file called webpack.config.json or dot js sorry so let's go inside a frontend let's make a new file let's do webpack dot dot js all right so i'm in webpack.config.json a reminder that what webpack does is actually bundle all of our javascript into one file we can bundle it into multiple files but anyways it just takes all this javascript code we have and makes a bundle of it and then serves that one file to the browser and and you'll see how that works but anyways let's just paste this in this is the configuration for webpack we need a way to determine okay where actually is our javascript file where is the entry javascript file and where should we output this file to we're going to take all of our javascript we're going to read through all of it and we're going to output it somewhere where should i output it well i'm going to output it where i put right here now we're saying our entry point is going to be in the source directory which we have inside of here and then dot or sorry slash index.js now this is a relative path which pretty much means we're just starting from wherever this webpack.config.js file is which is inside of the frontend directory next we have output now we're using path.resolve this is getting the current directory that we're in so the front-end directory and then saying okay and again relative path we want to put this inside of the static front-end folder so if we have a look at static here and we have a look at the front-end folder that's where our output file is going to be the file name is name.js we might have to change this i forget but i'm going to leave it with the brackets right now all right then we have module and we have some rules i'm not going to talk about this but you can see it's saying just simply exclude bundling the node modules folder and we're going to use the babel loader when we do all this next we have optimization what minimize is doing is taking our javascript and minimizing it so just making it smaller the reason we would want to do this is because if we have a lot of javascript it's going to take a long time to load in the browser so if we can get rid of all the you know white spaces and all the other information in the file that we don't need that is best so it's just minimizing for us and then plugins this is doing a very similar thing in terms of optimization i'm not really going to talk about this you're welcome to look up the define plugin if you like all right so now we have webpack.config.js that is all good and now let's move on to the next step so now we're going to do is go to package.json and what we need to do inside of here is where it says scripts we actually need to add two scripts here which are going to run this webpack thing that we just set up essentially so inside of here the first thing we're going to add is we're going to add the dev script and this is going to be equal to web oops and i need double quotations i'm going to be equal to webpack hyphen hyphen mode development and then hyphen hyphen watch what this is going to do is pretty much tell us hey we want webpack to run we want to run in the development mode and we want it to be in watch mode now just like the server that we were running before so that python script this will just watch for changes to our javascript files and then automatically recon re-compile or rebundle or whatever you want to call it the output javascript file so that bundled file so that we can just refresh our browser and everything will be all good next we're going to add a build script so i think i need to separate this with a comma i'm going to say build colon and double quotation marks webpack hyphen hyphen mode only thing we're going to change here is is going to be production and we're not going to add the watch so that is all good and i think we can move forward now all right so let's get rid of that and now actually let's go inside of our src file and let's make our entry javascript file so inside of src make a new file i'm going to call this index.js like that so we're pretty much done our setup at this point in terms of all of this random gibberish stuff that doesn't make any sense with the babel and webpack and all that but what we need to do now is actually make it so that our django app will render a page that react will take control of so this seems kind of strange and if you haven't used django or react before then this isn't really going to make much sense but the idea here is that we're going to have our django application render a template which is just going to be some vanilla plain html and then our react code is going to take over that template and actually fill it in so we will technically have the django backend actually rendering the template but then react will manage it after that so you'll see how that works when we start doing it but i'm just going to go inside of the templates folder right here and i'm going to make another folder this is strange again called front end and inside of frontend i'm going to make a file and i'm just going to call this index.html now inside of here we're just going to fill in a few things so we'll just make our standard html file so doctype html we'll make our html opening tag html closing tag let's make our head opening tag and head closing tag and same thing with body okay now inside of head we'll add the standard stuff so we'll add our meta tag and we'll say char set equals utf-8 we'll add another meta tag inside of here we'll say name equals viewport like that and then the content equals and again you guys can copy this stuff from the link in the description if you don't want to type it out but width equals device hyphen width comma initial scale equals one okay our snippets came in there and oops we want to close this meta tag at the end there do we need any other meta tags i think that's it for our meta tags but now we'll add a title tag inside of title we will simply say you know music controller or whatever you want the title to be i'm going to add something inside of here which i'll discuss in a second it's going to say load static what this will do is load our static files our static folder which will allow us essentially to look at the javascript code that we're going to be bundling now we also need to add a few other things in here i'm just going to copy them in and again i'm going to ask that you guys just copy this from the link in the description because it's not really worth me typing out the url but here let's let's zoom out a little bit so we can read all this these are just some scripts and style sheets that we need so remember we're using material ui this is kind of like a component library that comes with some cool built-in stuff but we need to import their style sheet we also need to import our own style sheet which we'll create in just one second and then we need the font for material ui we also need jquery i believe i have two versions of jquery jquery here so i'm going to get rid of the one that's the lower version i don't know why i have two there and that should be good all right so now that we have that we're going to have to add a few small things but this should be pretty straightforward we're going to go into the body we're going to make a div i'm going to say this div id equals and let's go main let's end that div and then we're going to make another div this is the div that reacts actually going to take care of we're going to say div id equals app so the idea here is that we have this main div i'll talk about why we have that later when we start doing some more styling and then we have this app div and what will happen is well our react code is going to go inside of this div so react will kind of grab this app div and this is where it will render all of its components and show everything on the screen last thing we need to do i think i can actually type this one out just at the end of the body we're going to make a script tag and we're going to load the main js file that we're going to be using as our bundle so we're going to say source equals and then inside of here we're going to go percent percent static like that and believe the quotations can stay there and then we're going to do another two quotation marks strangely enough and go front end slash main dot js so what this is saying is essentially like whatever the static folder is which we've loaded here let's use that and then we're going to combine that with frontend slash main.js and we're going to load that script now i need to end the script tag so i think i can do that but just note that what this is doing is it's going to be grabbing our bundled javascript which will hold all of our react code from static front end and loading that inside of here so that this actually works right in react can actually take over this div again this all will come together as we go through but i'm just trying to explain it step by step okay so now that we have index.html that is all good i don't want to get ahead of ourselves so let's actually now render the view or render this template and then we'll write a little bit of react code i'm noticing that for some reason these tags aren't working so i think i need to just end the script i can end the script like that guess i can't do the slash to end it okay so now that we've done that let's go into the views file in our front end now what we're going to do inside of the views of our front end may seem a little strange but we need to just render this index template and then let react take care of it so inside of here i'm going to say define index i'm going to take a request i'm going to take star args and star star quarks and then i'm going to return a render which you can see is up there of a template so we're going to render request and then inside of here we're going to say front end like that slash index.html now what this is going to do is essentially allow us to just render this index template that we have right here and then react will take care of that and start rendering things inside of this notice that the folder is called frontend and what am i referencing frontend index.html which is the name of my html file what render will do is it will take the request it will take the template and it will simply return that html to uh whatever sent the request all right so now that we have that we just need to make a url for this so let's go to urls and in fact we don't have a urls file in here so we can create a new one let's go new file urls.pi and now let's go to musiccontroller let's go into this url and now let's add some more urls in here so let's say path and we're just going to have an empty path and now that is going to go to you guessed it the frontend dot urls so whenever we type a url that's not api or not admin we want to send it to frontend.urls that way we can then handle the urls from the front end and the reason we need that is because we just you'll see in a second it's hard to describe until we get further into the app but the front end here has its own urls as opposed from the api urls and those urls are kind of forward-facing that's what the user will actually see whereas the api ones will be used by the react code kind of internally in a sense so anyways let's go to this urls file i'm just going to actually copy this one because it makes it a bit easier we'll paste it inside of here again we don't need the admin we don't need the include so we can get rid of all of that and now we have slash or empty path and what we're going to do here is say from dot views imports and i think we named it index yeah i believe it was named index and we'll simply put index right there so now we will render the index template whenever we have a blank path that will kind of be our home page quote unquote all right we're getting very close to being done i know this is pretty painful but this is what is required and what we have to do next what we're going to do is simply make our first react component and show that on the screen and hopefully then we will be done with this setup in this tutorial so let's go into components let's make a component called app.js and now let's start writing some react code so don't worry if this doesn't make any sense to you right now we will discuss this more later we're going to import react comma component from the react module like that then we'll have a semicolon and then we'll import render from react dom react dom standing for obviously the html dom that we're going to be using and then what we can do is make a class we're going to say export default class app extends component this is just how you set up a class in react the export default we could do somewhere else but i'm just going to do it right in line so that this app is the default export from this file i'm going to make a constructor that's going to take props and then we're going to call the super using those props again you don't have to know what this means this is just the initial setup and then finally we'll make a render method and we'll say render and we will return just for simplicity's sake we'll return an h1 tag so let's say h1 testing react code and no let's end the h1 tag like come on give me the ending h1t okay so i think that is good now that we have that all we need to do is actually render this component inside of that div in index html so in case you're unfamiliar with react what happens is we make a main component that component will return something like whatever is going to exist in that place and then we just put that component in a div or in some id container and then that way it will have whatever is here inside of in our case the app container so to do this we need to access the app container which is pretty straightforward we're just going to say app i guess app a div equals and we'll have to put a const before this so const active equals document.getelementbyid and inside of here we'll simply use app now what we can do is render the app component inside of the app div now we're very very close to done we have the app component we just need to now put this into essentially our index.js file and the way that we can actually get this to work is we can simply say import app from and then dot slash components slash app that should be it let me make sure that i did this correctly and now our entry file is importing this file so when we import this file it will run this code and it will render this app in this index.html template now what we have to do is we have to actually first of all make sure that our server is running properly because it looks like i messed something up so let's run this here and okay so our server is running now what we need to do is run that script that we put inside of our package json so the webpack module development watch what should happen is it should look at our index.js file it should see that we're importing app it should bundle this stuff together it should output something to static front end and that file should be called main.js although i think i'm gonna have to change something to get that to work and then we'll go to the url endpoint and we should see this popping up i know again confusing but let's run this oops we're going to do npm run dev the way this works is if we have a look at our package.json the script is named dev run is running a script so we say npm run dev if we want to run build we would type build let's run this and let's see if we get any errors or if this works okay so that actually worked you can see that by default it calls our file main.js which is good that's what we want it to be and now if we have a look inside a front end what do we get we have this main.js file with all of this gibberish which is simply the bundled up javascript so that is how that works and now watch if i save this file notice that the watcher ran recompiled the thing and we're good to go so now if all of this worked well and i wouldn't be surprised if it didn't we can go here to the home page and oh template does not exist at slash all right so we're getting this error saying template does not exist i just had a quick look into this and it's a very silly mistake on my point or on my part we need to go into settings.pi and we need to add the front-end app to our installed applications i forgot to do that in fact i think i passed by them but if we go to yeah if we go to install apps you can see i haven't added front end inside of here so let's go ahead and do that and we'll do it the same way we did before so we'll say front end dot apps dot front end config all right so now that should be in our installed apps and saying it does not contain front end config oh let's just save that one more time rerun it and all looks good okay so now with any luck if we go back here and we refresh this should be working and there we go we get testing react code so there we go we have our component working react is working fine now we have both these scripts going in watch mode and all we have to do is just start developing we can write all of our react related stuff and it will show up on this page now obviously still gets a little bit more complicated after this but that is the bulk of the setup i apologize if this was kind of all over the place but it is hard to explain this stuff and well i hope that you guys were able to get it working any issues please do leave a comment again code in the description if you enjoyed make sure you leave a like subscribe to the channel and i will see you in the next [Music] video

Channel: Tech With Tim

Views: 98,307

Rating: 4.888937 out of 5

Keywords: tech with tim, react, django, react and django, django and react, react django tutorial, django react tutorial, webpack, babel, react webpack tutorial, react babel webpack tutorial, react webpack babel 2020, react webpack, react webpack setup, react babel setup, django and react web app, react and django web app, webpack and babel setup, setup webpack and babel for react

Id: 6c2NqDyxppU

Length: 27min 17sec (1637 seconds)

Published: Wed Nov 11 2020