All language subtitles for 003 Adding a _Header_ Component_en

Now of course

we're going to populate these folders

step-by-step fro to this module.

I wanna start with the header for now.

So with this tool bar at the top

and therefor in the layout folder here

I will add a header JS file

and that will hold my header code.

The header will also need some styling

so side-by-sides to header JS

I will add a header dot module CSS file.

Dot module because I will use

the built in CSS modules support

which modern React projects created with create React app

which does set up isn't the end per wide.

So this CSS file will be need

and speaking of that file

you find this header dot module CSS file attached

to this lecture

and you can simply replace yours with it

or simply copy it

on the provided styles

which are some styles I came up with

to give this header the look you saw in

the preview at the beginning of this module.

Of course you can also write your own styles

if you would prefer that.

Now in the header JS file

we wanna have the JSX structure

for our header.

And therefor here

I will export a header Component function

where we get some props

and of course we'll also

well exports this function

to make it available outside of this file

because they will use it in a different file.

And inside of this Component function

I don't need complex logic

or state or anything like that

instead there I will just return

the JSX code for this header.

And here I actually wanna have two blocks of code.

One block of code will be the header itself

so that toolbar

the second part will be

the image below the header.

Though we could also split

that into two separate Components

if we wanted to here I will keep it in one Component

but again that is definitely a split

you could also make

have two Components instead of one.

Now here I will use a React Fragment

so that built in Fragment Component

and therefor I wanna import React from React

so that I can access React Fragment

alternatively we of course just import Fragment

and use that directly as a Component like this.

And I'm using this Fragment Component as a rapper

because we must only have one root element returned here

that's true for any place where you use JSX

you must only have one root element.

And in there

I actually wanna have two sibling elements.

A header using the built in header Component

and then a div which will hold the image.

And again that would be

the two Components you could also separate

into separate Component files and functions.

Here I'll keep it in one Component though.

Now, inside of the header here

which is a default HTML five element

I'll have an h1 element where I'll say React meals

which is just the name of this application I came up with.

Of course you can choose any name you want.

And then side-by-side to that

I wanna have a button which will open the cart later.

So for the moment I'll just add a button

with the name of cart like this

I will change this code in a couple

of seconds or minutes though

before we changed a button though

let's have a look at that div

and then that's div I wanna have an image.

So the built in image element

and here I'm providing an image to you

which you find attached as well.

And it will add an essence folder

in the source directory

so next two Components

where this image will actually be stored in.

So attached you find that meals.jpg file

and I will just copy that into that assets folder.

This is an image which is provided locally

as part of the React application.

Now how can we use that image here in this JSX file?

Well we can use this image in a way

which could look strange when you first see it

but which is very easy to use once you're used to it

you can simply import images

and it's a bit like importing CSS files.

It's not really a JavaScript feature

but instead imports like that

so importing CSS files or importing images

is supported by this project setup

which we're using here

and behind the scenes

the import is simply transformed

to include the image in the finished application

which we could deploy to a server

and to generate a link to that image

which is then dynamically inserted in

the generators code.

So there's a lot of behind

the scenes magic going on here.

For us we simply import meals image

though this name is up to you

from going up, going up

assets, meals JPG.

And here the file extension matters

just as for a CSS files

because this tells that build process

that this is not a JavaScript file

but in this case an image file

and that therefor it should be transformed

and injected appropriately behind the scenes.

And then we can use this import image

as a source here

by binding the source dynamically

with curly braces

and pointing at meals image.

This is how you can include a local image.

Of course if this would be an image on some server

and you'll had a URL to that image

you could just add that URL to some image

to some image dot JPG.

You could add that if you had such a URL

but here since it's a local image

part of the project

we instead use that other approach.

Now we can always add an alt text

a table full of delicious food

something like this.

And with that I got the general structure

for this header Component finished.

Though there are things missing

for example the styling.

Here on the header Component on the header element

I wanna add a class name

and since we added this CSS file

which uses CSS modules

we import classes

from that module dot CSS file.

So from header module dot CSS

and here as a class and for the header

we should point at classes dot header

because in that CSS file

if you have a look at it

there is a header CSS class to find

and as you'll learn in the styling section

this is how you use CSS modules then.

Now on that's div

which holds the image

I'll also add a class name

and here it's classes main image written like this.

Since it's a CSS class with a dash inside of it

we can't use to dot notation

and that's simply another CSS class

to find in there.

Now with that the general header structure is finished.

With that we can now go

to app JS to our root Component

and there we can import header from slash Components

layout header like this

and then instead of this h2 tag here

I will use my header.

And actually I also don't want

that div here anymore

instead here for the moment

I will just use a Fragment

which I of course need to import from React.

The React import itself is missing here because

as you learned

you can omit that in modern React projects

like this one

you can always add it as well though.

You can always also import React

from React and it won't hurt either.

Technically it's required

because of what JSX is transformed

to behind the scenes

But in some projects setups like this one

you can simply omit it.

And with that if you saved it

you should have that header here.

And this is a good start

this is now our toolbar

of course the code button in the header

doesn't look at all like

the button you saw in the preview though.

And therefore that's what we're going to work on next.