In the last section we saw a little error message when we took some e-mail and tried to use it inside
of our Riadh component.
So in this video we're going to start to learn some of the very specific differences between GSX and
HMO.
Right.
I got a quick little list right here in general all of the existing knowledge you have around each female
is going to apply directly over to GSX just a handful of tiny differences.
The first difference I want you to be aware of is how we add custom styling to an individual element
as we currently are or at least attempting to on the button element right here.
So we're trying to apply some custom inline styling So that's the first thing that is different between
GSX and HMO.
Let's take a look at another diagram that's going to help you understand how we can take the HTL version
and convert it over to GSX.
OK.
So in this example we've got a div with an inline style of background color red in order to apply that
to J A GSX elements.
We're going to change the syntax just a little bit.
We're still going to say style equals.
But then after that we're going to place two curly braces in a row the outer curly brace so that one
right there indicates that we want to reference a javascript variable inside of our GSX.
Then the second curly brace right there is meant to indicate a javascript object.
So when we do styling with GSX rather than providing a simple string like so we're going to instead
provide a javascript object where all the keys of the object reference a different property that we
want to style and the values indicate the value for that particular styling.
The only other thing that you need to be aware of is that if we ever are trying to apply a style property
name like say background Dasch color we're going to remove that dash and then capitalize the next letter
over.
So anytime that you've got any styling any styling whatsoever that has some word dash another you'll
remove that dash and then capitalize the next character like so.
Now if this was simply say a style meant to customize the background and we wanted say a background
art said let's not do background let's do a border that's a better example.
So if we did say like a border of one picks solid red like so that would translate down to simply Forder
and then inside of a string one picks solid red.
So in general the conversion here is pretty straightforward.
Just remove the double quotes.
Replace some with curly braces and then if you ever have the kind of compound property name remove the
dash into a capitalization.
So with those rules in mind I would love if you took a shot at updating the style on our button tag
right here.
I'm going to take a quick pause right here.
I want you to take a look at the style property and try to convert it over to equivalent GSX.
Now don't spend too much time on this because I haven't even really shown you a good example yet.
Besides this little diagram over here just give it a quick shot after you make a change.
You can save this file and then flip back over to your re-act application and you want to see this error
message go away.
If you see a new error message that's totally fine.
Well fix it up either way in the next video.
So give it a shot and I'll see you in just a minute.