Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:15Length:1.6 hours
Building a react website with a pre built template 400x277
  • Overview
  • Transcript

3.4 Adding Routing and a Home Page

With the proper project structure in hand, you can begin to break your template up into page components. You can also introduce routing into your project, which is what will ultimately let this function as a single-page application (SPA).

3.4 Adding Routing and a Home Page

One of the next things that I like to do early on in the process, while I'm starting to add in some components, some building blocks of my pages in my application, I like to bring in the concept of pages. I usually try to make things single page applications as much as possible. Which will avoid the reloading of content and page refreshes as much as possible. It's not always completely avoidable, but I like to try as much as possible. So right now the biggest issue we have is that, there is a lot mess in here within app. And when it comes to building React applications, in my mind anyway, I like to spend as much time getting things out of app and making this as lean and as clean as possible. I think of this as like the main shell of my application. But I want all of the components, and the markup, and the logic, and the actual guts of my application living somewhere else. I really want this to be, like I said, as clean as possible. And really one of the things that I like to only have in app, if possible, is kind of the part that's gonna handle this area right here, the main content of my page. And the way that I'm gonna handle that is by using something called the React router. And we're gonna bring that into our application now. And what that's going to allow us to do is have routing within our applications. So that we can say when the user goes to a specific URL within our application, I wanna load this page or this component in the browser so that they can interact with it. And you're gonna see how that's gonna work here, in just a moment. So step one of this process is bringing in that dependency. So when I'm in my terminal application here inside of my application, I'm simply going to say npm install react-router-dom. So I'm gonna hit Enter, that's gonna go out and it's going to download and install react-router-dom. That's going to give me access to these really cool features and components that I can use to kind of bring my application up level. And start to really modularize this in such a way that I can make very clean applications in a way that I like to do that. So in just a moment once this is done installing, I'll go ahead and show you how to use this to really kind of make things a little bit more slick. All right, as you can see here, our installation of react-router-dom has completed. And now that that is done we can start to bring that into our application. And so how are we gonna do that? Well I'm gonna start here in my app component and I want to do an import or two. So let's begin by doing an import and I want my, the main import that I'm gonna use right now is going to be I want to import BrowserRouter, and I wanna import that as Router. And that's gonna come from react-router-dom, just like that. So let's go ahead and save that. So now I can use this router and that's gonna be the main piece that's going to bring all of this together for me. And so what I need to do at this point is I need to use this Router in my page. So I can specify routes that are going to be living inside of this application. And at this point, because I'm going to use this Router as kind of the root element, I don't need to use this fragment anymore. So I'm actually gonna change this to Router and we'll come down to the bottom here. And we'll make this Router as well. And this works once again because I'm exporting, specifying in my JSX, a single parent, a single parent element, just like that. So now that I've saved that I can now come back in here and I can start to play around with this a little bit more. And now that I have made these changes, actually you can save that and come over to your application and you can see now that it's running just as it did before. But now what I can start to do is I can start to specify these routes within my application and specify different pages. But before I do that, I'm gonna actually need a page. So the first thing that I'm gonna do is, I'm going to create a home page. So I'm gonna specify a folder. Once again and basically all of these pages are nothing more than components. So I'm gonna create a home.js component. I'm going to import React from 'react'. But the difference here this time is that I need to, and I'm gonna say export const home = no imports just yet, we'll get around to that and I'll simply return. And now at this point, I want to return basically everything that's in here. So I'm gonna grab the nav, the header in the main body here all the way down to my footer and I'm gonna cut that out. So this is gonna be nothing here. And all of this is going to live inside of my home. But this is not going to be happy. Cuz it's not gonna know about nav, it's not gonna know about header, and it's not gonna know about footer. So I'm just gonna kind of give it some help here. Like that, we'll save all of those. And once again, there's gonna be a bit of a problem here, because this has too much going on in here. It needs a single open and close element, just like that. So we'll add our fragment back in. I'll save that. And then we'll save the changes here. And actually, I can get rid of these cuz I don't need these here anymore. Save those changes and I'll come back over here and nothing is showing up. And the reason for that is because we haven't really defined any routes. We haven't defined anything happening in here within our app. So the way that we handle that is by bringing, well there's a number of different ways that we can do that. But the way that I like to do that is I like to bring in something else from react-router-dom and this is going to be switch. Now switch is going to allow us to say, based on this different collection of routes within our application, if this particular route shows up, I want you to show this particular page. So within my route in here, within Router, I can now say I want to switch. And within here I can define a number of different routes. And depending on the route, I can show a certain component. Well, in this case at when I go to the root of my application, I want to show my home page. So in this case, I want to say home where my path is equal to the root. In that case, I want to show the home component, just like that. And it's not gonna know what route is, so I'm gonna have to bring that in here as well. That's just another little helper in here from react-router-dom. So I'm gonna go ahead and save that. Now I've saved it. And I'm gonna come back over here and it's going to show it because by default, we're gonna be going to the root or the main, the slash path. But if I were to change this to something else, it wouldn't actually work. But what's interesting here is that if you were to go here and click on Start Bootstrap or if you actually look down on the bottom left, you're gonna see /index.html. And if I come over here you can see /index.html/about. And all of these things, they're not really doing anything right now because they don't have routes or the appropriate react-router-dom links associated with them. And the way that we handle that, and by specifying the paths that we want to go to, is we're gonna go into our components here. We're gonna go into nav, cuz that's where everything lives. And now we're gonna make a little bit of a change in here. Any time I want to go to the root of my application, which is basically index.HTML, which shows up in a couple of spots, I am going to change this from an anchor tag to a link element. And then in here, instead of specifying the href, what I can do is instead I'm gonna use an attribute called to. And the to is gonna be sent to, in this case, the forward slash or the root of my application. And once again, this is not gonna know what link is. So I'm gonna come back in here I'm going to import {Link} from 'react-router-dom', just like that. Save, now it's gonna know what that is. And I'm gonna do the same down here for this guy right here. Once again, this is going to be a link element. Now I'm not gonna change them all just yet, because I don't have everything in place yet. But as you can see, this is basically the process that we're gonna follow for everything else. So I'm gonna save that. So now if I come back over here, now if I hover over this year, you're gonna see it doesn't say /html anymore. It just says basically the route, and so I can click on that, and it's going to take me where I want to go and for home as well. So in the next couple of lessons, we're going to start working on doing the same conversion and creating the same kind of idea for these pages for about sample post, and contact.

Back to the top
Continue watching with Elements