All language subtitles for 016 The Concept of _Composition_ (_children props_)_en

So by now we got components everywhere.

We got the Expenses component,

ExpenseItem, ExpenseDate, app, yeah.

A lot of components.

But that really is what React is all about.

Now, obviously throughout this course

we're going to learn about more features,

which we can add to these components

to make them more interactive, to improve their performance,

to send Http requests and much more,

but in a nutshell, and that's really important,

it's all about components

and it's about props for configuring these components

for passing data into them.

And components really just are these custom HTML elements

where you combine HTML code,

JSX code to be precise and styling

and if you want to, also extra JavaScript logic,

as we're doing it in ExpenseDate.

That is really what components are about.

Now I did mention it multiple times already.

We build all these components

to then build a user interface

and we are already doing that.

In App.js we're using Expenses,

in there we are using ExpenseItem,

in there we're using ExpenseDate.

Generally, this approach of building a user interface

from smaller building blocks is called composition.

Now there's one specifically interesting aspect

of composition, which we haven't seen thus far though.

What if we wanted to create a component

which actually just serves as a shell

around any kind of other content.

At the moment, we have highly specific components.

The ExpenseDate component is about outputting a date

in exactly that format and in exactly that look.

The ExpenseItem component is just

about outputting an expense item.

And in your React application,

you will always have a lot of these

very specific components.

All these components are also just configured through props,

through the date prop, the title prop, the amount prop

in the case of ExpenseItem, for example.

And again, that is fairly standard.

You'll have a lot of these components

in your React applications.

Sometimes however, you wanna have a component

where you don't configure everything through props

but where instead you're able to pass content

between the opening and closing tags of that component.

And here's an example where this would make sense.

If we have a look at our current output,

then we see

two kind of

boxes or containers.

We got a container around all the expense items.

It has a light gray background, and rounded corners,

and a slight drop shadow, which might be hard to see.

And we have a container around the overall expenses list,

with a darker gray background

but also rounded corners and a slight drop shadow.

Now, the idea behind all of these components

is to have reusable building blocks

also to avoid code duplication.

And here at the moment

we at least have some style duplication,

also maybe some HTML structure duplication.

Expenses has a div which surrounds our expenses

which applies certain styles, thanks to this class.

And the same is true for ExpenseItem.

Now, of course not all divs have the same look though.

Inside of our expense items we also got divs like this one

which have a totally different look.

Nonetheless, we could extract this surrounding container div

which we have both in ExpenseItem and Expenses.js

and extract the styles they have in common,

like rounded corners and a drop shadow,

into a separate component.

And we could name such a component card

because this is a specific card look.

And this is not a term I came up with.

Instead in general, in web development,

when you hear the term card,

it's typically means some kind of container look

with rounded corners, drop shadows, and elements like these.

So that's why I'm picking card as a name here.

Now, such a card component

is still a regular component here.

So let's create it as such

but such a card component could now do one main thing.

It could return a div

or any other kind of container HTML element

with a class name

of let's say,

Card.

And then we could add a Card.css file

and import that into that card component.

So import Card.css,

and now in the Card.css file we could have, let's say,

the box-shadow and the border-radius from Expenses.css.

Maybe we would be able to extract more styles

but I'll go with these two.

I'll cut them from Expenses.css and add them to Card.css

inside of a card CSS class selector, which I added there.

I will also go to ExpenseItem.css

and here in ExpenseItem in this class selector,

we all defined a box-shadow and a border-radius.

So I will remove these styles from there as well.

Now, why am I doing that?

Just to show this kind of component.

Now we got this card container component you could say,

which should act as a shell around

either our ExpenseItem content or our Expenses content.

And that's the key.

This card component will now not be configured

through some attributes.

Instead, my idea would be that,

let's say in ExpenseItem,

we can simply replace this built-in div

with our custom card component.

And then we get these predefined styles

for the card automatically.

Maybe we then just want to make them extensible

but we get these predefined styles automatically.

And for that of course,

we wanna import Card from ./Card inside of ExpenseItem.

The thing just is if I save that,

you will see that all the expense items are lost.

And the reason for that is that out of the box,

just like that,

you can't use your custom components as wrappers

around other kind of content.

Having content between opening and closing tags

doesn't work just like that.

But of course it does work for built-in HTML elements,

like the div or the h2 tag.

So it would be nice if we could also make it work

for our custom components

to build such reusable wrapper components

like this, for example.

And of course, React has a solution here.

We can build such wrapper components.

In Card.js we again, when I accept props.

But now, as I mentioned we'll not work with some attributes

but instead we will use one special prop

which is built into React, which every component receives,

even if you're never setting it explicitly.

And that's a prop which value I wanna output

between the opening and closing tag of this div,

inside of the card component function.

It's the props

children prop.

Children is a reserved name.

We don't set a children prop on this card.

I'm setting a class named prop

and actually at the moment, this won't do anything.

But I'm not setting a children prop.

Children, as I said, is a reserved name

and the value of this special children prop

will always be the content

between the opening and closing tags

of your custom component.

So in this case,

this content between the opening and closing card tag,

that is what will be available on props children

inside of that card.

And therefore, if I now save this, we got some content back.

However it's also a bit broken.

And the reason for that is that I extracted some styles

which ExpenseItem and Expenses had in common,

but I had more styles to find for expense items

and these styles are important.

But they're missing now.

I am setting a class name prop on card here

but you must not forget that card

is now a custom component defined by you.

All the default HTML components

out of the box supports class name for adding CSS classes

to the rendered HTML elements.

But your custom components only support what you tell them

to support.

So if you wanna make sure that a class name can be set

on your card component and then has an effect,

we have to tweak the code in the card component.

And here we would probably wanna tweak it

such that we add whatever is set as a class name on card

to this class name string, we're setting as a class name

on that div.

So here we could add a classes constant

which is

card as a default class

which is always applied,

white space

plus

props.className.

So now anything we receive as a class name from outside

is added to that string.

And here we can then dynamically point

at this class, this constant.

So with that, we're now making sure

that any value set on the class named prop

is added to this long string of class names

which is then finally set on the div inside of the card.

And with that all, if we saved it,

we get the same look as before,

not yet for expenses, but for the expense items

but now we have this reusable wrapper component.

And we can also use that in Expenses now.

Here, instead of using a div,

we can also use our card component.

We can import Card from ./Card

and replace this div here with that card.

Still setting a extra class name here as well.

And also replace the closing tag.

And if we do that, now we get the rounded corners back

on that expenses container as well.

Now, why would we do that?

What did we gain by doing that?

Well, in this case, of course, not a whole lot

but we were able to extract some code duplication

from inside our CSS files

into this separate wrapper component.

And it's not just a duplicate CSS code.

We also were able to extract this HTML code,

this JSX code, this div here.

In this case, it's just one div

but throughout the course

you will also see more complex wrapper components

which might have a more complex JSX structure.

Things like modals and alerts.

And in such cases, being able to extract that

often allows you to save a lot of code duplication

and it often allows you to keep your other components clean.

And this is another aspect of composition.

We compose our ExpenseItem component

by using card as a wrapper,

by using some built-in HTML elements,

and by then all the putting in the ExpenseDate.

And all these components and elements are composed together

to form the overall ExpenseItem component

which then again, is used in other components

to in the end overall, build the overall user interface.

So composition is important.

You use it all the time when working with React.

Whenever you combine components, you are using composition.

And an especially important part of composition

is this props children feature

which allows you to also create wrapper components

which is a special type of component, you could say,

which you also sometimes need.

Now again, as with all these things,

you are, of course, going to see many more examples

throughout the course.