All language subtitles for 020 Card List Component_en

OK, so now we're going to start converting our current application to look more like the final application.

Before we do that, we've got to take a look at this idea of components.

So right now, we do know that our only component is the app component.

Right.

We've only written this one single class based component, which is our app.

However, in REACT, what we want to do is we want to be able to break our code into smaller, reusable

pieces that are only focused on one responsibility.

Right.

So when we look at this, we see that this card seems to be its own component.

This search bar is its own component.

And in a way, because this card is itself, it doesn't really care about the other cards around it.

So there's got to be something that seems to be containing every single card on our page.

And that is going to be another component.

Now, when we build that outside wrapping component, we're going to actually take a deeper look into

what components are in react.

So let's first make a components folder.

And inside, we will make a card list folder.

And in that cardless folder, we're going to make a card list component.

Now, you don't need this component part, but I like to add it just so that I can tell right away what

kind of file that is.

So this is our component file and we need to import react from react.

And we're going to export out this card list, right, and it's going to be a functional component and

what we want to display for now is just the containing d'Hiv.

Now, one of the big things about components is that they take in something called props and props is

going to be the parameter that we get from our functional component.

Right.

So right now, let's just log this out and see what this looks like, because it's important for us

to know what props actually are.

And inside of the stiv, I'm just going to put hello for now.

And let's consult logout props, right?

So now we know that we're logging it out when we put it on our actual application and we're going to

import it into our app file import.

Component's Carlist cardless component.

Now, let's just put this above here for now and let's not put anything into it.

Now, you remember earlier when I said that there are these this props parameter, right?

This is actually going to be any parameter that we pass into Carlist.

So if here we say there's a prop called name and we pass in Iowa.

Right.

Then what will actually logout when we look at our app?

Is this Carlist that says name?

Right.

And then it says Iowa.

So right there is our cardless component and right here you see that we're actually logging it out,

we're logging out EOWA, right?

So that prop is going to be an object of any properties that you write on to this component where it

gets used.

Now, generally speaking, of course, we want the props that we're actually going to pass in to match

the parameters that we're actually going to use inside of our component.

But one of the main properties that exists on this props object is one called children.

It will always be there, but it if there's no children, it'll be null.

So what are children?

Children are actually what you pass in between the brackets of our component that gets called.

So if in here I say EOWA, then the children Propp will be this EOWA, right?

Actually, I'm even going to make it an H1 just so that I can show that it's anything in between.

These tags, so now if we instead render props to children, got to remember to use the squiggly brackets

because that tells that we're going to use JavaScript and now we see EOWA and this is an H1 as well.

So that's one of the big things about props and components, we actually have access to props as well

on our app component, on the this keyword, it gets attached to our actual class as a prop. called

props.

So if we want to access that, we would use this stop props.

But because we're not using it yet, there's no reason to do so.

But in a later lesson, we'll actually see what that will look like.

But for now, let's just focus on our card list.

So we're adding in these props, right?

We're passing the children because we do want that.

And then we're going to actually do some of the styling to make it look more like this, so we noticed

that this is in kind of like a four column grid.

Well, I actually have some of the CSFs written already for us that you guys can get from the file,

but I'm just going to include it.

And I don't want to focus too much on the success because it might be a little bit too much to think

about when we're trying to learn react right now.

But there is one thing I want to highlight.

So first, let's make a card list styles nauseousness.

And let's add that in, so all I'm saying really, really quickly is that I'm adding I'm using the new

access grid, right?

I'm setting the display to grid.

I am saying that I want the grid to make everything fit within four of these columns, each one being

the size of one fraction, which is essentially an equal part of the overall size of what the width

of this card list will be.

So there is just four equal columns and then between each column there will be 20 pixels.

So let's use that and see what it looks like.

So it's important that in.

And then let's put it on, so let's get rid of this for now and let's put it on so our class name will

be called.

If we save it, we will see.

Now that he was in here, right, but we want everything in there as well, right.

So now instead of passing equa through.

I want to pass all of our monsters through.

Right.

So, again, this map is going to generate our list of those ones the same way, but then it's going

to put it as the children in between this d'Hiv that we have as our Carlist component.

And now if we look, we see that it's an unequal grid of four equal columns, so this is a really,

really fundamental thing about react is that we're just building components that only care about one

thing and our cardless component only cares about displaying cards inside of it in some kind of configuration

right now.

The next thing we're going to look at in the next lesson is taking that idea a step further and we're

going to apply it to this car to component next.

See you in the next one.