In the last section then we started writing our first component. 2
We have so far is a plain javascript function that returns some GSX GSX being the stuff that looks like 3
HVM now the function is assigned onto the constant app and we use constant instead of var because we 4
don't expect this variable to ever change. 5
We're not going to reassign app at any given time. 6
So let's talk a little bit more about what GSX is doing for us. 7
And then move on to the next step. 8
I want to mention to you that GSX just like the 6 code that we're writing with Konst cannot be interpreted 9
by the browser. 10
So remember the purpose of our boilerplate package here with web pack and babbel is to translate this 11
GSX into actual vanilla javascript's that can be understood by our browser. 12
So you might be curious Well what is the purpose of GSX Why do we write this at all. 13
You know why does it exist inside of this function. 14
These GSX like this because this is what produces the actual each team M-L that gets inserted into the 15
DOM. 16
When we render this component and when I say render I mean place this components each T.M. onto the 17
page. 18
So this GSX right here gets turned into HCM mail which in turn gets placed onto our page into our dorm 19
into our document its what the user ends up seeing. 20
So the purpose of GSX is to have some javascript code that can produce ultimately HTL. 21
Now you might be wondering why does it look like it seems on at all you know why don't we have some 22
type of just normal javascript calls. 23
Well you know we don't have to write GSX if we don't want to. 24
But I really guarantee you're probably going to want to let's look at what this GSX looks like in vanilla 25
javascript. 26
Remember GSX gets transpired to vanilla javascript just normal looking javascript so I'm going to copy 27
all this code right here and I'm going to flip over to a code here or is using a tool here which is 28
a yes six REPL. 29
So I'm going to on the left hand side going to paste in the code and on the right hand side is going 30
to turn into vanilla javascript so just. 31
Yes five javascript that can be ran safely inside of our browser so I can go ahead and paste this and 32
you'll see OK you know we get to kind of and you know we're looking variable's up here whatever. 33
But we also get our GSX turned into a call to a function called re-act dot create element. 34
The first argument is a div and the third argument is high. 35
You know the content that's inside of the div over here. 36
So this is why we use GSX in the first place. 37
It gets compiled into vanilla javascript but it's really ugly. 38
You know we don't want to be typing this out by hand whenever we write a component we want to just write 39
something looks very clean very concise and you can look at this code over here on the left hand side 40
and say OK this function right here will return some GSX that ultimately is going to look like a div 41
with content high. 42
If you look it over here on the right hand side this is really hard to figure out what's going on right 43
. 44
GSX can also be nested inside of itself just like normal HCM now. 45
So if I want to I can add say a oh well 46
with a couple of lines 47
. 48
Now look what we get on the right hand side we've got re-act create element and it's going to make an 49
. 50
Oh well. 51
And then as a argument provided to it it gets a nother or this is the season of the third argument and 52
the fourth and the fifth right here with additional calls to create element with Type II and content 53
1 2 and 3. 54
So as our components start to get more complex with a lot more GSX inside them you know as we start 55
to write more complicated components that have more GSX inside of it that in turn produces more each 56
D.M. the javascript that gets produced gets more complicated as well. 57
So you can imagine if we start to get really complex components they get just about illegible on the 58
javascript side. 59
So that's the purpose of GSX is to make our components a lot more clean a lot more legible to see what's 60
going on. 61
OK so enough on GSX Let's get back to our code in the next section and continue on.