In the last section we started learning a little bit more about GSX.
We learned that it's technically javascript it's not HMO that we're writing and we also learned that
browsers don't know how to understand GSX code so we use tools like battle to take our GSX and then
turn it into normal javascript.
The final thing I want to throw in there is that the GSX that you and I are going to write is going
to be almost identical in form and function to normal HMO with just a couple of very small differences.
So in this section I want to go through a little exercise that's going to give us a better idea of how
each T.M. and GSX are slightly different We're going to put together a tiny little snippet of HCM l
over using code so is going to write out normal HCM and then we're going to pull it into our re-act
project and convert it into GSX.
So this will give us a really good idea of some of the differences between the two.
I'm going to first begin by opening up code by opening a new browser tab and going to code pens.
Then once here I'm going to find the create button at the top right hand side and click on new pen.
All right.
Here we go as a quick reminder if you want to get these editor tabs on the left hand side you can click
on change view or settings or notice just change view sorry and then select one of the different layouts.
All right so we're only going to be doing e-mail here so I'm going to minimize the other tabs and we'll
put together just a couple of different elements.
I'm going to put a div in here.
And then I'll put in a label and put in a very simple button.
And then on each of those three elements we're going to add a couple of different attributes.
So first begin with a label.
I'll give it the title of.
How about enter name and then after that I'll put in an input and then finally a button.
At the bottom and I'll say something like submit.
OK.
So just very simple straightforward HTL.
Now I want to go through here and add on a couple of attributes.
So on the label I'm going to say that this is a label for some input with an idea of name and then I'll
immediately add an ID of name to the input.
Now just in case you're not familiar with this idea of for an ID.
All it does is allow us to click on the label and it will automatically select that text input then
on the input I'm also going to specifically annotate it as being a type text input.
And how about on the label.
Let's give it a nice class will say class label.
We're not going to actually do any styling.
But let's imagine that maybe we had some special styling class set up on the CSSA tab over here to target
a element with the class of label and style it in some fashion.
And then finally I think that submit button looks kind of ugly.
So going to put a little bit of custom styling on there.
So I'll say style is going to be background color.
Of blue and I'll get myself just a little bit more space here.
Now that turned the button blue but it's definitely kind of ugly so I think that I'll give it a color
of white as well.
Now I'll just turn the text on the button white.
All right.
So that's it.
Pretty simple.
HTL snippet and I hope that everything we put in here is pretty easy to understand.
So let's now copy this HD mail.
We understand what it looks like over here.
So we're going to copy this.
We're going to go back over to our code editor and we'll paste it into our app component and the will
of refresh our browser and see how this each female displays inside of our re-act application.
OK.
So back over here I'm going to find the div that we currently have and I'm going to delete it.
I still have the return keyword.
However don't forget that return keyword and I'm going to paste in the H.T. mail that we just wrote
out.
Now as a quick note I just want to mention some different ways in which we can format a simple hurt
me format GSX.
One thing that I see very frequently is very frequently see people who put the return keyword and then
they put the first opening tag of the GSX block on the next line down.
If you do it's right here it's going to result in an air as soon as JavaScript sees that return message
it says.
OK I'm just going to return and there's nothing after the return keyword.
So the function decides to return a value of undefined.
So any time that you return some amount of GSX you have to make sure that the opening tag is on the
same line as the return statement.
A better way to handle this in a way that's a little bit more following in convention in the community
would be any time that you have a multi line segment of GSX like this.
You will instead but the acts on the next line down you evil.
Indent it and then you will wrap it inside of parentheses.
Read the opening parentheses is on the same line as the return statement in the closing parentheses
is after the end of the GSX like so.
So this right here is a very common convention and we're going to be using this convention very frequently
inside this course.
Anytime we have a multi-line GSX block as we do right here OK so everything you see on the screen is
valid so I'm going to save this.
You'll notice that my code formatter automatically clicked kicked in there again just to put a new line
around the label.
That's totally fine till equivalent.
So now I'm going to flip over to my browser and see how this appears in the browser at localhost 3000.
All right so I could flip back over and you'll see that we immediately get a nasty error message here.
You can read the error message if you want to but I'll tell you what it means.
Let's take a quick pause right here.
When we come back the next section will investigate this a little bit more and figure out exactly why
our e-mail did not translate directly over to GSX.
It's a quick Paulism I'll see you in just a minute.