1 00:00:00,560 --> 00:00:03,740 In the last section then we started writing our first component. 2 00:00:03,820 --> 00:00:10,680 We have so far is a plain javascript function that returns some GSX GSX being the stuff that looks like 3 00:00:10,710 --> 00:00:18,300 HVM now the function is assigned onto the constant app and we use constant instead of var because we 4 00:00:18,300 --> 00:00:20,190 don't expect this variable to ever change. 5 00:00:20,190 --> 00:00:22,890 We're not going to reassign app at any given time. 6 00:00:23,040 --> 00:00:26,710 So let's talk a little bit more about what GSX is doing for us. 7 00:00:26,910 --> 00:00:30,120 And then move on to the next step. 8 00:00:30,120 --> 00:00:37,320 I want to mention to you that GSX just like the 6 code that we're writing with Konst cannot be interpreted 9 00:00:37,320 --> 00:00:38,130 by the browser. 10 00:00:38,140 --> 00:00:44,040 So remember the purpose of our boilerplate package here with web pack and babbel is to translate this 11 00:00:44,040 --> 00:00:49,500 GSX into actual vanilla javascript's that can be understood by our browser. 12 00:00:49,650 --> 00:00:54,100 So you might be curious Well what is the purpose of GSX Why do we write this at all. 13 00:00:54,120 --> 00:00:56,990 You know why does it exist inside of this function. 14 00:00:57,270 --> 00:01:03,630 These GSX like this because this is what produces the actual each team M-L that gets inserted into the 15 00:01:03,630 --> 00:01:04,260 DOM. 16 00:01:04,260 --> 00:01:10,740 When we render this component and when I say render I mean place this components each T.M. onto the 17 00:01:10,740 --> 00:01:11,730 page. 18 00:01:12,090 --> 00:01:20,400 So this GSX right here gets turned into HCM mail which in turn gets placed onto our page into our dorm 19 00:01:20,400 --> 00:01:22,850 into our document its what the user ends up seeing. 20 00:01:23,100 --> 00:01:30,420 So the purpose of GSX is to have some javascript code that can produce ultimately HTL. 21 00:01:30,480 --> 00:01:35,340 Now you might be wondering why does it look like it seems on at all you know why don't we have some 22 00:01:35,340 --> 00:01:37,710 type of just normal javascript calls. 23 00:01:37,740 --> 00:01:41,760 Well you know we don't have to write GSX if we don't want to. 24 00:01:41,760 --> 00:01:48,440 But I really guarantee you're probably going to want to let's look at what this GSX looks like in vanilla 25 00:01:48,440 --> 00:01:49,260 javascript. 26 00:01:49,320 --> 00:01:56,250 Remember GSX gets transpired to vanilla javascript just normal looking javascript so I'm going to copy 27 00:01:57,570 --> 00:02:04,080 all this code right here and I'm going to flip over to a code here or is using a tool here which is 28 00:02:04,090 --> 00:02:06,390 a yes six REPL. 29 00:02:06,690 --> 00:02:11,400 So I'm going to on the left hand side going to paste in the code and on the right hand side is going 30 00:02:11,400 --> 00:02:13,920 to turn into vanilla javascript so just. 31 00:02:14,100 --> 00:02:20,760 Yes five javascript that can be ran safely inside of our browser so I can go ahead and paste this and 32 00:02:20,760 --> 00:02:26,440 you'll see OK you know we get to kind of and you know we're looking variable's up here whatever. 33 00:02:26,730 --> 00:02:36,380 But we also get our GSX turned into a call to a function called re-act dot create element. 34 00:02:36,510 --> 00:02:40,380 The first argument is a div and the third argument is high. 35 00:02:40,490 --> 00:02:43,830 You know the content that's inside of the div over here. 36 00:02:43,830 --> 00:02:46,760 So this is why we use GSX in the first place. 37 00:02:47,070 --> 00:02:51,030 It gets compiled into vanilla javascript but it's really ugly. 38 00:02:51,060 --> 00:02:55,260 You know we don't want to be typing this out by hand whenever we write a component we want to just write 39 00:02:55,260 --> 00:03:00,120 something looks very clean very concise and you can look at this code over here on the left hand side 40 00:03:00,120 --> 00:03:06,390 and say OK this function right here will return some GSX that ultimately is going to look like a div 41 00:03:06,750 --> 00:03:08,740 with content high. 42 00:03:08,880 --> 00:03:13,530 If you look it over here on the right hand side this is really hard to figure out what's going on right 43 00:03:13,550 --> 00:03:14,820 . 44 00:03:15,610 --> 00:03:19,640 GSX can also be nested inside of itself just like normal HCM now. 45 00:03:19,650 --> 00:03:25,080 So if I want to I can add say a oh well 46 00:03:27,870 --> 00:03:29,210 with a couple of lines 47 00:03:29,220 --> 00:03:34,750 . 48 00:03:35,280 --> 00:03:40,590 Now look what we get on the right hand side we've got re-act create element and it's going to make an 49 00:03:40,600 --> 00:03:40,650 . 50 00:03:40,710 --> 00:03:41,680 Oh well. 51 00:03:42,180 --> 00:03:48,500 And then as a argument provided to it it gets a nother or this is the season of the third argument and 52 00:03:48,510 --> 00:03:55,860 the fourth and the fifth right here with additional calls to create element with Type II and content 53 00:03:55,950 --> 00:03:59,020 1 2 and 3. 54 00:03:59,040 --> 00:04:04,020 So as our components start to get more complex with a lot more GSX inside them you know as we start 55 00:04:04,020 --> 00:04:10,230 to write more complicated components that have more GSX inside of it that in turn produces more each 56 00:04:10,230 --> 00:04:15,350 D.M. the javascript that gets produced gets more complicated as well. 57 00:04:15,390 --> 00:04:20,940 So you can imagine if we start to get really complex components they get just about illegible on the 58 00:04:20,940 --> 00:04:22,100 javascript side. 59 00:04:22,290 --> 00:04:28,500 So that's the purpose of GSX is to make our components a lot more clean a lot more legible to see what's 60 00:04:28,500 --> 00:04:29,850 going on. 61 00:04:30,660 --> 00:04:35,340 OK so enough on GSX Let's get back to our code in the next section and continue on.