1
00:00:00,630 --> 00:00:04,530
In the last section we finally got some content to appear on the screen of our browser.

2
00:00:04,720 --> 00:00:09,320
Now that we've got some working application put together we're going to start to focus on the GSX that

3
00:00:09,330 --> 00:00:13,110
we had written into our app component in the index file.

4
00:00:13,210 --> 00:00:17,100
I want to first explain to you exactly what GSX is.

5
00:00:17,280 --> 00:00:22,710
So when you look at this stuff as I've said many times it looks like a female but in reality it's not.

6
00:00:22,720 --> 00:00:24,760
It's not each female at all.

7
00:00:24,820 --> 00:00:28,910
I want to give you a quick reminder about something that we spoke about just a little bit ago.

8
00:00:28,930 --> 00:00:32,360
Remember I told you just a little bit ago that when we write.

9
00:00:32,380 --> 00:00:39,070
Yes 2015 code which you and I like to do as developers we do not ship it down directly to a user's browser

10
00:00:39,310 --> 00:00:41,210
because their browser might not have.

11
00:00:41,220 --> 00:00:45,140
Yes 2015 or 16 or 17 fully supported.

12
00:00:45,160 --> 00:00:49,930
So in order to get around that we had said that we made use of that dependency called babbel we made

13
00:00:49,930 --> 00:00:55,330
use of Babel to take that as 2015 2016 or whatever code and convert it down to normal.

14
00:00:55,360 --> 00:00:55,850
Yes.

15
00:00:55,970 --> 00:01:02,480
Five javascript babble is also used to process that GSX that you saw as well.

16
00:01:02,500 --> 00:01:07,690
So when we take this javascript file and ship it down to our users browser and even as it's running

17
00:01:07,690 --> 00:01:14,640
in our browser right now it does not contain this GSX in here that looks like an e-mail tag.

18
00:01:14,890 --> 00:01:20,580
Your browser in no user's browser natively understands what GSX is.

19
00:01:20,590 --> 00:01:26,680
So a GSX actually get sent down to a user's browser it gets converted into normal looking javascript

20
00:01:26,680 --> 00:01:31,900
code and you might be immediately curious how do we take something that looks like this right here in

21
00:01:31,900 --> 00:01:34,900
turning into equivalent normal javascript.

22
00:01:35,230 --> 00:01:40,450
Well in order to figure that out we can actually use a little tool that is made available for us by

23
00:01:40,570 --> 00:01:43,040
babbel themselves the people who make Babel.

24
00:01:43,380 --> 00:01:48,070
I'm going to open up a new browser tab and I'm going to navigate to the babbel home page which is at

25
00:01:48,070 --> 00:01:52,430
Babel chase IO on here.

26
00:01:52,460 --> 00:01:53,290
I'm going to find the.

27
00:01:53,310 --> 00:01:55,510
Try it out button at the very top.

28
00:01:56,390 --> 00:02:00,980
So now on this interface we can write some amount of code here on the left hand side.

29
00:02:01,050 --> 00:02:07,020
This can be as 2015 2016 or even code that contains GSX as well.

30
00:02:07,020 --> 00:02:09,950
Babbel will then automatically convert that code into normal.

31
00:02:09,960 --> 00:02:13,560
Yes 5 javascript and show it on the right hand side.

32
00:02:13,810 --> 00:02:19,050
Really quickly want you to take a look at the left hand panel over here and find the preset section

33
00:02:19,350 --> 00:02:23,090
and just make sure that re-act is checked.

34
00:02:23,150 --> 00:02:27,040
All right so then once we are sure that that is checked I'm going to go back over to my index Staci's

35
00:02:27,220 --> 00:02:28,230
file.

36
00:02:28,340 --> 00:02:33,470
I'm going to copy the entire app component that we just put together and I'm going to paste it back

37
00:02:33,470 --> 00:02:37,370
over here on the left hand side and I'm going to zoom in just a little bit.

38
00:02:42,500 --> 00:02:45,240
No I want that to go away not bigger area.

39
00:02:45,250 --> 00:02:46,460
OK that's better.

40
00:02:46,460 --> 00:02:46,990
All right.

41
00:02:47,030 --> 00:02:53,570
So as you can see that div right there that kind of GSX looking thing actually gets turned into a javascript

42
00:02:53,600 --> 00:02:55,100
function call.

43
00:02:55,250 --> 00:02:57,710
It's a call to react create element.

44
00:02:57,710 --> 00:03:02,530
The first argument is a string that indicates the type of element that we want to create.

45
00:03:02,630 --> 00:03:07,490
Then the third element is the text that we want to show inside of that div.

46
00:03:07,490 --> 00:03:12,520
So every time that you see GSX we're writing GSX just for simplicity's sake.

47
00:03:12,620 --> 00:03:16,970
At the end of the day that GSX gets turned it turned into this big function call right here.

48
00:03:17,300 --> 00:03:18,980
So you might be curious.

49
00:03:18,980 --> 00:03:24,930
Well if this GSX gets turned into a function call why don't we just write out a lot of function calls.

50
00:03:25,010 --> 00:03:26,420
The answer is really simple.

51
00:03:26,690 --> 00:03:31,400
Let's imagine that we have a little bit more complicated component than what you see right here.

52
00:03:31,400 --> 00:03:40,850
So for example maybe we have a div that contains a UL element inside of it and then that well as a couple

53
00:03:40,850 --> 00:03:43,870
of lights.

54
00:03:43,950 --> 00:03:48,860
So I'll put a couple of lines and maybe those allies have texts of their own like Hi there and maybe

55
00:03:48,860 --> 00:03:51,650
Jacksonville's say by there.

56
00:03:51,800 --> 00:03:54,790
And the final one was say now cha.

57
00:03:54,920 --> 00:03:55,930
It's on the left hand side.

58
00:03:55,940 --> 00:04:00,190
When we look at this thing in GSX form it's pretty easy to tell what's going on.

59
00:04:00,210 --> 00:04:06,920
If are at least familiar with how HTL works you can take a glance at this over here and understand that

60
00:04:06,920 --> 00:04:11,510
this app component is going to create a div that has a well and three allies.

61
00:04:11,660 --> 00:04:15,980
And you also very quickly can see what text those allies are going to contain.

62
00:04:15,980 --> 00:04:21,380
However if you look at the converted results over here on the right hand side it's a lot harder to take

63
00:04:21,380 --> 00:04:27,540
a quick glance at that and understand the exact structure and content of what this component is creating.

64
00:04:27,560 --> 00:04:33,590
So the entire purpose of sex is just to be able to allow us to write out these different function calls

65
00:04:33,800 --> 00:04:39,980
that normally occur behind the scenes for us in a much easier to understand format much easier to read.

66
00:04:40,010 --> 00:04:44,340
Much easier to get a sense of what is going on when you make use of react.

67
00:04:44,340 --> 00:04:50,880
It is not required to use GSX but it is highly recommended because if you try to write out all these

68
00:04:50,880 --> 00:04:55,410
different function calls you're going to very quickly write out some code that is very challenging and

69
00:04:55,410 --> 00:04:57,160
difficult to maintain.

70
00:04:57,600 --> 00:04:57,800
OK.

71
00:04:57,810 --> 00:05:00,280
So now do we understand what's going on with GSX.

72
00:05:00,300 --> 00:05:01,730
Let's take another quick pause.

73
00:05:01,830 --> 00:05:05,850
When we come back the next section will start experimenting around with it a little bit inside this

74
00:05:05,850 --> 00:05:09,560
index such as file and get a better idea of the rules around it.

75
00:05:09,570 --> 00:05:11,370
So a quick pause and I'll see you in just a minute.