Original subtitles

So therefore, let's now also dive

into that last task here

and let's create and use some reusable custom components.

Now for that, in that app here,

I will start with the header.

The header will actually not be reused

but still, putting it into its own component

is definitely something we can do here.

For that, in that src folder,

I'll create a new sub folder named components,

which is not a must do as you learned

but a common convention.

And in there, I'll add another subfolder called header

because in that header file,

I'll then add a Header.js file,

which should contain the component code.

Now, as you learned, and as you can also see in App.js,

a component in React is just a function,

a standard JavaScript function,

which does return JSX code though

and which typically is also named like this,

starting with an uppercase character.

Therefore, in Header.js, we can create a new function

and we can name it header, which is a name that makes sense

for a component that contains the header code.

Then I also want to export this as a default

so that we can use this component outside of this file.

And then we can go to App.js and cut this header code here,

move it to Header.js and return it there, like this.

And if I press the auto formatting shortcut here

on my system in Visual Studio Code,

this automatically gets formatted like this.

Now, of course, I'm using an image here

and therefore, since I cut this header code

from the app component file and moved it to Header.js,

I also need to move this import.

So we can also cut this there

and move that to Header.js like this.

So now we got that import moved over,

we got the App.js file cleaned up therefore,

but of course, now the header,

the header component that we're defining in Header.js

should be used in App.js.

And to use it there,

we wanna add a new import where we import header,

though this name here is up to you

since it's a default we're importing.

But you should start with an uppercase character

because as you learned,

those uppercase characters are needed

on your own components to differentiate them

from built-in components.

And we import the header component from ./components.

So diving into that component's folder,

then there into the header folder, and then there header.

And here in this React project, as you learned,

you can and should omit the file extension

for those JavaScript files.

With that, the component is being imported

and we can now use it here as a self-closing component

like this in the JSX code returned by the app component.

It doesn't take any props

because it really doesn't need any props.

We could make it configurable

but since we're not reusing it,

we're not using it anywhere else.

There really is no reason to do that.

And therefore, I'm not accepting any props.

I'm not passing any props.

And if I save this, it should work

but I am getting an error.

I am getting an error

that the image can't be found in the end.

And this makes sense

because since I moved this image import,

I also need to check whether the path still is correct.

And that's not the case here

because the header component file is actually nested

in the components and then there in the header folder.

So therefore, this import path should be adjusted

and I should first go up one level

so that I'm in the components folder,

and then another level with ../

so that I'm in the source folder.

And then we can dive into the assets folder

and then there, the images folder

and then select this image.

So with this, the error now went away.

And if I reload this,

the header is still there as it was before

but now it was outsourced into a separate component.

Next, let's work on these concept components here.