In the last section we finally got some content to appear on the screen of our browser.
Now that we've got some working application put together we're going to start to focus on the GSX that
we had written into our app component in the index file.
I want to first explain to you exactly what GSX is.
So when you look at this stuff as I've said many times it looks like a female but in reality it's not.
It's not each female at all.
I want to give you a quick reminder about something that we spoke about just a little bit ago.
Remember I told you just a little bit ago that when we write.
Yes 2015 code which you and I like to do as developers we do not ship it down directly to a user's browser
because their browser might not have.
Yes 2015 or 16 or 17 fully supported.
So in order to get around that we had said that we made use of that dependency called babbel we made
use of Babel to take that as 2015 2016 or whatever code and convert it down to normal.
Yes.
Five javascript babble is also used to process that GSX that you saw as well.
So when we take this javascript file and ship it down to our users browser and even as it's running
in our browser right now it does not contain this GSX in here that looks like an e-mail tag.
Your browser in no user's browser natively understands what GSX is.
So a GSX actually get sent down to a user's browser it gets converted into normal looking javascript
code and you might be immediately curious how do we take something that looks like this right here in
turning into equivalent normal javascript.
Well in order to figure that out we can actually use a little tool that is made available for us by
babbel themselves the people who make Babel.
I'm going to open up a new browser tab and I'm going to navigate to the babbel home page which is at
Babel chase IO on here.
I'm going to find the.
Try it out button at the very top.
So now on this interface we can write some amount of code here on the left hand side.
This can be as 2015 2016 or even code that contains GSX as well.
Babbel will then automatically convert that code into normal.
Yes 5 javascript and show it on the right hand side.
Really quickly want you to take a look at the left hand panel over here and find the preset section
and just make sure that re-act is checked.
All right so then once we are sure that that is checked I'm going to go back over to my index Staci's
file.
I'm going to copy the entire app component that we just put together and I'm going to paste it back
over here on the left hand side and I'm going to zoom in just a little bit.
No I want that to go away not bigger area.
OK that's better.
All right.
So as you can see that div right there that kind of GSX looking thing actually gets turned into a javascript
function call.
It's a call to react create element.
The first argument is a string that indicates the type of element that we want to create.
Then the third element is the text that we want to show inside of that div.
So every time that you see GSX we're writing GSX just for simplicity's sake.
At the end of the day that GSX gets turned it turned into this big function call right here.
So you might be curious.
Well if this GSX gets turned into a function call why don't we just write out a lot of function calls.
The answer is really simple.
Let's imagine that we have a little bit more complicated component than what you see right here.
So for example maybe we have a div that contains a UL element inside of it and then that well as a couple
of lights.
So I'll put a couple of lines and maybe those allies have texts of their own like Hi there and maybe
Jacksonville's say by there.
And the final one was say now cha.
It's on the left hand side.
When we look at this thing in GSX form it's pretty easy to tell what's going on.
If are at least familiar with how HTL works you can take a glance at this over here and understand that
this app component is going to create a div that has a well and three allies.
And you also very quickly can see what text those allies are going to contain.
However if you look at the converted results over here on the right hand side it's a lot harder to take
a quick glance at that and understand the exact structure and content of what this component is creating.
So the entire purpose of sex is just to be able to allow us to write out these different function calls
that normally occur behind the scenes for us in a much easier to understand format much easier to read.
Much easier to get a sense of what is going on when you make use of react.
It is not required to use GSX but it is highly recommended because if you try to write out all these
different function calls you're going to very quickly write out some code that is very challenging and
difficult to maintain.
OK.
So now do we understand what's going on with GSX.
Let's take another quick pause.
When we come back the next section will start experimenting around with it a little bit inside this
index such as file and get a better idea of the rules around it.
So a quick pause and I'll see you in just a minute.