Django & React Tutorial #4 - React Router and Building Components

Key Takeaways

hello everybody and welcome to video 4 in this series now before we dive in i'm just going to spend a minute or two addressing some of the comments i got on the previous video and just reassuring you about some of the things that are going on in this series because a lot of you seem to be slightly concerned and while i want to make sure that you're reassured before we move forward so first of all the main comment i was getting is a lot of people were saying hey you should be using functional based components and not class based components now i'm going to give an apology right now because i am not a react master and in fact i probably should have stated that in the third video when we were setting up react but i am absolutely not a pro i'm not a master i am learning just like you guys and in fact that's why i make a lot of these tutorial series because i'm able to learn along with you and share what i've learned and kind of touch on the main pain points that i had when learning the framework which seemed to help you guys out so i was not aware that functional components were just extremely superior to class-based components and hence this series does use class-based components now the main reason behind that is when i worked at microsoft the entire code base that i used used class-based components so that is what i was comfortable with that's what i knew about react i knew functional components were a thing but i did not realize that now there's been kind of a shift and these are just the superior and better way to go so this will be using class-based components and some of you may be disappointed by that but i will state that it is very easy to translate these into functional base components and i will make an effort to make a video near the end of the series that goes through and translates some of these components that really don't need to be class-based components into functional components so you can understand how that works that being said class-based components are not going to be removed from react they're still an important part of the framework and learning them is still valuable so i don't think that that's going to be a huge hindrance to this tutorial and you're still going to learn a ton about web development react and django regardless if i'm using class or functional components now another thing people were saying is hey you're making this really complicated now i agree i'm making it complicated the reason why i spent as much time in the last video as i did is because i want to make sure you guys understand what is going on and you're able to deal with problems if they occur i cannot tell you guys how many times i've simply just typed in a command had everything done for me and then something goes wrong and it takes me hours or even days to figure out what the heck is going on because i actually don't understand the setup at all i just had some magical command do it for me so that was my motivation behind actually doing the manual setup with you guys and i hope that you can appreciate that and understand why we went through all of that kind of pain because that is going to save you a lot of time in the future if you ever need to modify the setup or you're wondering why something is not working so i do apologize for this long introduction but it's very important to me that i shared that information with you guys i do really care about the quality of this series and i do have to apologize because i really should have done that research before starting to film these videos that being said this project is really about just doing getting hands-on and actually creating something not everything is going to be done to the industry standard and i wouldn't expect it to be especially if you guys are just working on some kind of hobby project or trying to get up and running and build a simple react application so anyways i hope you guys enjoy if you do notice any mistakes of course leave them down below and i will try my best to address those comments [Music] i'm gonna keep saying it but if you are here give yourself a pat on the back now things are just starting to get good we're going to be writing a lot of code in these next videos and i guarantee you are going to learn a ton especially if you don't already know the react and django frameworks so in this video what we're going to be focusing on is adding a few little bits of styling to our app we're also going to be making another component and then we'll be working with the react router to actually handle page routing and i'll show you kind of how that works so let's go ahead and get started the first thing i want to do is add some styling to our app so if you look at index.html you might have noticed that i already loaded in a style sheet called index.css from the static css folder now if you look inside of that folder here notice that we don't actually have an index.css file so the first thing we're going to do is create one we're going to say index.css and put that inside of static css all right so now we have index.css and i'm just going to add a few basic styles that are going to expand our divs and we can look inside of index.html here so the main div and the appdiv to take up the entire screen and have kind of the correct layouts i'm not focusing heavily on styling in this tutorial series so i'll kind of briefly go through what it is that i'm doing and you're welcome to kind of look up this syntax if you don't know what it does but the first thing i'm going to do is i'm going to make the height equal to 100 percent for the body and the html tag then i'm going to say the margin is equal to zero or sorry this needs to be a semicolon there and the padding is equal to zero and i'm going to change the default color of the text to be white that is because we are going to add that cool gradient background that changes colors and the white text just looks better on it but now that i think about that we're not going to add that in this video so i might just can i do a comment in css i don't know how to do that i'm just going to remove the color tag like that so we will add that later but if you want to change the text color that's how you could do it next i'm going to apply some styles to my main div and i'm also going to apply some styles to my app div so the main div is wrapping the app div and the app div is where our react code is actually going to be rendered so here we'll go inside of main and the first thing i'm going to do is make the position fixed so that's not moving around i'm going to say the width equals 100 and the height equals 100 percent we're going to position this at left 0 and top 0 which pretty much means take this main div and just throw it at the top left hand corner of our screen and then make its width and height fill the entire screen and since the position is fixed this will mean that we're not going to have any scroll wheels or scroll bars on our on our page because we don't need them for this app so now we're going to go inside of apps we're going to do a very similar thing and make the width 100 we're going to make the height you guessed it 100 and we're going to make the display actually be a flex display this is just because some of the components we're going to be using work in kind of the flex grid or whatever it is for css so we just need to apply this to the app if you don't add this you'll notice that a bunch of styles and stuff we do later on will be kind of all messed up but you know you're welcome to try that and see what does happen if you avoid adding that so now if you want to add any other unique styles to your app feel free to add them right inside of index.css because this style sheet is already loaded from our html document and now we're going to head over to the app.js file and just take a quick pause so i can once again thank the sponsor of this video and this series which is algo expert algo expert is a coding interview prep platform that has 100 unique coding interview questions and is constantly being updated with new features and new questions algo expert now has a brand new mock interview feature on its platform which is arguably one of the best ways to get real world coding interview practice check it out from the link in the description and use the code tech with tim for a discount on the platform so now that we're inside of app.js i'm going to explain what this basic react code actually does and how react kind of works and then we'll build another component and we'll talk about react page routing using that thing called the react router so right here we have a component now the way that react works is we have a bunch of components and components can render other components so the entry point to our application is going to be our first component which we usually called app and notice that what we did is we simply rendered this component inside of the app div to our index.html template file so essentially what this is doing is taking this component right here and just placing it inside of that div and this component has some logic behind it and it has this method called render which will return the actual html that should be displayed on the page now this is really useful to have these kind of components because what this means is i can make my own custom components and i can reuse them so let's say i make a component for something like an image or i make something for like a responsive button well all i have to do is write out the components tag that looks something like this it's simply the name of the component and then inside of a standard html tag and well i can reuse that component and render it as many times as i want on the screen what i can also do is pass what's known as props to the component so if we have a look here what a prop is is simply an attribute or simply a argument that we give to the component it will internalize that and then it will use that in some way to modify the behavior of the component so if i go ahead and do something like app and then i pass a prop and i say name equals let's just go ahead and make that a string of tim now what i can do inside of my render method is i can change this testing react code to actually be equal to this dot props dot and you guessed it name so now what will happen is i will actually render the string tim or whatever was passed as the name prop to this app component so it doesn't make much sense to do this for a component that we're only using one time but if we were making say a button then maybe some props we would want to pass it with something like the color something like the text on the button maybe like the shadow color whatever you could get the idea we can pass properties to the components and then it can use those properties to modify its behavior now you may be asking me why did we add these little squiggly brackets here well whenever we want to actually write javascript code inside of our render function what we do is we simply put it inside of these little squiggly brackets at least sorry when we're in the return statement what this allows us to do is actually embed javascript code into our html text so it's really useful because i can write say an if statement inside of this return statement and all i have to do is just wrap it using these squiggly brackets and all is good and it will just take and evaluate whatever this is and put that into html code now of course i can write like a standard if statement up here without those brackets but as soon as i get into the return statement and i'm inside of some already written html codes like these h1 tags that's where i use these squiggly brackets and this will make more sense as we go on but now let's actually try this out i do have to rerun my server because i did close this before i re-recorded this video but let's go cd music controller and now let's go python manage.pi run server see if that's all good okay and now let's make another terminal here let's cd into music controller let's cd into front end and then let's go npm run dev like that give it a second to run here okay compilation started now i need to open up a browser window let's open up a new one here and let's go to 127.0.0.1 and notice tim is showing up on the screen so now if i go ahead and change this name and i say oh we're going to show bob on the screen instead and we have a refresh here bob shows up so that is how we pass props through to our components and there's one more thing that we can talk about which is called state now i don't really want to get too much into the state because that's probably for a later video but this is this thing called a state that we can store on our components so we can say something like this dot state equals and then inside of here we can define all of the stateful aspects i guess that we want to store and whenever the state of our component is modified it will automatically re-render the entire component now this is really cool because say the database updates and all of a sudden the state of our web page has to change all we have to do is modify the state of our component and it will automatically re-render just that component so we don't have to re-render the entire page it's just going to be that component that will update and that's really cool and that's what makes react really powerful and useful and we'll look at states later on but anyways now that we've done this i want to get into the actual react routing so i'm going to get rid of this prop we'll just go back to what we had before and just say test website or something and let's make another component now and then render that component from this main app component so i'm going to make a new file i'm going to call this one homepage.js and as you guess this is going to store the home page for our application so just like from before we're going to say import react comma component from and that should be react we don't need that render anymore so let's actually go back to app.js because we already rendered this app component and what we're going to do is render the home page component from the app component so let's just make this default class structure though so let's go to home page and let's say okay export default class let's call this the same thing as our file name that's standard convention and we're going to say extend component like that we need to make sure we add our constructor so we're going to say constructor like that we're going to say props and then inside of our constructor we always need to call the parent constructor so we're going to say super props that we'll call the constructor of component which is necessary we could do something else inside of the constructor if we want but for right now we'll leave that blank and then we'll say render inside of here and we'll simply return whatever html it is that we want to render so again just to kind of give us an example here let's just render a paragraph tag and another paragraph tag and let's say this is the home page like that so that is our component i don't think i messed anything up there let's now go to app.js let's import this component so i'm going to say import home page from and then we can guess it's going to be dot slash home page like that and now we'll be able to use this homepage component from right inside of this app so now instead of rendering this h1 tag i'm going to render the home page component like that now i could i can render it like this where we have two open our two tags sorry an opening tag and a closing tag but i also can just add the slash like that which is typically the convention and now if i wanted to i can add any props that i want to pass to my home page now i could also pass props that were passed to this app over to the home page right that's something that we could do we can pass all kinds of crazy stuff and well i just wanted to make that clear that we can pass things through to the component although i did already mention that so now we have a home page and just uh to kind of illustrate the react routing aspect let's make two more pages here so let's make a room join page so remember in our app we're going to have a page to join a room and we're going to have a page to create a room so let's say room join page.js and let's literally just go to homepage copy this exact same thing and we'll just change the component name to be room join page and then instead of this is the home page this is the room join page maybe we could say join room page maybe that makes more sense name it whatever you like and then copy this again let's make another component and let's call this one create room page dot js same thing here let's rename this to create room page and then instead of this is the room join page this is the create room page all right so now we have three components let's go back to app.js and import all of those so let's say import room join page from and then same thing dot slash room join page and then let's import create room page from dot slash create room page okay so now i want to show you how we can actually render all of these so let's do just a bracket here for our return statement and now let's just render all of these different components inside of a div so let's create a div let's bring that down oops i wanted to delete that and now we will render the other two components so room join page nope let's end the tag like that and create if i open the tag create room page like that so now technically we should be rendering all three of these components i'll have a look at my web browser in a second but notice that the reason i put them inside of a div is simply because when we return something there needs to be like an exterior wrapper for everything that we're returning if i just try to return this here you notice that we're getting an error it's giving us this red squiggly line and essentially it's saying we must have one parent element so it has to be one element that we return to start so we can return this div that then contains all of these inside of it that's why i added the diff but anyways let's go look at the web browser now let's refresh and we get this is the home page this is the room join page and this is the create room page so that is the basics on how these components work and i obviously could reuse them as many times as i want so now if i go look at my web browser and i refresh we get the create room page three times but this is no good i don't want to render all these on the same page i want to have urls that direct me to each of them so this is where we get into the react router aspect which i think is kind of cool so we're going to do that now from our home page so let's go over to our home page uh where is the home page first of all let's delete room join page and create join page we don't need that from here and let's go to the home page and let's actually import those two things so we'll import room join page and create room page because from here we're going to kind of do the routing system where we go to the different pages so first i'm going to import a few things that we need from react router so i'm going to say import and then inside of these curly brackets like this i'm going to import browser router as router what this means is we'll import the browser router but we'll just name it router so it's easier for us to use we'll also import switch we'll import route we'll import link and we'll import redirect we're not going to use all of these right now but we will use them later and then that's going to be from react router hyphen dom like that so now we have all the things that we need to use and notice when i saved it automatically formatted this for us for our actual routing system so now inside of the render what i'm going to do is instead of returning a simple p tag that says this is the home page we are going to return a router that will redirect us to the correct page so let's go ahead and say router like that in this case we actually do want a closing tag because we're going to put a bunch of stuff inside of this and we actually do need the brackets here for the return statement as well just to make sure that's all good and inside of router the first thing we're going to add is a switch and what this switch will allow us to do is pretty much switch on the path name so if you've ever used a switch statement before in something like javascript then you know what we can do is look at one variable in this case this is going to be the url or the path name that we're passing to this router and based on what that value is we can return something different so inside of here we need to make a bunch of roots you can think of these as like the cases of a switch statement and we simply say root we define the path and we say okay whatever is typed into the url bar that matches this path if it matches this path will return whatever we define inside of this root so we have our root and then what we have to do inside of the root is we have to say the component is equal to and whatever component we want to render if this root is true so if we go to say slash now in this case we don't have a specific component that we want to render if we go to the homepage right which is just a simple slash so what we can do instead is actually just give it some html that we want to show so i can simply end the root by doing slash root like that and now inside of here i can add some really basic html like say that p tag and say this is the home page so now if we go to the page slash we'll render this is the home page so let's copy this route down actually let's rewrite it because we're going to change this one a little bit and let's make another route now and let's make this path not equal to the home page but let's make this equal to the join page so the room join page so when we go to the path join the component that we want to render is what well we want to render the room join page so all we do is we type room join page like that we put it inside of our little squiggly brackets actually do i need to put inside the squiggly brackets yeah i think i do and that will simply render the room join page if we go to slash join in the url bar again i can simplify this by just adding the slash there and we'll do the same thing now except we'll do one for the create room page so instead of join we'll say create and then the component will be the create room page the reason i'm putting them in the squiggly brackets is because this is actual javascript code right we're getting it from up here and whenever we do that inside of our return statement we need to put it inside of squiggly brackets okay so now we have three routes this is all we need to do to actually have the react router working and now let's go to our um web page here let's refresh and notice that we get the home page now i just want to show you what happens if we try to go to the join page if we go there we get this weird thing that says hey the current path join did not match any of these paths but that's strange we have slash join right here inside of our react router well the reason this isn't working is because if we go look at the urls in our front end we only have one url which goes to the home page what we need to do is actually tell django that hey when we hit a url it's equal to slash join or equal to slash whatever else we want to render the index.html template that then react will take over and show the right page so whenever we create a path or a url we have to add it to both django and both react there's a way to avoid having to do this but for simplicity's sake we're just going to add it so i'm going to say inside of here path now i'm going to add join and i don't need the slash i can just say join and again we're going to render index when we go to join so now let's go back to our web page let's refresh and notice that when we render join we're getting this is the home page that's strange we shouldn't be getting this is the home page it should render something else i'll look into that in just one second but now join is working so just notice that but if i go to create oops and my history is here from what i was doing before but if i do create again we get page not found so what do we have to do well we have to add the path here for create so now we'll say create and when we do create we'll render index so let's go and have a look now at the app so app is rendering home page and home page has this route but for some reason it wasn't rendering this slash join or slash create page when we went to this path so let me just have a look here and see what's going wrong and i will be right back all right so i found the issue and this is something that is a little bit confusing but hopefully it will make sense to us we have to add this thing called exact right here to this route the reason for this is since we're checking this route first technically slash join and slash create match this path of just nothing i'm pretty sure that what this is saying and someone can correct me if i'm wrong on this but i'm pretty certain is if we see a path that looks like this so at least has the slash then go to this page so slash join and slash create technically match this path because even though they have join and create they have this default slash so we need to put exact which says hey this path must must match exactly and only in that situation when we go to this page and in fact to test that hypothesis let's save that let's go here and let's refresh and notice that this is the create room page is working when we go to create and slash join is working when we go to join now what happens if i go to join slash three well this didn't work because we didn't match the url pattern but i'm willing to bet that if we add that url into our urls configuration so let's actually go to urls and do this that it will bring us to that page so let's go here let's just add another url and let's say path join and let's just do join slash one and in this situation let's render index now i'm not going to add inside of my home page a path to join slash one and i want to see if we go to join slash one it gives us the room join page again i'm not sure if that's true but that's why we're going to test it out so let's go to join one refresh i think i might have messed up my web server here let's go look at the web server i'm missing one required positional argument so i must have messed something up in urls uh looks like if i go to urls uh that should be good let's just save that and see okay it looks like i just had to save the file am i bad on that let's go back to the web browser okay so i had some weird cache issue whatever anyways we're back but let's go to slash join slash one and notice that that path does indeed bring us to this is the room at join page so that's something interesting to note uh that the path if you don't add that exact keyword here doesn't have to match exactly it just has to match right it just has to at least have what is there so that is how we do react page routing we add some styles here we learned a bit about react and created some different components uh that is going to be it for this tutorial i hope you enjoyed if you did make sure you leave a like subscribe and i will see you in the next [Music] video