Not bad, not bad.
We covered Geria sex roles, so now let's talk about whether we can and components and the short answer
is yes.
Also, let's take a look at the reactors, because remember, when we installed them, I said probably
won't make much sense, but now it will.
Since now we have already a general understanding how the components work.
And first, let's start by creating the nested component structure.
Like I said before, if you want, you can place your hole up in one component.
However, it's somewhat defeats the purpose of why you would want to use a reactor in the first place,
because the idea is that you can split up your application in nice, separate chunks of functionality.
Now, in our case, of course, we're just setting up simple demo, so it's not going to look as useful.
But in general, it's going to give us a good idea how and why we want to do that.
For example, I have to do and I'm going to have a thing to do with a text of John Doe, John Doe,
and then I'm going to have a paragraph with the text of this is my message and I'll think about it.
So I have the green component.
I have the heading two and a half the paragraph, why don't I set up two separate components, one that
just deals with heading to and the other one that just deals with a program.
And just to spice things up, I'm going to use aero functions.
And in one case, I'm going to use an implicit return.
And the other case, it's going to be explicit return just so you can see that it is going to work regardless.
So in this case, I'm going to go now.
We do need to come up with a name.
So I'm going to go with a person and this is going to be my implicit return.
So for those of you who are familiar with our functions, of course, I can add here collaborationist.
So, of course, then I would need to set up explicit return, which will do in next component.
Or I can simply say that whatever I'll type.
Well, that is what I'm going to be returning to in this case.
What I would like to return.
Well, I would want to return John Doe.
Right.
So either you can write it from scratch or in this case, I'll just copy and paste.
And now, of course, once I render well, I only have this is my message because now this value is
in the person.
So how can I render whatever I'm returning from this component?
Well, simple in the greeting.
And set up my moment, moment, I'm going to go with my component.
What is the name of the component that is person again?
Remember, we do need to close it.
And the moment we save it, I have John again.
So, of course, now we can put two and two together that I can do the same thing with the program.
Again, the only difference is going to be that I would want to set up explosives return just so we
can see the difference.
So let's call this message.
And again, we have our function.
And in here I'll just write return.
And then what I would like to return, of course, of the paragraph.
So grab the paragraph.
And this is what we are returning from our message function.
Now, of course, let's just set up a message right after the person.
So once I say I have both of them, but notice how we're nicely splitting up our application into separate
chunks and that is really, really cool because we can use them later Lego blocks to build our application.
And as a side note, this is a somewhat traditional word of how to set up a react application where,
of course, we'll use the exports and imports and everything of that nature.
However, we will set up this one component.
In most cases, the general convention is calling this app.
Then in that app, we are going to be either one, two, three, four or fifty five thousand components
that will meet.
Please keep in mind that you can have more components in those specific components.
So, for example, in the person, I could render even more components.
However, there's going to be this app where your components will meet and then you will import into
that particular component again, shake and bake app or whatever you have decided to name it, and then
you will render it.
So this is going to be a pretty typical setup.
So that's how we can nest components inside other react components.
And it's also take a look at the react developer tools.
So I'm going to make my right screen bigger and then I'll open up my developer tools and we're looking
for the components.
So of course we installed already react developer tools that is out of the way.
And then we're looking for the components.
And now you'll notice something interesting where this is going to be our world component.
So at the moment, we call this greeting and then, of course, inside the greeting, I have a person
and a message.
Again, we haven't covered problems, so none of that makes sense.
Or we can clearly see that this is going to be our component structure.
And as our apps and examples are going to get more complicated, of course, we will still be able to
see what in the world we're actually rendering.