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

4.1 Creating the `PostPreview` Component

With the main pages ready to go, let's focus on the index page and identify more individual parts of pages that can be broken out into separate components. In this case, we'll focus on the individual PostPreview components.

4.1 Creating the `PostPreview` Component

So the next thing that I want to do as I started to allude to in the previous lesson is I want to clean up my homepage a little bit. The problem here is that we have this massive body and it's a lot of repeated information or at least repeated structure, the information might be different. But overall we basically have a div with some information about the actual post itself. We have a title, we have maybe a little teaser and we have some other information here that's being displayed and we want to be able to clean that up because basically this is all the same structure with just different detail and different information in it which always, as I mentioned before, leads me to think about how can I create a component to reuse that information and that's what I wanna do now. So I'm going to start by copying this block right here, since this is basically what's being repeated over and over again, and I want to create a component to house that so I'm going to copy that. And then I'm going to come back over here into my components. And I'm going to create a new folder. And this is going to be my post preview. And I will create a new file called post preview.js. We're gonna import React from React and just as we've done before, we're gonna export const, this is gonna be our post preview function. And we are going to need props for this because there's going to be a decent amount of customization that's gonna go on in all of these, and then we'll simply do a return statement. And we'll drop that code in here like that. So for the most part we could just leave it like this, but everything would be the same all the time and that's not really what we're looking for. So we wanna be able to handle the different pieces of information changing here. So right here we have our title, so what I'm gonna wanna say here, is I'm gonna want to put in my curly brackets so I can add in some data. This is going to be props dot and we're going to call the parent kind of property that's going to pass this data in our post. So I'll say props.post.title. And then down here, we'll say props.post.subtitle like that. And then we have posted by and then this is going to be the author. So we'll change this to be props.post.author and then down here we have the publication date. So we have posted by, the author's name on, and then this is gonna be our customization right here and we will say props.post.publication underscore date, just like that. And then obviously, we're gonna need to change this as well. Because we're gonna wanna go to a specific post or whatever have you and I'm not gonna really fill in a lot of those posts. It's basically gonna be the process of creating a new page and doing all that kinda stuff just like we've done before. So actually right now all I'm going to do is I'm going to change this to be a link, like we were doing before. And then instead of having this href point to nowhere, I'm going to have it say point to I'm just going to have it go back home for now, and it's not going to know what link is. So we're going to have to make this slight change. We're going to have to import link from React router. Done just like we've done before. So now we can save that now this is gonna work. At least it should anyway if I were to create a new post preview component on my page, but there's a reasonable amount of data that I need to pass in, and I need a place to be able to kind of collect all of these. So as you can see, if I were to go back into my home, I've kind of taken care of this part of the equation. But now I need to be able to kind of loop through all of this. In such a way that I can take some data from a source, whether it be from a database, or a web service, or wherever. And now I wanna loop through all of those and pass them into kind of a parent component. So when it comes to creating lists of objects or lists of components, you're usually gonna have that list that you wanna iterate through, and that you wanna pass that data into each of those components. So to have this PostPreview is nice, but I also want to have another component that's going to take a list of all of those components, and then display them appropriately on the page. So that's what I'm gonna do in the next lesson.

Back to the top