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
some general user interface elements,
which are not tied to a specific feature of the app.
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,
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,
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,
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
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
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.