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.3 Structure and Components

Now that you have the basic pieces to actually see your template up and running, it's time to start analyzing the template code and pulling it apart into different pages made up of components. But before you can do that, it typically helps to provide some structure to your project. And in this lesson, I'll show you how to do just that.

3.3 Structure and Components

The next thing that I wanna do is I wanna start adding a little bit of organizational structure to my application. If I start to look at this, now this is just for the main index.html file that was from our template, so as you can see, there's a lot of stuff going on in here and that's fine. It's okay to have pages within your site that have a lot of markup, but when it comes to the actual code in our components, in our pages of our React application, I really kind of look down upon that. I wanna be able to modularize this site as much as possible, into components that I can either reuse across this application or maybe even other applications as well. And a lot of times, you can look at these websites, these templates in a way that kind of allows you to pick these things apart and see what these different components are gonna be. So I could look at this visually and say, all right, well, I have a header this kind of Jumbotron-y kinda thing, and this navigation that sits up here at the top as well. So, I could say, all right, well, I've got a header here that has a background image and a title, that could be one of my components. I have this navigation bar at the top, I can click on all of these links, the navigation bar itself could be another component. Then we kind of have the main guts of the page, maybe that main section could be a component as well. And as you can see in here, I have a list of these blog post kind of previews. Maybe this list of blog posts could be a component where each of these little previews in here can be its own component within that list as well. And then down at the bottom, I have this footer that could be a component as well. So these are the kinds of things I like to think about, when I'm starting to pull these templates apart, into a React application. And then finally, or depending on how you wanna look at it, each one of these links will take you to a new page, and usually, that's kind of another kind of hint to me of how I want to break things up. So typically, the way that I like to break up these applications is into, everything is a component, but I like to break them into specialized page components. And then kind of like sub actual components, that are the building blocks of each of those pages. And that's usually the way that I tend to look at these things, so let's start by creating a little bit of structure around this. So I'm gonna come into my source directory here, and I'm gonna create two sub directories. I'm gonna create a new folder, we're gonna call this pages. And then I'm gonna create another folder in here and I'm gonna call this components. So as I said before, pages is gonna kind of be the larger components that I'm going to put these each of the pages into, so I can have their own little section to build. And then components are gonna be the smaller components that I put together to create these pages. So hopefully that'll make sense, especially once they start building these things together. So let's begin with some of the simple process of taking a component and creating a new one inside of here and then being able to reuse that. So the first thing that I'm gonna start with here is just the first one in our In our markup here and actually, as I said before, as you can look at this visually, and you can kind of pick things apart how you think they're going to look from a layout perspective of your actual website. Or you can come in here and take a look at the markup and depending on how complex it is, you could do it here as well. So I could see I have a navigation bar component, I have a header component, maybe I have a main section component, and then I have a footer component. And I can pull things apart that way as well. So it's really just up to you if you'd like to do it visually versus code, really doesn't matter. I've done it either way, it's not a big deal. So I'm gonna start though, with this navigation component. So I wanna create a nav component that's gonna have all of this information in there that I can reuse. So let's start by going into our components directory. I'm gonna create a new folder. We're gonna call this nav. And then in here I'm gonna create a new file. I'm gonna call this nav.js. And then I'm gonna import React from 'react' because I want this to be a component. And then I am going to export const nav. That's gonna be the name of my component, and I'm using this functional syntax here. I'm going to export the nav as a function and then this needs a return statement, and then in here, what am I going to put in here? Well, this is where I'm going to put this nav section right here, so let's grab this whole thing. And I'm gonna cut this out, and I'm gonna drop it in right here. And I'm gonna make sure that everything is okay. Sometimes you have to play a little bit with the formatting on this copy and pasting stuff, but it's usually not too bad. Now, I didn't have anything special in here so I shouldn't have to bring in any other references to anything, this should be enough. So if I save that, and I save my changes over here and save the app.js component, I'm gonna come back here bow I've lost my navigation bar. And that's because I haven't done anything other than I've removed the actual navigation section that was here and I moved it into a different component. And the application doesn't like that cuz it doesn't know yet about the NAV component over here. So all I wanna do now is I wanna bring in a new nav component. And when I did that, Visual Studio Code helped me out, and it saw that I wanted to use my navigation component, my nav component, so it brought in a reference up here to that component. So now if I save that, I can jump over here, and now I have that navigation bar again. So as you can see, just by moving some things around, I didn't change anything functionally in my application, but I've just started to pull these things apart. So let's do that two more times, I wanna do that with header, and then I wanna do that with footer as well so it's gonna be the same process. I'm gonna go into components, I'm gonna create a new folder. And in this case, I want this to be header, and while we're in here we'll create another new folder, and we'll call that footer. So let's start with header, create a new file. This is gonna be header.js going to import React from 'react'; and then I'll go ahead and export a new header function just like I did before. And as you can see here, I'm not bringing in any properties at this point, but I'm gonna need to do that, especially for this header, and I'll show you that in an upcoming lesson. But for now, I'm not too concerned about it so let's go ahead and grab this header right here, go ahead and copy that, drop this in here. Maybe fix this just a smidge something like that, that should be fine I'll bring this back a little bit okay, we'll go ahead and save that, so now we've made a change to our header. And let's go ahead and drop that in here, Our header component and as you can see that was brought in as well. And then we'll come down here to the footer. And I'm gonna cut this right now, come over to my footer directory, New File, footer.js, import React from 'react'; then we are going to export const footer = () => { this function right here, and then we'll go ahead and return that. All right, so that was basically the same process, right? So all we really did is we went into our kind of main copy and paste that went into our app.js, our main component. And all I did was, I took some of the pieces that are probably gonna be fairly similar across different pages, so right now, you can kinda think of this main app.js for the moment anyway, as its own page as that index.html page. I don't necessarily like that, I'm gonna change that in an upcoming lesson. But then basically all I did was, I went and I took these pieces that can be reused, that are gonna be the same across pages, and I simply created a couple new components in my components directory, that can house those. So basically what that's gonna help me do I can now reuse those across pages, and it's gonna clean up my markup dramatically. And as you can see now I've been able to take care of my navigation, my header and my footer on this page with three lines as opposed to all that extra code all that extra markup that was in there before now. The main area in here, the main content portion, it's a little messy still, and we're gonna get to fixing that up and cleaning and moving things around, but this was a very good start. So we've been able to add in some structure to our application, we have our components directory and our pages directory. And we've kind of started to clean up the index.html or actually the app.js portion of our site. So now in the next lesson, we're gonna start to introduce the concept of pages and routing within our application.

Back to the top