1
00:00:00,760 --> 00:00:05,220
In the last section we saw a little error message when we took some e-mail and tried to use it inside

2
00:00:05,250 --> 00:00:06,670
of our Riadh component.

3
00:00:06,690 --> 00:00:11,220
So in this video we're going to start to learn some of the very specific differences between GSX and

4
00:00:11,250 --> 00:00:12,780
HMO.

5
00:00:12,940 --> 00:00:13,500
Right.

6
00:00:13,520 --> 00:00:18,920
I got a quick little list right here in general all of the existing knowledge you have around each female

7
00:00:18,980 --> 00:00:24,530
is going to apply directly over to GSX just a handful of tiny differences.

8
00:00:24,530 --> 00:00:29,720
The first difference I want you to be aware of is how we add custom styling to an individual element

9
00:00:29,930 --> 00:00:34,610
as we currently are or at least attempting to on the button element right here.

10
00:00:34,610 --> 00:00:39,840
So we're trying to apply some custom inline styling So that's the first thing that is different between

11
00:00:39,840 --> 00:00:41,260
GSX and HMO.

12
00:00:41,460 --> 00:00:45,840
Let's take a look at another diagram that's going to help you understand how we can take the HTL version

13
00:00:46,020 --> 00:00:48,140
and convert it over to GSX.

14
00:00:48,420 --> 00:00:49,030
OK.

15
00:00:49,290 --> 00:00:55,470
So in this example we've got a div with an inline style of background color red in order to apply that

16
00:00:55,590 --> 00:00:57,650
to J A GSX elements.

17
00:00:57,690 --> 00:01:00,710
We're going to change the syntax just a little bit.

18
00:01:00,720 --> 00:01:02,820
We're still going to say style equals.

19
00:01:02,850 --> 00:01:09,750
But then after that we're going to place two curly braces in a row the outer curly brace so that one

20
00:01:09,750 --> 00:01:15,970
right there indicates that we want to reference a javascript variable inside of our GSX.

21
00:01:16,080 --> 00:01:20,870
Then the second curly brace right there is meant to indicate a javascript object.

22
00:01:20,910 --> 00:01:25,950
So when we do styling with GSX rather than providing a simple string like so we're going to instead

23
00:01:25,980 --> 00:01:31,650
provide a javascript object where all the keys of the object reference a different property that we

24
00:01:31,650 --> 00:01:36,860
want to style and the values indicate the value for that particular styling.

25
00:01:36,870 --> 00:01:41,940
The only other thing that you need to be aware of is that if we ever are trying to apply a style property

26
00:01:41,940 --> 00:01:50,070
name like say background Dasch color we're going to remove that dash and then capitalize the next letter

27
00:01:50,070 --> 00:01:50,870
over.

28
00:01:50,970 --> 00:01:57,510
So anytime that you've got any styling any styling whatsoever that has some word dash another you'll

29
00:01:57,510 --> 00:02:01,520
remove that dash and then capitalize the next character like so.

30
00:02:03,270 --> 00:02:08,670
Now if this was simply say a style meant to customize the background and we wanted say a background

31
00:02:08,720 --> 00:02:11,660
art said let's not do background let's do a border that's a better example.

32
00:02:11,790 --> 00:02:18,800
So if we did say like a border of one picks solid red like so that would translate down to simply Forder

33
00:02:18,990 --> 00:02:22,770
and then inside of a string one picks solid red.

34
00:02:22,770 --> 00:02:25,560
So in general the conversion here is pretty straightforward.

35
00:02:25,560 --> 00:02:26,760
Just remove the double quotes.

36
00:02:26,790 --> 00:02:32,190
Replace some with curly braces and then if you ever have the kind of compound property name remove the

37
00:02:32,190 --> 00:02:34,330
dash into a capitalization.

38
00:02:34,470 --> 00:02:41,370
So with those rules in mind I would love if you took a shot at updating the style on our button tag

39
00:02:41,370 --> 00:02:42,420
right here.

40
00:02:42,510 --> 00:02:43,970
I'm going to take a quick pause right here.

41
00:02:44,040 --> 00:02:49,790
I want you to take a look at the style property and try to convert it over to equivalent GSX.

42
00:02:49,830 --> 00:02:54,050
Now don't spend too much time on this because I haven't even really shown you a good example yet.

43
00:02:54,060 --> 00:02:58,610
Besides this little diagram over here just give it a quick shot after you make a change.

44
00:02:58,620 --> 00:03:04,530
You can save this file and then flip back over to your re-act application and you want to see this error

45
00:03:04,530 --> 00:03:05,630
message go away.

46
00:03:05,730 --> 00:03:08,000
If you see a new error message that's totally fine.

47
00:03:08,130 --> 00:03:10,560
Well fix it up either way in the next video.

48
00:03:10,560 --> 00:03:12,720
So give it a shot and I'll see you in just a minute.