All language subtitles for 5. Creating And Reusing a Component

Let's continue building our application by creating a brand new component and by taking a first look

at reusability.

But first, let's get the starter files for this project from the files that we downloaded from GitHub.

So right here in the starter folder, take these three copy and then go into your project folder and

I will copy them for now here into the public folder.

So we have this folder of pizza images.

We have this starter data and this index dot CSS, which we should probably move into this source folder.

So make sure that you have these two files here after including the starter files.

And now let's come back here and let's create that brand new component that I was talking about.

So in React, we write new components using functions.

So function.

And I'm calling this one pizza because it will contain some data about a pizza.

And then here, for now, we have no parameters to this function.

And then the function body.

Now in React, there are two important rules when we write components as functions.

First, the function name needs to start with an uppercase letter like this.

And second, the function needs to return some markup.

So usually in the form of JSX, but we can even return nothing.

Like returning null.

But here, let's just return some H2 element, for example.

And then let's just write pizza.

So give it a save.

But of course, nothing will appear here in the user interface.

And that's because we're not including this new component anywhere.

And even Eslint is warning us about that here.

So this yellow line which says pizza is defined but never used.

So again, we're not including this pizza component into our app component, which is the component

that is currently being rendered on the screen.

So we can use our component here just like this.

So pizza.

And then we immediately close the element like this.

This, however, will give us an error.

So right here, which we already saw before.

And the reason for this error is that each component can only return exactly one element, not two elements,

as we have here.

So let's wrap this here into a div and sometimes it can become a bit annoying.

That vs code automatically closes these elements for us.

But anyway, now we get our pizza in the UI.

And so that's because we now nested this pizza component inside this app component.

And with nesting, I mean that we basically used or called this component here inside app.

What's very, very important to notice is that by nesting we do not mean that we write the function

inside this other function.

So what we should never do is to nest the component declaration itself.

So like this.

This still works, actually.

But it's a very, very bad idea for reasons that we will learn about later.

So never nest the function declarations, but always declare all your components in the top level.

So just like this.

So again, when we say nesting components, what we mean is that we call so we include one component

into another like this now.

Okay, so let's now make this pizza component here just a little bit more interesting.

And for that we are going to use our starter data here.

So let's open up data.js and all we need is for is to select everything, then copy it and then let's

just paste it here.

Okay.

So as you see right now, we are doing all the development of this application in one big file.

While in the real world, we divide our code into modules and then include these modules into one another.

But here I just want to keep it simple so we're not going to do that yet.

So actually we can then delete this data.

JS.

And close this down.

So for now, we will simply use this here as an example.

So I will now copy paste.

Let's say this pizza here.

And use that here.

Yes, the name.

And then let's also grab the ingredients.

Let's just copy and paste all of this text and notice that I'm really only interested in the text.

We don't need, of course, these quotes because again, this is just like writing HTML.

And there you also don't need quotes, right?

So here, let's create a paragraph and then immediately you see we get this red underline here, which

is because again, we are trying to return two elements here, which is not allowed.

Okay, so here, what I'd like to do.

Is to then move up this line here using a shortcut.

So let's see what that is for you.

So it's this move line up.

So you should probably get used to this shortcut and this one.

So where we move lines up and down.

So like this, for example.

So that's very, very helpful.

And we're going to do that all the time.

We just need to get rid of this semicolon that we have here, which was right there.

Okay, so we have some text.

Now, let's also actually use this image that we have in the public folder.

So.

Yeah, this one right here.

So remember how I mentioned in the beginning that all the assets of the app will go into this public

folder because Webpack so the module bundler will then basically automatically get them from there.

And so we can now write an image here.

So again, just like HTML.

And then if we write a path to the image like this.

Spinazzi dot jpeg.

Then Webpack will automatically get that here from this folder.

And let's see if that works.

And indeed, there goes our image.

Now we get these yellow underline here.

And that's because an eslint rule which says that images always should have an alt prop.

So let's just add that here.

So to make it a little bit more accessible.

That's just.

Put the name of the pizza here and then Eslint is happy.

So we have this component here.

And now let's talk about the idea of reusing this component.

And for now, all we're going to do to reuse this component is to basically use it several times.

So let's do three times just so you can see that.

Now this piece of UI, which is the pizza component, will be included three times.

So three times this delicious spinach pizza.

Nice.

Now, of course, the data here in all of them is now the same because we didn't customize that data

yet.

But we will do that later.

Of course, when we talk about props, for now, I just want you to get this really important concept

that we can call each piece of the UI or in other words, each component multiple times here in order

to reuse it.

And that's a fundamental concept of writing React applications.

Now, just one final thing here, and this has nothing to do with code is that maybe you have noticed

that we get all these colored lines here in the sidebar.

And even down here.

Now, the reason for this is that when we create a new project with Create React App, it will actually

automatically set up this project as a GitHub repo.

That's why you also get all these different colors here.

And also here you see all the changes that we have made to the different files.

So here we deleted some stuff.

We modified some stuff in here.

These images are still untracked.

Now, since we're not really going to use GitHub as we build these small projects, I actually just

want to remove these colored lines here from the gutter.

So from this place and for that we can go to our settings and then just search for diff.

Decorations.

So here the default is all.

So let's set it to none.

And so then our editor will look just a little bit cleaner here and we can close down the sidebar.

And with this we finish this lecture and are ready to move on.