Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
by
Lessons:15Length:1.6 hours
Building a react website with a pre built template 400x277
  • Overview
  • Transcript

3.5 Creating an About Page and Customization

With any web project, customization will be necessary. In this case, we'll make customization easy with a Header that will let you use the same component on multiple pages, simply providing new data to it for different pages.

3.5 Creating an About Page and Customization

Now that we have our Home page more or less taken care of, let's move on towards the About page and start following the same process with that as well. So, I'm gonna start just like I did before by creating a new page. So I'll start by creating a new folder, and this is gonna be About. And then within here, I'm gonna create a new file. And once again, this is gonna be About.js. And we're simply going to do an import. We're gonna bring in React from react. And we'll start and create a new const function here called About. And we'll set that equal to an arrow function here, just like we've done before. And then we'll go ahead and return something in our JSX. Now, in our Home page, as you can see here, we basically have four sections. We have our Nav, we have our Header, we have the main body of the page, and then we have our footer. So let's go ahead and kinda start similarly to that. So I'm gonna add in my fragments here. So I know that I've got everything starting in one parent element, and then I'm gonna add in my Nav. And then I'm gonna add in my Header. And then I'm going to add in my Footer just like that. So now we kinda have a basic structure like we have before. And we'll add in the body in just a second. So as you can see, I've got all this set up, I've got it saved. So then really, if I wanted to add this into my application right now, I could go back into my App.js and add a new route. So I'm gonna grab this, I'm gonna copy it. And then, I'm gonna go ahead and add that in. And now I'm gonna say, if I wanna go to the path/about, I now wanna bring in my About page just like that. And so I've brought that in here as well. So let's save that. Now, remember, when we were doing the Home page as well, or excuse me, when we were doing the Nav components, we were changing the anchor tags to link tags for the different parts or the different links that are pointing to that particular page. And in this case, we only have one. So let's go ahead and do the same thing here. We're gonna add in Link. And we'll change the closing tag to Link. And then we'll say, instead of the href, we're going to say that we have a to/about, just like that. So let's go ahead and save this. And if everything is done correctly, we'll come back over here, and we're gonna see that if I try to go to Home, if you look in the bottom left, it says localhost Port 3000. Same with the Start Bootstrap link. And now, if I go to About, you're gonna see, it goes to/about. Now, if I tap on that, we're really not doing anything yet. Which is interesting because I would at this point expect to see my Navigation at the top, my Header, and my Footer but nothing in the middle. Well, the problem that we're having right now is the fact that when we are going to the /route, the main route here, so as you can come back into App and see. Actually what's happening here is that every single path that we go to at the moment does begin to match this slash out of the gate. Because if as you can see, we're going to slash here, and we have /about. So the fact that that kind of matches is because it begins all the different routes we have so far, it's causing a bit of a problem. So in order to get around that, when we try to go to a specific route here, we're going to put this in as the exact path of slash. Because at that point, we're gonna be able to differentiate between the routes path which is just a slash, and then every other path after that which is a /about, or /contact, or whatever. So let's go ahead and save that change now. We'll come back to our project here. And now if I see, and now if I tap /about, or if I tap about, I get to a basic page here where I have my navigation, I have my header, and then I also have my footer, which is good. But now we've introduced another issue that we have to be able to work through. Is the fact that this header is the same header that we saw in the Home page, right? So if I tap on Home, it's the same header here which is not really what we're looking for. There's a different header text and a different subtext for all the different pages. And we have to be able to address that. But before we get that far, let's add in the body of the About page here. So I'm gonna come back over into my templates. And I'm gonna go look at the About page here, and I'm gonna open this in Visual Studio Code. And so here is everything that's in that About page. So once again, we've got our navigation, we have our page header, and the main content is actually pretty small here. So I'm simply going to copy this. And I'm gonna leave out the comment here. I'll simply copy that. I will come over to my About page and I'll just drop this in the middle right here. Just clean this up just a little bit, just like that, and save that. And so I'll come back over here. And as you can see, it's reloaded, and now I have my about Lorem ipsum text in here. So now we can kind of see different pages. We have our Home where we have our different previews of our posts. Then go to About and I can see the texture. But now I have to take care of the top here. So there's a couple of things that we're gonna need to do for that. We're gonna need to add in a little customization here of the header component. Cuz as you can see right now, every single time we render this component, we see this same background image here. We have home-bg, and that's not really what we want. So in order to fix that, what we're gonna have to do is we're going to have to take into consideration what image we wanna show in the background. And in order to do that, we're gonna need to take in some properties. So now I'm gonna be parsing in some props here just like this. And then we'll come in here, and we're simply going to end the string here. Just do some basic string concatenation, and then we're going to restart this string here, like that. And now we need to fix this part right here. And that's actually fairly simple in that all we're gonna need to do is add in here whatever the name of the property is that we are creating for this header component. So in this case, we'll just simply say props., and we'll call this imgName, just like that. So we'll save this, and it's gonna kinda mess with some things now, because now we don't have any backgrounds. Because for the headers, we're not actually parsing anything in yet. So if you noticed, if I take a look in my public directory in my image directory, you're gonna see that I have home-bg, I have about-bg. So it all kind of follows that format. So now I can go to my Home page, and I can go up to my header, and then I can create my imgName attribute, and then we'll set that equal to home-bg, just like that. I'll go ahead and save that. And if I come back over here and try to re-render that, that's not actually gonna work because I cut off a little too much of this. I need to leave on here the .jpg, I don't wanna add that in as part of the property. I'm just gonna have that be default as you can see because all of these are jpgs. So I'm gonna make sure I leave that in there. And then once I come back, it's gonna render that page nice, and I can go to About, and we're gonna have the same problem here. So let's go back over to our About page. And I'll add in my imgName property here. And we'll simply say about-bg, and go ahead and save that. And so if I had done that, now I'm gonna get that nice background here as well. So as you can see now, I can start to tailor each of these components based on which page they're being loaded on. And of course, you can do the same thing with the texture if you would so choose. If I would come back and take a look at this about here, open that back up, You're gonna see up in the header, you're gonna see About Me. So you can do the same thing by adding in text, and then a subheading, if you would like. And I'll leave that for you to customize if you would like. But basically, it's gonna be the same process where all you're gonna need to do inside your header is add another property that's going to allow you to customize this information right here. So I'll go ahead and do that, and then I'll show you what it looks like and then move on to the next page in the next lesson.

Back to the top