‫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.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't 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 caught this component here inside app.
‫What's very, very important to notice
‫is that by nesting, we do not mean
‫that we write a 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 as the name
‫and then let's also grab the ingredients.
‫So 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 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 gonna 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,
‫spinaci.jpg,
‫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,
‫let'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,
‫and 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.