In this video, we will generate our first components that we need for our application.
So the first question is what is react component at all?
And as you already saw inside, we have our first component actually in React component is the main
block from which we are building our application, which actually means, for example, if we are talking
about quiz, quiz is our component.
And the single answer can also be a component and maybe a question also.
And the result page, which actually means we can create as many components as we want to and actually
all components inside React is just a tree.
In our case, Create React app generated for us an app which is our first component.
As you can see, component is just a function and inside it we can return some markup.
And of course later we will add some logic to our markup also.
But what we want to do here, I want to bring some structure because it doesn't make any sense to simply
create new component that's inside source.
On the root level, what we want to do, we want to create new folder components where we will store
all components for our application.
And actually I think that we need at least three components.
First of all, we need a component for quiz, which means this is our main root element.
Then we have a component for question.
Inside, we will render a question and all answers and also we can make an additional component for
every single answer.
And we can start simple with just creating these three components and then create more components if
we need to.
This is why here Inside components, I will directly create three new files.
First of all, here we need quiz dot JS and as you can see here, we have a special notation that we
are starting all our components from the big letter exactly like it was here with App.js.
This is why here I created a quiz JS and now inside we want just to return some basic markup.
What I want to do here is create quiz from Big Letter and I'm writing here just an arrow function.
And as you saw inside App, they didn't use an arrow function.
It was just a function.
Both will work just fine, but obviously write an arrow function is a modern way of writing JavaScript.
This is why here is our quiz and we want to export it.
This is why here we're using export default quiz.
Now inside we can return some markup so at least we can write return and here will be our div with word
quiz.
And actually our first component is completely ready.
Now we can copy paste this code and create one more component and we want to create here component Question
So here I'm creating question dot JS and inside I'm pasting everything and we just need to change here
the name because this is the question.
And here we want to change the content.
So question and we're expert in.
Question So as you can see at the beginning, all our components are looking the same.
And now here is one more component for a single answer.
So here we are creating answer Dot JS and here we also need to change some text.
So here we have our answer and we want to render an answer here and export our component answer.
Now we need to render our components and actually if we will check here inside Index.js, you can see
quite a lot of code.
So what we are doing here, we are importing react and react.
Dom And then we are calling Reactdom.render, which actually renders our application.
So this part is actually our markup and this is the element inside which our React application will
be rendered.
And as you can see here, we have just a single component app and additionally we have here React strict
mode, which will show us some errors if we will do things wrong.
But the main point is that app here is our first component and we render all our application inside
app.
We actually don't want this because we want to use our quiz component as our main component.
What I want to do here, I want to change app to quiz and here on the top instead of import app, right
import quiz from and here will be our path.
And in our case we have here now slash components slash quiz.
Let's check this out.
I'm reloading the page and we are getting here word quiz which actually means that our first component
quiz that we just created was successfully rendered.
And now we can completely remove our app component because we don't use it anymore.
So as I said, quiz is our main root component, but actually we want to render some questions when
we are starting quiz And to render a question we need to use our question component, which means here
inside our markup, we want to render, first of all, a component question for this.
We need first of all to import it inside this file using import, then the name of the component.
In our case it is question from and here is our relative.
Path to question.
And now inside our markup, we can render this component.
This is why here I will put round brackets so we can make it pretty.
After this, let's add one more div on the top and after first div of quiz we can render our component
question.
And actually we are doing it exactly like it was inside Index.js.
As you can see here, this is how we are rendering the component.
So here we can simply write question and we are closing our tag.
So as you can see, this is our rendered component.
So we are rendering it just like normal HTML tag.
Let's check this out.
I'm reloading the page, as you can see here, this quiz and question, which means we already rendered
two components, which actually means the next step will be to render several answers inside each question,
which means we must jump inside our question component.
And here on the top, we want to import our answer.
And our answer is coming from our component answer that we just created.
Now inside, let's make exactly the same thing.
So what we want to do here is to add round brackets and inside we have some markup.
So first of all, we know this is component question and now here we can render several answers.
This is why here we can actually copy paste this several times because we will have several answers.
And I also want to wrap everything inside additional div.
Let's close this div now and check if it's working.
I'm reloading the page.
As you can see, this is our quiz component question component.
And now we rendered for answers inside our question, which means we successfully created our basic
components for our application.