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.6 Building the Contact Page

The final default page of our site comes in the form of the Contact page. Here, you will use the existing template contact page and deal with more pesky JSX issues while adding the new form to your website.

3.6 Building the Contact Page

As I mentioned in the previous lesson now, I've done a little bit of modification in the header. So now for the Home about and the About Me page, the text, so the title and the subtitle in the header changes based on which page you are on for the Home and About, so far. And really, the only change I had to make there is in my Header.js file. I added in an additional two properties that I could then render in the title h1 tag here, as well as in the subtitle span tag here. So I'm just passing a title and a subtitle. So then in my Home page, for my header, I'm now passing in my imgName as well as title and subtitle. And for About, I'm doing the same thing here that's showing the About Me. And the This is what I do text that shows up underneath it. So it's kind of a nice little customization now. So now I have a header that can be reused on all my pages and still allow me to customize the content that shows up on it. And so then, finally, we're gonna do a very similar thing for the Contact page over here. So let's do that as well. So I'm gonna come in here, I'm gonna create a new page with a new folder, and we'll call this Contact. And we'll create another file, Contact.js. We'll import React from react. And then we'll export a new const function called Contact. Right now, we're gonna need to pass in properties from now on when we create these pages. Cuz remember, we need to adjust the header that's found in here. So we'll say return. And then in here we're gonna do our Nav like we've done before. So we have our Nav. Then we have our Header. And we're gonna have the imgName here is gonna be equal to, in this case, this is gonna be contact.bg. And we're gonna need our title, which we'll pull from that sample page. And then we're gonna need our subtitle, which we'll pull from that as well. But for now, we'll just put in some placeholders here. And then we will drop down and we'll do our footer, just like that, and we'll save that. And let's go back over to our template and get our contact page here, open with Visual Studio. And here's all of our information. Here is the main content. It's a little bit larger, not too bad, not as bad as the home page, but still a little big. So we'll copy that. We'll go back over here to Contact. And we will paste that in and move this over a little bit. And as you can see, we have some issues here with some comments and let's take a look here. So we have some things that are closing out here, div, div, div, form. So we're gonna have to adjust our form just a little bit but that's okay. The problem that we're running into here is that our inputs more than likely are not self-closing. So we'll go ahead and do that. Close that input, and then we'll close this input, and we'll close that input. Text area is closed, and then we have a break here that's not closed. And I think that should just about take care of that part, and we'll save that. But then we also, as I mentioned before, we need to bring in the text from the header. And in this case, it's gonna be Contact Me and then Have questions? I have answers, we'll copy that. So we'll change that in here to Contact Me. And then the subtitle here, we'll paste that in as well, save that. And I think for the most part, we should have it. So let's come back over and take a look at we have home, we have about, and then we have contact, which is not working. And as you notice, it's because we haven't fixed the route here. We haven't taken care of that portion yet. So once again, all we're gonna have to do is come back to our App.js. We'll create a new route, we'll copy that, paste. And if we go to Contact, then we want to go to the, Contact page, we'll save that. We'll come back around, and now we have a bit of an issue here. And that's because we have too many parent elements here in our Contact page. So we're simply gonna come back, and we'll add in our fragment at the top. And at the bottom, now, obviously, and I've been doing this as kinda default using this fragment. You don't necessarily have to use the fragment. You could put a wrapping div in there if you want. And that'll allow you to add some styling with some classes or what have you. But that's basically just the process right there. So if I come in here and go back to my route, I can go to my about, and I can go to my contact, as well, and it doesn't seem to be picking that up yet. So let's come back in here and take a look and see what we have, Route path /contact. And we'll go to our Nav as well. And we'll do the same thing here, where this is going to now be a link. On both ends, and we'll change this to to="/contact" like that, and we'll save that. So now when we come back here, I should be able to go to /contact, and there you have it. We have Contact Me, Have questions? I have answers, and we have a nice picture of a telephone here. And then we have our form down here at the bottom, basically just using the styles and the information that are in that template. Now this is obviously not gonna submit a form anywhere. At this point, we'd have to write some code to handle that and on the back end receive that form. But basically, now we have our form that came from our Bootstrap template working in our React application. So we're looking pretty good so far, we're able to handle most things here. The sample posts, I'm gonna remove that from the navigation, actually. And I'm gonna tell you why in just a second. But basically, we're doing pretty well here. Most of the time in websites, you're not gonna see a link like that to take you to a sample post. You'll see something else that's probably like top posts or something like that. But I'm not really gonna worry about that in the header right now in the navigation. What I do wanna do, though, is I do wanna come back over here to Home. And I wanna start exploring this list of posts here. And that's what I'm gonna focus my attention on next. So basically what I wanna be able to do is I want to render this in such a way that I don't have a big mess of things going on here in the Home. So this is really, really ugly here. And what I see in here which is should be kind of a red flag to you as you start to go through this process is anytime you start to have things that are duplicated like this, so we have PostPreview, PostPreview again here and here, anytime you start to see that type of duplication, that should be crying out to you for components and reusable components. So what I wanna do next is I wanna clean this up. I wanna create two new components, a list of post previews as well as individual post previews. And then when you click on the individual post previews, I want it to take you to a page that has information about that post. So that's the reason I'm taking this link out of the top up here for the sample post. All I wanna do is be able to click on one of these posts and then be taken to that page to actually read the information about that post. So right now we're doing pretty well. It's just a little bit of cleanup that we wanna do and we're gonna start that in the next lesson.

Back to the top
Continue watching with Elements