Full Stack React & Django [2] - Implementing React

alright guys welcome to part 2 of our Django react Redux apps so in the first video we created a basic Django rest api with the Django rest framework now we want to start to implement react now we're gonna do this manually we're not gonna use like create react app or anything like that because we're integrating react into Django we're going to create a front-end app okay remember Django has concept of apps and inside there is where we're going to have for instance the index.html file we're gonna have that as a template and that's going to be basically the entry point for react will have an index j/s which will be the entry point as far as the JavaScript and then that will point to a main app component that will get loaded alright and of course we need to install webpack we need bable bable takes care of transpiling our code so anything that you know newer features of JavaScript that react uses and then we also install a react preset as well so there's quite a bit here and again this tutorial I'm going to put a link in the description some of this stuff you can just you can you can check that out here like the cert the commands to create the the files and stuff like that the installations so web pack we need to install Babel the babel loader the presets we need to create a babel RC file to load the presets and plugins and then a web pack config file so you can use this this tutorial as kind of a reference alright so let's jump in we're gonna open up a terminal here now I already have my server running in this tab so I'm going to go into this tab here and I'm in the root directory I actually want to run pip env shell so that I'm in my virtual environment and then I'm gonna CD into lead manager because to create a new Django app we need to have access to manage pi which you can see is in this folder so let's go ahead and do Python manage dot pi star app and then we're gonna call this front end okay so once we do that we get a new front-end folder and all the standard files that come with a new app alright so next thing we want to do is create a couple directories that react can live in so first of all let's do make directory - P and we want to go into front-end slash and we're going to create a directory called source and then we also want inside that a directory called components so let's create that all right let's also create inside front-end we're gonna have two five we want to create two folders or directories so one is static and one is templates and then inside there we want to have a directory called front-end in both of those so let's run that and if we look over in front-end we now have source with components we also have static front end and templates front end now the point of these obviously the source is where all of our components all of our redux everything that we do in terms of our react application goes in here and templates is going to handle the index.html file that gets loaded basically our single page and then static will be the compiled JavaScript so we'll have web pack take our react application we're gonna have an index J s as an entry point it's going to look at that and it's going to compile it down to a file called main dot J s inside static so if you if you've used create react out before when you run NPM run build it creates a static folder with all your static assets that's what's gonna live in this in this right here alright so next thing we want to do is start to install web pack and all that good stuff so we're gonna go back to our terminal let's CD dot dot so that we're in the root if you do an LS you should see the PIP file and we're gonna do an NPM in it of course you have to have no js' installed so if you don't have that just go to node.js org NPM and it just basically creates a package jacent file with all your dependencies or I should say your JavaScript dependencies - why just makes it so we don't have to answer questions or anything it just it just includes all the defaults alright so and I know most you guys know this stuff so let's do an NPM install as a dev dependency web pack as well as web pack - CLI okay so if we look over here in the root we have a package JSON file and as that installs it should get added web pack should get added as a dev dependency and there it is okay and one thing one other thing I did guys off-camera is I initialized to get repository with git init and then I created a git ignore file with node modules and then I went to get ignored dot IO and typed in Jango and it gave me the defaults for a git ignore for Jango so if you guys want to do that that's fine and then I just made a simple commit but it's up to you when in how you want to make care of your commits so I didn't want to include that in the tutorial alright so now that we have web pack installed next thing we want to do is install babel which will take care of transpiling our JavaScript like newer features from ES 2015 and beyond and we're also going to install the react preset as well so let's clear this up and let's do an NPM install as a dev dependency we want at Babel slash core so basically the core package we want the loader because when we're using webpack we need to use the babel loader in order to have a transpiler code so let's say babble - loader and next thing we want is the eat the preset env so we're gonna do at babble slash preset - env and what this does is it takes newer JavaScript so es 2015 plus and it compiles it down we used to have separate presets for each version like preset - es 2015 2016 7 but now it's all we just used this one preset all right so let's see in addition to that we need to react preset so we're gonna say at babble slash preset - react and we also want to plug-in called transform class properties which handles static class properties for es 2015 and 2016 so that's gonna be babble - plug-in - transform - class - properties alright and that should be it so let's run that okay so now that those are installed we need to install of course react so let's do NPM install react so we also want react Dom which takes care of displaying our application in the browser and the document object model and then just prop types okay so now that we've done that if we take a look at our package dot Jason it should look like this so make sure that yours matches this so you have everything alright now in order to use these presets and this plug-in we need to create a file in the root here called dot babble RC make sure you put the dot okay and it's just it's just adjacent object so we're gonna open up some curly braces and just say the presets that we want to use and this is an array Jason array is going to be at babble slash preset - II and V and then we also want at babble slash preset - react all right and then as far as the plugins so plugins we just want to add transform transform class properties I forgot my comma all right so presets and plugins let's save that file and that should be all set next thing I'm we're going to do is create our web pack config file so let's create a new file in the root called web pack dot config dot J s alright so every whenever used web pack you have this file and it can get very very confusing all we want to do is load the babel loader so we're gonna say module dot exports equals and this is going to be a pretty simple web pack config file relative to most of them so we want to put in rules here which is going to be an array and we just want to put in one object here and say tests so basically we just we want to look at all the javascript files so we want to put a regular expression in here and then forward slash dot meaning a literal dot j/s and then end with a money sign so we're just saying for any javascript file and then we want to exclude anything that's in the node modules folder so I'll just use a literal here in a regular expression and say node modules okay and then we want to say use and then the loader is gonna be babel loader okay so that's it so that will take care of allowing us to use babel to transpile our code so we'll save that and just double check that it should be good so yeah so we'll close that up now inside our package dot Jason we want to have a couple scripts because we need to compile our react application that lives in the front end app so in our package Jason let's replace this test script with dev and what we want this to do is run web pack so we'll say web pack we're going to add a flag here of mode and we're gonna say this is development okay and then we just want to take a we want to basically look at the entry point for react which is going to be the index J s file in the source folder and then output it to the static folder so let's do dot slash lead manager slash front end slash source slash and then we'll have an index J s okay and then the output so dash dash output is gonna be dot slash lead manager slash front end slash what is its it's gonna be static slash front end and then it's we're gonna call it main dot J s alright so this is going to be the actual compiled JavaScript that you include in your index HTML template now as far as build we're going to have a build command as well let's put a comma right here and I'm gonna copy this entire thing and paste that in and change this to build and simply change this development to production okay so it'll do a couple extra things for production now when we want to compile our react application for development so we can view it in the browser will do npm run dev when you're ready to deploy do npm run build just like you would if you were using create react app so let's save this and now let's create this index j s as well as our main app component for react so let's go into front-end source are at our SRC create a file in here called index dot j s and all I'm gonna do in this file is just basically load the apt in the main app component so I'm gonna say import app from dot slash components slash app and save and then in components we'll create a new file called app KS and inside here we're going to import react from react let's also import react Dom and then we're going to create a class called app so this is our component we want to extends react dot component actually know what I'll do is just bring in component like this and get rid of that okay and then of course we need a render method and for now I'm just going to simply return on h1 ok and then down here we're going to take react Dom which has a render method and we're going to say we want to insert the main app into an ID into an element with the ID of app so we'll say document dot get element by D and we're looking for an ID about okay so let's save that now we need to create the actual template the index.html file where this this div with the ID of app resides so that's actually going to be in templates so templates front end we want to create a file called index.html alright and in the state index.html let's just generate a boilerplate here and inside title I'll just say lead manager and then in the body all we need is an ID of app that's where our react application is going to be loaded now of course we need our main J s to be loaded here as well so this is actually going to be template this is a django template so inside script we're going to do source and oops what I do source and we have access to these template tags with we just do these percentage signs here if you've never used Django templates and we're going to say static so we want to look in static and then in front-end slash main is so where this is gonna look is right here static front end main j/s now there is no main j/s that's going to get created when we run npm run dev or npm run build and ignore this this discoloring here it's just because we don't have a plugin for the the the Django templates and then if there's any other static files that Django wants to load we would just want to go right here and say load static like that all right now last thing I want to do in this file is I want to use bootstrap so I'm actually going to go to boots watch comm and they're just customized bootstrap CSS files so I'm just gonna grab the cosmo here and take this link if you want to use the standard bootstrap CDN that's fine but I'm just going to put a link right here and paste that in and then I just want the bootstrap javascript files so I'm gonna go to get bootstrap comm get started and let's grab these three javascript files just for the drop-down so we'll go back and put those right here and we should be all set as far as this alright so how does this actually get loaded well we need to go to our front-end app which by the way I don't think we added to the setting so let's do that really quick so in lead manager settings dot PI let's add front-end okay just save that but in the front-end folder we have a views dot pi and this is where we want to basically point to that template so we're gonna have one method here called index and when you create a view method you want to pass in requests and then we want to return render which you can see is broad and above and render takes in that request and then whatever template you want to load in this case it's gonna be front end slash index dot HTML so that's going to automatically look in the templates folder front end index.html alright so we'll save that now just creating the view doesn't do anything we need to link a URL to it so let's close this up inside front end which is right here let me just close these up so inside the front end folder let's create a file called URLs dot pi and create any URLs that are associated with this which is just going to be one so we need to say from Django dot URLs we want to import path so that we can describe a path for our URL we also want to bring in our views so say from the current directory imports views alright and then we just want to set a URL patterns okay I want to set this URL patterns list and then just put a path and we're just going to say from the for the root directory we want to load views dot index okay talking about the index method we just created here so we'll save that now still it's not going to do anything because we need to basically include this these URLs into the main URLs file so in lead manager URLs dot pi we're going to add I'm actually going to add it above this let's bring that in here and make sure that your front-end loads before the leads so just change this to frontend dot URLs okay and we'll save that so I believe everything is in place so that we can run npm run build and it should create our main j/s which will be included in the view which should load in the URL so let's go back here and where are we so we're in the root so that's where we want to run npm run dev and hopefully this works okay so it looks like it did if we go over to static front-end you'll see that now there's a main.js file so this is basically our compiled application our compiled JavaScript which is getting loaded in templates index.html right here okay so now I'm just gonna reset the server real quick so ctrl C and then I'll run Python managed PI runs server just to make sure no issues happen here and then let's go to the browser and let's go to HTTP localhost port 8000 which is the route and there's our react application alright so I think that in this video I'm just going to do a couple things like a couple simple things we'll create the header component and stuff but we're going to get into redux in the next video and redux is kind of complicated if you've never worked with it I'd suggest at least watching my redux crash crash course maybe some other people's redux videos but because I'm not going to explain every little thing but anyway let's jump back in here and let's go into let's see we're gonna work in source and inside this components folder I'm going to create a folder called layouts okay I'm gonna for each component I create we're gonna have specific folders for so in layout let's create a component file called header is okay and this is going to be a class-based component because we're it will have actually I guess we could make this a functional component no because we're gonna we're gonna need to use Redux we're gonna nevermind we're just going to use a class-based so I have an extension install which I'd highly recommend called es7 react Redux graph QL react native snippets which I know is a mouthful but this is really helpful we can easily generate components and stuff like that so I'm just going to do RCE tab which gives me a react component and inside here I basically want this to be a navbar so I'm gonna head to get bootstrap comm and let's go to components and navbar instead of just typing it all out we'll just grab it so I want let's see I want I believe this right here this yep this is responsive so I'm gonna grab this and just copy it and let's go back here and paste that in actually know what we can use now we can use it as the route so let's just replace the div with that now of course in react we can't use class because we're using JSX here so we have to use class name so I'm just going to hover this first class and just ctrl D to select the rest of them and go ahead and change it to class name okay and let's just move this over a bit and we're gonna get rid of this form and we're going to let's see let's change this hidden brand here we're gonna change that to lead manager which is the name of the app and let's see I guess we don't need any links right now so I'm going to just get rid of these L eyes we'll go ahead and keep the UL but that should be good now navbar expand LG meaning that it has to be large for the collapse for the hamburger menu not to show I'm gonna change this to dash SM because I only wanted to show on small screens but that should be good let's try save it and then let's go into our App J's file and let's import it so we'll import header from dot slash layout slash header and then we'll just go ahead and let's get rid of that and inside here we'll put in header and save now in order for this to show up we have to actually run NPM run dev okay so run that real quick and there we go so now we have our header now one thing I want to mention is that if we make a change like if we go to header and we say lead managers and I save it if we go back to the browser and reload it's not there because we need to actually run NPM run dev again to recompile now if I if I reload we get lead managers alright now to avoid having to do this we could add a watch option I probably should have just did this in the beginning but if we go back to our package Jason and in the dev right here let's just tack on after this mode development will attack on - - watch and we'll save that and now if we run NPM run dev it'll just watch the files constantly so let's try it again if we go back to header and we take away the s and save and go back and reload you'll see that the S is gone now we don't have like hot reload where it's just where you don't have to hit the reload button like you do with create react app but and there are ways you can implement that with web pack plugins and so on but I'm not going to get into that it's fine just to have to reload it but I'm gonna make this smaller just so we kind of have everything on the same screen and yeah so that's good and the next thing I want to do is just add the dashboard so basically we're going to have a dashboard that has an ad lead component and then the leads component that lists all the leads all right and like I said we're gonna be using redux we're going to be using react router I just want to at least get the the component files created some of them so over in the sidebar here under components let's create a folder and we're gonna call this leads and inside leads are going to have three files three components so the first one is going to be dashboard jas which is just going to hold the other two okay so we're gonna have another one called form dot j/s to add a lead and let's create one called leads dot J s which will be the list of leads alright so let's go to form j s and I'm gonna just generate a class-based component and for now just put an h1 here that says add add lead form and save that okay we're gonna add the functionality later on and leads dot J s I'm also gonna do a class-based component and we'll just say h1 leads list save that ok dashboard is going to be a functional component because all its going to do is display the other two so I'm gonna say our CF and that'll generate a function and then I'm just gonna bring in the form from dot slash form and then it's also bringing in leads okay and then down here I'm gonna use a fragment so let's actually bring in fragments okay and then in here let's just put the form first and then let's put the leads okay so that's our dashboard now let's go to app J s and let's bring in the dashboard so dashboard is actually in Leeds / - board and we're gonna import dashboard and let's also bring in fragment from react and then down in the return we're gonna return a fragment and let's move the header up here and then let's put in our dashboard actually know what I'm gonna do is write as create a container class which is just a bootstrap class to move everything away from the side and I'm just gonna put that in there alright so let's save that and let's reload and there we go alright now I'm actually going to now that I'm working in react I'm gonna enable the pretty I have the prettier extension installed which is a code formatter so I'm gonna go back to my settings and I'm just gonna turn format on save back on so let me just check that all right good so now if something's out of line like let's say this header is over here and I save it's gonna fix it for me good and let's see let's say alright so it's also gonna add semi-colons which is what I wanted it to do there we go all right guys so I think that this is a good place to stop because I want to start to add functionality but we're going to be using redux so in the next video we're gonna add our Redux tour we're gonna create our route reducer we're gonna have a few reducers actually we'll have one for leads we'll have one for errors for messages we're actually going to implement something called react alert that's basically like a pop-up so for errors whether it's from the server side or messages that we create on the client side I want it to have a little pop-up so we'll be implementing all that stuff all right so thanks for watching guys and I'll see you in the next one

Channel: Traversy Media

Views: 172,339

Keywords: react django, django react, react webpack babel, webpack, babel

Id: GieYIzvdt2U

Length: 31min 14sec (1874 seconds)

Published: Tue Jan 29 2019