In this video, we need to add some markup to our created components.
As you can see, we have three components quiz, question and answer.
So first of all, let's jump inside quiz.
This is our main component.
So here we need to write div class name and here is quiz.
And if you want to ask why we are writing here, not class but class name, this is the notation inside
react.
This is exactly the same how we are writing inside HTML.
Just class.
This is why if I reload the page and check here what we have inside elements.
As you can see here, inside body we have root and inside div class quiz.
This is exactly this code that we wrote here.
Now we don't need this div anymore.
And let's wrap our question with additional div and we are doing this because before our question we
need to render some markup with the total amount of questions and our current question.
So here let's create new Div with class name and we have here our score.
So let's close here our div and inside we must write what question is it and the total amount of questions.
This is why here I am writing question space and for example we have question one then slash and here
we have eight questions.
Obviously we don't have any state now, so we just make a mock data.
Let's check this out.
I'm reloading the page and as you can see here is rendered question 1/8.
But our CSS is not there.
As you can see.
We have here a class quiz, for example, but CSS is not applied as well to this said I prepared inside
our source folder file index CSS with all our global CSS that we are using now.
This is why we need to jump inside index.js and import it here.
For this we can add here one more input and write here that we want to import index dot CSS and this
is just a global CSS file which will be available for our application.
And as you can see now, our application is looking different.
We have here our grayish background and here is our question 1/8, which actually means our CSS is successfully
applied.
You can see here on the right, we have no access for our quiz.
So here we rendered our score.
After this, we have our question.
This is our additional component.
And after we want to render our next button, this is why here we must provide div with class name next
dash button.
And here let's close this div and simply write inside our next question.
Let's save this and check this out.
As you can see now here in our markup, we have next question.
And actually, this is the whole markup that we need inside our quiz.
The next step here is to write markup for our question.
This is why.
Let's jump inside our next component and this is our question.
So here we have a div.
This is completely fine.
After this, we want to render our question.
This is why here we need div class name and here we will have our question and inside will be the text
of our question.
We don't have it.
This is why.
Let's write here text of our question.
Now inside we need a container for our answers.
So here I want to add div with class name and here we have the list of our answers and all our for answer
component that we rendered here previously.
We need to put inside this additional container.
Let's check this out.
As you can see now, we successfully rendered our text of the question and we have here our four answers.
Obviously, they are not styled because these are styles of our answer component that we didn't style
yet.
So now let's jump inside our answer component.
So here we have just a single div and here we must provide additional class name.
So here we have our class name answer and inside we need some text, for example, text of our answer.
But it's not all because in the design we also render a letter from A to D, This is why inside we not
only need text, but also this letter.
This is why here I want to use round brackets because we want to write markup on several lines.
And here inside we have this div class name answer.
Now inside we need two more elements.
So first of all we need here additional div with class name and here we have answer letter and here
inside let's just write a single answer.
For example a and here we need a text of our answer.
This is why here div class name and here will be answer text.
Now let's close this div.
Now let's check if it's working.
As you can see in browser, everything is rendered correctly.
So we have our four answers with correct markup.
Of course here all data are marked, but it is already enough for us to see some rendered HTML and now
we can really start to work with React.
The most important point here that there is no difference in writing plain.
HTML between justice, HTML and react.
As you can see, everything is exactly the same except of this class name that we wrote everywhere instead
of class.