All right.
We come back.
In this video, let's see how to create G.
S X.
So it simply means that how we can write JavaScript in combination with a HTML in react component.
So let's get rockin.
Well, this is where we left.
So let me collapse everything and then start from scratch.
Well, let's bring it.
Let's remove the bottom component, because we are going to use a mean class based component.
So let me trash this one.
And now application will crash, don't worry, because that bottom component doesn't exist in the end.
The HTML5 sorry, in this dot.
Yes.
As far here.
So let's replace that one with our app and now let's remove the button because it doesn't exist anymore.
So now React is happy.
Well, how can you create J as X?
And we have done it before.
So let's get to the component that is the app.
So here, let's remove this one.
Let's close now.
There you go.
You could see that we have already created what is called Gsx and that is this.
So that is Gsx for you, right?
So in React Gsx is used to define how a component should render.
We can create element by using the gsx syntax well and the technical term here to understand is called
react element.
Guys, remember back to HTML and CSS.
We call something a HTML element in react.
You call it as what?
React element.
So in a normal html, what is a HTML element?
A html element simply means the combination of attack and a content makes up what I mean a html element.
So in a normal html we call this one.
We will call this one as.
Atmo element but in react we called us what react element.
So it simply means that J.
S X produces react.
Element.
That is it.
Well, so the cool thing about Gsx is that we can write JavaScript inside this and then then don't worry,
we get back into that.
So here we can create a variable second and called us element here and then is equal to the sum around
to create let's say.
I mean h two elements here.
H two now I'll call this one.
This is my first gsx syntax.
Like that.
Great.
So now I can replace this one with my element because it wants to retaining the element to be displayed.
Check it out.
This is my first g x syntax.
Great.
I are happy with that.
Oh, boy, that is how it is.
Well, there is more into this.
So now that we know how to create JSON syntax like this one, the next video.
Let's go ahead and talk about how we can Nest Genesis or Nest Element and react gsx.
Let's say that you want to add more content in the mix.
For example, I want to add let's see p tag here and then I would add some more tax here if I do that
one.
Let's see if I add P element here and see that hey, let's say hey this up, not this one.
Hey, this is mine.
It's working now.
It doesn't render, right?
So the next video, I'm going to talk about how we can nest.
Element in react g.
S.
X.