Maximilian: So let's get started
building this project together now.
For this, attached you'll find
this basic starting project here
which is just again an empty React application
pretty much.
And you can download this attachment,
extract it, place it anywhere on your system
where you want to work on it.
Run npm install in the extracted folder
to install all dependencies.
Then npm starts to bring up that development server.
And if you do all of that
what you'll see on the screen is just something like this
because we're going to build this project together
from the ground up.
And that of course means that we'll build many components
and that we'll practice many things
which we learned early in the course already
because components and passing data between components
and managing state and all of that
of course are crucial core fundamentals of React
so we will need those in any project we build.
But then, throughout this course section
we're also going to apply
all these other hooks we had a look at
like use effect, so that's the plan for this module.
Now to get started with this application here
we will need a bunch of components.
And if you remember the finished app
which I showed you before,
if you have a look at that
there of course are quite a few components
that can be identified.
Like that list of meals or the header at the top
or the cart, but also a couple of wrapper components
like this general model component,
this overlay component.
Or this container our meals are in.
We also got this image below the header
so there are quite a bit of components involved.
Now to get started, here I will again add
a components folder of course.
And in that components folder,
I will add four sub-folders
which is just a personal decision made by me
and I'll explain it along the way.
One sub-folder is the UI sub-folder.
I want to place general UI elements,
general UI components in that folder.
For example, I will have an input component in there
where the user can enter the amount in this application.
I will have a card component in there
which will be this container around my meals, for example.
And I plan to place the model component in that folder.
So some general UI components
which are not tied to a specific feature
of this application, but which instead
could be used in multiple places in any project.
I will also add another folder
side by side to the UI folder
and that will be the Layout folder.
Now in that folder, I plan to add my header component,
basically, and also another component
which will be related to that header.
Another folder which I will add
side by side to Layout and UI is the Meals folder.
That is the folder which will hold that list of meals,
but also the individual meal item components.
And then the last folder for the last set of components
I plan to build, is the cart folder
which will hold all the cart related components.
So that is just the structure I came up with here.
Of course it's not the only correct structure,
of course you can go for a different structure
and store your components the way you want
and write the components you want to write.
This is just my suggestion
because I think that this is a nice split
to split our components between features,
meals, and cart, and also have some general UI components
and some general layout components.