All language subtitles for 020 Organizing Component Files_en

Maximilian: So, now, in the last lecture we learned

about JSX and how it looks like under the hood,

and why we therefore could add all these React imports

to all these files, which hold JSX code.

Speaking of the files, let's talk about organizing them.

Here, we only got a couple of components

and therefore we can store them like this,

but as your project grows and as you have more

and more components you might want

to organize them into sub folders

and not just throw them all into one components folder.

And, indeed, that is something

we can already get started with.

Here, we could argue that we have some general UI components

Here, we could argue that we have some general UI components

some general user interface elements,

which are not tied to a specific feature of the app.

And then, we got some features specific components,

And then, we got some features specific components,

like these components, which are dealing

with rendering expenses and expense data.

And, therefore, in the components sub folder,

we could create an Expenses sub folder,

we could create an Expenses sub folder,

and next to that a UI sub folder

for general user interface elements.

And we could move the card files

into the UI folder and the Expenses, ExpenseItem,

into the UI folder and the Expenses, ExpenseItem,

and ExpenseDate files into the Expenses folder.

Now, you just want to make sure

that you update all your imports like in Expenses.js,

where we import card, we now, first of all,

where we import card, we now, first of all,

need to go up one level with two dots and then a slash

and then dive into the UI folder

and import card, the card file.

We need to go up one level because Expenses is now

in the Expenses folder, and we need to get

out of that folder into the next folder above it

out of that folder into the next folder above it

to then dive into the UI folder, which is a sibling folder

to Expenses, to the Expenses folder, I mean.

We don't need to update the other imports

because these files are still in

the same folder as Expenses.js.

For ExpenseItem, we also need to update

the card import though, go up one level,

dive into the UI folder and then import card.

And in App.js, we no longer import Expenses

from components' Expenses, instead we dive into components

from components' Expenses, instead we dive into components

then into the Expenses folder

and there it's the Expenses file,

which you want to import from.

So, now, we can adjust these imports.

And if you did that, this again, all works if you load it.

And we're really just doing this to organize our files,

and to keep our components organized,

and to make sure that they're not all in one big folder.

Ultimately, it's up to you how you want to organize them.

And, of course you, should just organize them,

such that you and any team members you might be working

with are comfortable working with these files.

That's the most important thing which matters.