Beautiful job once we're back from the useful extensions detour now, I would want to make a plunge
into our component.
So essentially we know that we will cover imports a little bit later.
We know that as far as the render, it is only in one place essentially where we inject our jobs.
So now, of course, let's talk about this sucker.
And essentially the official name is going to be less functional component.
Now, there are also called Dume Components, because at the moment it doesn't have something called
state, something that will cover later.
And as far as the rules now, the biggest one would be that we always, always need to return something.
For example, if I select and if I'll do it, you'll see that there is a big factor where it says nothing
was returned from the ORENDER.
So you always, always must return something, even if that something is an empty HDMI element.
Of course, you can say and of course you can see that at least now we don't have the error.
Now, I also want to talk about this, Jay aspects, because technically you don't have to type here.
This is normal.
This ASML is to help you.
OK, I know it sounds weird because for a lot of people probably saying that we are returning, just
HMO might seem a little bit foreign, but just keep in mind that essentially under the hood, we're
still calling functions.
Now, don't believe me.
Why don't we do this?
Why don't we set up here?
Hello, world.
And then I'll create another component with the same name and everything, and I'll set it up using
the function calls, just so you can see that under the hood when we type of this heading for, we're
still making those function calls.
Not since we cannot have two components.
We get the same exact name.
And I'm too lazy to come up with a new component.
And then over here, I'll just come on the set and let's set up our component one more time.
So here we go with function and you're not.
Why don't we do in this case as a function, just so you can see that it's going to work the same way.
So we're going to go here with a greeting.
So that is going to be minara function.
And then instead of returning to normal, which is to help us to have a little bit easier syntax, what
we could do is go with return and then we're going to go with react, then create an element that is
the function.
And then this function is looking for three things.
What element we would want to return.
That's number one then Proops object, which we haven't covered.
So don't worry, we'll just pass in the empty object and then what is going to be the children?
So what is going to be rendered inside that element?
Now, as far as the element, I think I'm going to go with one.
And then, like I said, perhaps object, having covered props yet, so it let's just past empty object
and the last thing is going to be the children.
So here I'm going to go with Laurel.
And then once you save Norrish, everything works.
Correct?
So like I said, we can use the arrow function that still works.
We are returning having one and then we're using our world.
Now, one thing that when you're passing in the element here, you need to pass it in the quotation
marks.
So when we're working with components and of course, we don't have to do that, but then if we're passing
it into the function, we must set it up as quotation marks, because then Riak knows that, well,
this is going to be a moment and none of this is going to be the content in our element.
Beautiful.
Now, the thing is, it's not as easy as it seems because at the moment you might be well, this is
extremely forn.
I rather use this function setup.
OK, well, let me comment on this one out for now.
And let me show you what happens if we have some more elements, because normally probably you'll have
more than just one hanging for and what's really cool about.
I mean, we can definitely do it so I can go with them online within this day.
I'm going to create a one with a whole world.
So, of course, I can see that it works.
Now, at the moment, of course, there's a dev, so technically it is hard to see.
But I can tell you right away that it does exist.
But the gotcher here is how would I do that here with creator?
And so, yes, this video might be a little bit annoying where again, I'll come on help and then we'll
take a look at how we can do that using the function.
Well, everything work really smoothly.
When we just had one, correct.
Everything worked out of the box.
But now we need to understand that where we pass in the children, we will need to invoke create element
one more time.
How is that going to look like?
Well, we would go with react because that is our import.
Then we go with create element.
Then again, what element we would want to set up.
So in my case that is going to be adding one then props object again, empty object for now and then
eventually what is going to be a text?
Well, I'm going to go with the world so you can probably already see and I'm sorry this was heading
one and it should have been a dev.
My apologies.
And I can see that it can get messy really, really fast because again, we're just talking about right
now a div that has the heading one.
That's it.
But keep in mind that of course, your normal structure for the component here is going to be way more
messier.
That's why I'll leave this for you reference.
So you know what is happening under the hood.
Just keep in mind that the reason why you have this HDMI syntax is so it is easier for you to set up
your turn in your component because I don't know about you.
But even though it might look a little bit foreign where we're turning straight up, not from the function,
at the end of the day, what we're setting up looks way more readable than starting with these endless,
endless function calls.