‫Let's start building a brand new app
‫that will hopefully show you how extremely helpful
‫the useReducer Hook can be.
‫And so this is the application that we are going to build
‫and it's called "The React Quiz."
‫So as the name says, this is basically a very simple quiz
‫about some React concepts.
‫So this starts by actually loading
‫the questions from a fake API.
‫And so at this point, we have received those 50 questions,
‫and so then we can start the quiz right here.
‫So here then, we have the question
‫with the four different options,
‫and up here, we can see our progress
‫and the number of points that we have won so far.
‫So here then, we can of course click on the correct option.
‫In this case, React is the most popular framework.
‫And so then immediately, it is marked as correct.
‫And also, the next button here appears
‫so that we can move to the next one.
‫And now this time, let's choose a wrong option.
‫And so of course, the correct one
‫is still marked here as correct.
‫Now of course, I will not go through the entire quiz here,
‫but we will see what the end result,
‫so when we reach the end of the quiz, looks like.
‫Now, just notice that here, we also have a timer running,
‫and so when this timer finishes,
‫then we automatically lose or we actually finish
‫the quiz by then automatically
‫and we only get the points that we have gathered
‫up until that point.
‫So all the state that we see here on the screen,
‫so which question was selected, the number of points,
‫which question we are right now, the timer,
‫and really, all the state is just managed
‫by one big reducer,
‫because that's what this section is all about, right?
‫Now, in this lecture, all I want to do
‫is to just set up here the app skeleton.
‫So basically, just setting up the structure
‫with the header and the app itself.
‫And so then in the next lecture,
‫we can start fetching the questions
‫and start building the application.
‫So we no longer need this component here.
‫And instead, let's come back to App.
‫And here, we then remove that date counter.
‫Okay.
‫So our parent div here will have the class name of app,
‫and then inside that app, we will have a header.
‫So basically, this part here with the logo
‫and the name of the application.
‫Now, as I said in one of the previous sections,
‫we will now start to actually create one file per component,
‫so making this project development a bit more real world.
‫Now, in case of the header,
‫I actually already created that component for us.
‫So it's just this very simple component
‫that doesn't even have any logic or any state
‫and it doesn't even accept props.
‫So it's just a very simple presentational component
‫that has the image,
‫so the logo and the title.
‫And so let's include that here,
‫just like this.
‫And of course, we then need to import that component
‫from that file.
‫So in the current folder, and then header.
‫And there we go.
‫So there we have our header and then, here below that,
‫we will have basically the main content.
‫And so for that main content,
‫let's create a main component.
‫And before we do that, I will just write the markup here.
‫So let's say that we want a main element
‫with the class actually of main as well.
‫And then for example, let's say we want a paragraph
‫with the progress, let's say 1 or 15.
‫So this is just some dummy content here.
‫And then, the question itself.
‫All right, so let's say that we just have this,
‫but we want it to be not inside the main HTML element here,
‫but instead, we want it to be inside its own component,
‫so that then here, our app component stays nice and clean.
‫So just having like different components,
‫but not these elements with their class names.
‫So let's then create a new file with a new component.
‫So this one will be called Main.js,
‫because Main will be the name of the component.
‫And now let's actually, for the first time,
‫use that snippet that I gave you
‫at the very beginning of the course.
‫So remember that.
‫Let's come here to the user snippets
‫and then it should be one of these.
‫Yeah, so the snippet that I mean is the RFC snippet.
‫And if, for some reason, you didn't add this
‫to your own snippets at the beginning of the course,
‫then you can just maybe copy the code from here
‫or you can go back to that setup lecture
‫at the beginning of the course,
‫because again, we will now use that snippet
‫and it will be extremely handy.
‫So all we have to write is RFC, hit Enter, and bam,
‫it creates a brand new component for us,
‫even with the name of the file.
‫So it got the name here from the file
‫and then it accordingly named the component.
‫And so now all we have to do
‫is to change, right here, our markup.
‫Now here, we want to change from a div to a main element.
‫And so remember how many times it was quite annoying
‫that we had to change this opening tag and the closing tag.
‫And so to fix that, let's install this extension right here.
‫So Auto Rename Tag.
‫So I already have it installed,
‫but just go ahead and do that.
‫And so then when I change this div to Main,
‫then you see that both of them change at the same time.
‫So here, the class name again of Main.
‫And now here, what will we place as the content?
‫Well, basically here, we want this content to stay
‫in this component,
‫so we want to just pass it into the main.
‫And so for that, we use the children prop.
‫Remember?
‫So basically doing component composition here.
‫And we have done this multiple times already at this point,
‫so this should be nothing new.
‫And so with this, all we have to do is to replace
‫this right here with Main.
‫And again, it then automatically replaced the tier.
‫And then all we have to do is import Main from Main.
‫Now, alright, now it looks the same here,
‫but now we have a bit of a better structure
‫and also, I think the component tree
‫is a lot more complete like this.
‫Well, actually this hasn't updated yet.
‫Yeah, so then also in the tree,
‫we can see that we have the app,
‫a header and a main part.