All language subtitles for 015 Splitting Components Into Multiple Components_en

As you work on your React application

and on your React components,

you will notice in any project

that your components eventually become bigger and bigger.

As you have more and more logic and JSX code in them.

This is something which will naturally happen.

That is why React has this component concept.

This allows you to split your application

into smaller building blocks,

where every building block, every component

is focused on one core task, you could say.

And then you build your overall user interface,

by combining these building blocks.

By doing that, you keep every component on its own

relatively small and manageable,

and you keep its code base small and manageable

and you still can build a complex user interface.

Now, there is no hard rule when to build a new component,

whereas as adding more to an existing component.

But in this component here, in this ExpenseItem component,

we could already argue

that it's getting a little bit too big,

though, I will say that this is definitely still all right.

Nonetheless, we could argue that this date object here,

this calendar item which we wanna show on the user interface

could be treated as a separate component.

Of course, the same case could be made for the title

or the amount, or a title and amount combined.

As I said, there is no hard rule.

But since for this calendar,

we'll have a couple of helper constants

and we'll have extra styles.

I personally like to split this ExpenseItem component here

into two components, the ExpenseItem component

which we already have,

and then a new component for rendering this date

in this calendar item look.

And therefore, we're now going to create

our second custom component.

And for that, I'll create a new file

in the components folder and I'll name it, ExpenseDate.js.

Now as always, the file name is up to you

but I recommend that you follow this convention

of naming it like this,

starting with a capital character, one word,

with every extra word

also starting with a capital character.

And again, it should also express

what's happening inside of that file.

What that component will be about.

And this component will be

about rendering the date of an expense.

Hence this sounds like a fitting name to me.

Now in there, we create a new component

and that still is a function.

Components and React are just regular functions

with the extra twist of returning this JSX code.

Now I'll name it ExpenseDate, again,

following this convention that we repeat the file name here.

And I'll then export it to make it reusable

outside of this file, like this.

Now in here, I wanna calculate month, day and year.

So I'll cut this logic from ExpenseItem

and move it to ExpenseDate.

And therefore, of course,

I need to accept props as a parameter here.

And I do now expect that this component will be used

such that a date prop is set.

Now in ExpenseItem, I wanna use this new component.

But before we do that,

I will actually grab this div with the month,

year and day inside of it and cut it as well,

and return that as JSX code inside of ExpenseDate.js.

And now in ExpenseItem, at the top we can add a import.

And import ExpenseDate from ./ExpenseDate, like this.

./ExpenseDate because we're looking in the same folder

as the ExpenseItem.js file lives in.

And now here,

where we previously had our JSX code for the date,

we instead output this ExpenseDate component.

And as a side note,

if you have a component that has no content

between the opening and closing tags,

you can also write it a little bit differently.

You can write it as a self-closing element like this.

This is then also, okay.

And we could do the same here in App.js

with the ExpenseItem, since this also has no content

between opening and closing tag.

This is totally optional but it is quite common to do that,

if there is no content between the opening and closing tag.

So now we're using ExpenseDate in the ExpenseItem component.

And we're doing this

to move some of the JSX code and JavaScript logic

out of the ExpenseItem into a separate component.

This component is now again, also reusable

and we can use it anywhere in this React application,

not just at ExpenseItem.

We could use it elsewhere as well, if we wanted to.

And it now also helps us with keeping ExpenseItem lean.

This is now again, shorter

and therefore maybe a bit easier to maintain and manage.

And the bigger your application gets

and your components become,

the more you wanna look into splitting them up.

Though, again, just to really emphasize this,

there is no hard rule on when to split.

This is something which will come with experience

and you'll also see plenty of examples

throughout this course.

Now we must not forget though,

that our new ExpenseDate component needs a prop.

It needs the date prop,

at least that's the name I'm referring to here

inside of ExpenseDate, to well, extract that date

and format it and extract the month, day and year.

Hence on ExpenseItem or in ExpenseItem

when we use ExpenseDate, we should set the date prop.

And if you use the different name here in ExpenseDate,

you, of course, wanna use a different name here

instead of date as well.

Now, the value which I pass here will just be props.date.

And I know that this is now the point

where it can get confusing,

because now we're basically funneling some data

through multiple levels of components.

In the end, we can see this component tree come to life now,

because now we don't just have the App component

and then one other custom component,

but we have multiple custom components

and they are nested inside of each other.

Just to make this really clear again,

in the App component, we're using the ExpenseItem component

and inside of the ExpenseItem component,

we're using the ExpenseDate component.

And not just that, we're also forwarding our data

with the help of props through multiple components.

We're passing data from the App component into ExpenseItem

and in ExpenseItem, were outputting some of the data.

But other parts of the data to be precise, the date,

which we here, also already received through props,

it's then forwarded even further

into the ExpenseDate component, again, by using props.

Because props are our way of passing data

from component A to B.

And it's also totally fine to have a component

which just passes data on.

So in the end you could say,

we pass data from App to ExpenseDate,

the date, to be precise, is passed on.

And we passed it on through ExpenseItem,

because that's how props work.

We pass data from a component to a direct child component.

So to a component which is used

in that other components JSX code

and we can't skip such a component.

So if the date should be passed to ExpenseDate in the end.

Here, in this case, since we use ExpenseDate

inside of ExpenseItem,

we first of all have to pass that data to ExpenseItem

and then forward it to ExpenseDate.

I hope this is clear, if it's not entirely clear yet,

that's also something you're going to see in great detail

and in many examples throughout the course.

But with that, we are forwarding the date

and we get this separate component now.

If we now saved that all,

we again see our date data being output here.

Now we also wanna have some styling

and therefore I'll add a new file, the ExpenseDate.css file.

And you, again, find that file attached.

You can just replace yours with it

or open it and copy everything you find in the attached file

into your ExpenseDate.css file.

And once you did that,

you can go to the ExpenseDate.js file.

And at the very top of that file,

import ./ExpenseDate.css

to make the entire project set up aware of that CSS file.

And then add a couple of CSS classes here.

On the surrounding div, we add a class name

of expense-date, for example.

On that month div, we add expense-date__month.

For the year div, we add expense-date__year.

And for the day, we add expense-date__day.

And here I imported the wrong file.

This should of course be ExpenseDate.css.

And with all of that done, if we saved this.

Now, we got this nice look here for our dates.

And this looks much nicer.

And we also practiced how we can add yet another component.

And adding this component was optional,

we could have put everything into ExpenseItem.

The entire JSX code

which we have in a separate component now,

the helper constants,

we could have added this all into one component.

We could have also added the CSS code here

in the ExpenseItem.css code.

But then this ExpenseItem component

would become bigger and bigger.

And whilst in this case, it would have still been fine.

It is generally a good practice

to keep your components small and focused,

and that is why we did extract this extra component here.