All language subtitles for 005 Adding a _Meals_ Component_en

So what's next?

Of course, this is generally up to you,

but here I want to continue with the meals

because, of course, that is a rather important part

of this application.

And for that, in the meals folder, I'll add a Meals.js file

and this will be responsible for, in the end,

rendering that meals list, though,

actually not just a list of meals,

but also this little summary text above it.

And therefore, I will actually add two other components here

which split these responsibilities.

I will add a MealsSummary.js file

which will render this text above the list of meals.

And I'll render an available meals component,

which will then be responsible

for bringing the actual list of meals to the screen.

Now let's maybe start with the meals summary component.

For that, you attached find a CSS file,

MealsSummary.module.css,

and in the meals summary component file, in the JS file,

as always, we just export a component.

Now this will be a very simple component

because it will just contain some hard-coded JSX code.

It doesn't even need to accept the props parameter

because we will not be using props here at any time.

And here, I just want to return a section, let's say,

where we have a H2 tag

where we say, "Delicious food, delivered to you,"

And then a couple of paragraph texts

with some text below it.

Now to save you the extra typing,

attached you find that MealsSummary.js file finished.

And there you got these paragraphs already added

and you also got a class name edit,

and they are for here.

I need to add to the import again;

you already have that in the attached file

where I import MealsSummary.module.css like this

and then add this summary class here like this.

Now again, you'll find

this finished meal summary JS file attached

because it is a very simple file.

More interesting, of course, is the available meals file.

Here we can have the available meals function.

We also don't need props here, actually,

because I won't receive any props here.

Instead here, in this application,

we will work with some dummy meals data

which is baked into this component.

That's of course a bit unrealistic,

but we will later in the course learn

how we could fetch data from a database.

At the moment we don't know it yet,

and therefore we will work with such dummy data.

Speaking off that, attached you'll find

the Dummy Meals JS file.

And that includes a simple constant,

which you should add in this file

above the available meals component function,

which is this DUMMY_MEALS constant

which holds an array of dummy meals.

Again, that is that dummy data we're going to work with

in this demo application.

Now, with that added here in the available meals component,

we want to render this array of meals,

which we of course could have fetched

from some database or anything like that.

In reality, we want our render this as JSX,

and therefore, we will need to transform this regular array

of JavaScript objects to an array of JSX elements.

And that is something you of course

learn throughout the course,

that that is something you can do easily with React.

So here we want to return some JSX code,

let's say with a section inside of it.

And then inside of this section,

I want to have an unordered list.

And inside of this unordered list,

I want to have my meals list, and therefore,

we can add curly braces and then refer to dummy meals

and map them into an array of JSX elements.

Now we can do this here,

and we did is here in the JSX code in the past,

but to keep this return statement lean,

I will actually create a helper constant here,

which I'll name mealsList,

which simply stores that mapped dummy meals list here

so that down there, I just output meals list.

That's exactly the same

as if I would be doing it down there.

It just ensures that this JSX snippet is a bit leaner.

And it's totally up to you

if you want to do this transformation here

and store it in a constant which you use down there,

or if you do the transformation in line in your JSX block.

Either way, we will simply map all these meals

by passing a function to map,

which is executed for every meal by JavaScript.

And then for every meal, we want to return a JSX element

which represents this meal item.

And that should be some list item, of course,

though I can already say, for the moment,

we can simply output meal.name here like this,

but that's just temporary.

We will soon create a separate component for the meal item,

but for the moment we can leave it like this

and finish this first draft of the available meals component

by adding some styling.

Now for this, again, attached you'll find

the availablemeals.module.css file

with some predefined CSS code,

and in the availablemeals.js file at the very top,

you simply import classes

from availablemeals.module.css.

And then on this section,

we can add a class name of classes.meals.

And now with that, we can go back to the meals component,

which should now group the meals summary

and available meals together.

So here, the meals component will, again,

also be very simple.

It won't need any props either.

Here we just want to import the two other components.

So the meals summary from meals summary, like this,

and import available meals from available meals, like this,

and then return both side by side.

And since I want to return two elements side by side,

you know that this is not possible in JSX.

We must only have one root JSX element,

and therefore again, I will use the fragment.

So we should import fragment from React

as a wrapper component around meals summary,

as a self-closing component and available meals

as a self-closing component.

And now with that, we can go to the app, JS file,

and here below the header, I will add a main HTML element,

which is a default built-in HTML5 element.

And inside of that main element, I will add my meals.

So I will import meals from components/Meals/Meals,

import into Meals JavaScript file in the meals folder

and then simply render this here

as a self-closing component.

And if you save that, you should see something like this.

Now the summary already looks good.

Of course, the list of meals doesn't,

but here we're also just getting started.

Now as a next step, I want to wrap this entire list here,

this unordered list, into a card component.

So into a container with rounded corners

and a white background and so on,

and every list item itself

should also become a separate component,

which also outputs more data and in a nicer way.

Now that's what we're going to do in the next lecture.

Of course, as always, feel free to not proceed right away

but try this on your own first.

Even if it then looks different

than what we're going to build in the next lecture,

this is a great practice you can, and you maybe should,

do before you proceed and we do it together next.