1 00:00:00,670 --> 00:00:03,950 In the last section we started learning a little bit more about GSX. 2 00:00:04,050 --> 00:00:08,760 We learned that it's technically javascript it's not HMO that we're writing and we also learned that 3 00:00:08,760 --> 00:00:14,610 browsers don't know how to understand GSX code so we use tools like battle to take our GSX and then 4 00:00:14,610 --> 00:00:16,920 turn it into normal javascript. 5 00:00:16,920 --> 00:00:21,030 The final thing I want to throw in there is that the GSX that you and I are going to write is going 6 00:00:21,030 --> 00:00:27,990 to be almost identical in form and function to normal HMO with just a couple of very small differences. 7 00:00:27,990 --> 00:00:33,060 So in this section I want to go through a little exercise that's going to give us a better idea of how 8 00:00:33,120 --> 00:00:39,640 each T.M. and GSX are slightly different We're going to put together a tiny little snippet of HCM l 9 00:00:40,000 --> 00:00:45,580 over using code so is going to write out normal HCM and then we're going to pull it into our re-act 10 00:00:45,580 --> 00:00:48,450 project and convert it into GSX. 11 00:00:48,490 --> 00:00:52,700 So this will give us a really good idea of some of the differences between the two. 12 00:00:52,770 --> 00:00:58,430 I'm going to first begin by opening up code by opening a new browser tab and going to code pens. 13 00:00:58,830 --> 00:01:05,570 Then once here I'm going to find the create button at the top right hand side and click on new pen. 14 00:01:05,590 --> 00:01:05,860 All right. 15 00:01:05,860 --> 00:01:10,150 Here we go as a quick reminder if you want to get these editor tabs on the left hand side you can click 16 00:01:10,150 --> 00:01:15,940 on change view or settings or notice just change view sorry and then select one of the different layouts. 17 00:01:17,390 --> 00:01:21,860 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 18 00:01:21,860 --> 00:01:24,670 put together just a couple of different elements. 19 00:01:24,830 --> 00:01:26,400 I'm going to put a div in here. 20 00:01:28,160 --> 00:01:31,460 And then I'll put in a label and put in a very simple button. 21 00:01:31,670 --> 00:01:35,510 And then on each of those three elements we're going to add a couple of different attributes. 22 00:01:35,780 --> 00:01:39,210 So first begin with a label. 23 00:01:39,320 --> 00:01:40,280 I'll give it the title of. 24 00:01:40,280 --> 00:01:48,010 How about enter name and then after that I'll put in an input and then finally a button. 25 00:01:48,780 --> 00:01:51,790 At the bottom and I'll say something like submit. 26 00:01:52,020 --> 00:01:52,210 OK. 27 00:01:52,230 --> 00:01:54,650 So just very simple straightforward HTL. 28 00:01:54,680 --> 00:01:58,300 Now I want to go through here and add on a couple of attributes. 29 00:01:58,320 --> 00:02:05,310 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 30 00:02:05,340 --> 00:02:08,650 immediately add an ID of name to the input. 31 00:02:08,850 --> 00:02:12,720 Now just in case you're not familiar with this idea of for an ID. 32 00:02:12,840 --> 00:02:19,080 All it does is allow us to click on the label and it will automatically select that text input then 33 00:02:19,080 --> 00:02:25,840 on the input I'm also going to specifically annotate it as being a type text input. 34 00:02:25,900 --> 00:02:26,880 And how about on the label. 35 00:02:26,890 --> 00:02:31,210 Let's give it a nice class will say class label. 36 00:02:31,210 --> 00:02:32,590 We're not going to actually do any styling. 37 00:02:32,590 --> 00:02:38,950 But let's imagine that maybe we had some special styling class set up on the CSSA tab over here to target 38 00:02:38,970 --> 00:02:43,770 a element with the class of label and style it in some fashion. 39 00:02:43,850 --> 00:02:46,270 And then finally I think that submit button looks kind of ugly. 40 00:02:46,280 --> 00:02:48,930 So going to put a little bit of custom styling on there. 41 00:02:49,060 --> 00:02:53,490 So I'll say style is going to be background color. 42 00:02:54,580 --> 00:02:59,230 Of blue and I'll get myself just a little bit more space here. 43 00:02:59,290 --> 00:03:03,790 Now that turned the button blue but it's definitely kind of ugly so I think that I'll give it a color 44 00:03:03,820 --> 00:03:05,530 of white as well. 45 00:03:05,530 --> 00:03:07,970 Now I'll just turn the text on the button white. 46 00:03:08,070 --> 00:03:08,620 All right. 47 00:03:08,890 --> 00:03:09,570 So that's it. 48 00:03:09,610 --> 00:03:10,280 Pretty simple. 49 00:03:10,290 --> 00:03:14,970 HTL snippet and I hope that everything we put in here is pretty easy to understand. 50 00:03:15,040 --> 00:03:17,100 So let's now copy this HD mail. 51 00:03:17,140 --> 00:03:18,730 We understand what it looks like over here. 52 00:03:18,730 --> 00:03:20,010 So we're going to copy this. 53 00:03:20,020 --> 00:03:25,220 We're going to go back over to our code editor and we'll paste it into our app component and the will 54 00:03:25,220 --> 00:03:29,770 of refresh our browser and see how this each female displays inside of our re-act application. 55 00:03:31,520 --> 00:03:31,750 OK. 56 00:03:31,770 --> 00:03:37,390 So back over here I'm going to find the div that we currently have and I'm going to delete it. 57 00:03:37,470 --> 00:03:38,950 I still have the return keyword. 58 00:03:38,950 --> 00:03:43,590 However don't forget that return keyword and I'm going to paste in the H.T. mail that we just wrote 59 00:03:43,590 --> 00:03:44,500 out. 60 00:03:44,770 --> 00:03:49,120 Now as a quick note I just want to mention some different ways in which we can format a simple hurt 61 00:03:49,200 --> 00:03:50,890 me format GSX. 62 00:03:50,970 --> 00:03:56,850 One thing that I see very frequently is very frequently see people who put the return keyword and then 63 00:03:56,850 --> 00:04:01,380 they put the first opening tag of the GSX block on the next line down. 64 00:04:01,380 --> 00:04:07,100 If you do it's right here it's going to result in an air as soon as JavaScript sees that return message 65 00:04:07,100 --> 00:04:07,540 it says. 66 00:04:07,570 --> 00:04:11,720 OK I'm just going to return and there's nothing after the return keyword. 67 00:04:11,720 --> 00:04:14,620 So the function decides to return a value of undefined. 68 00:04:14,840 --> 00:04:19,670 So any time that you return some amount of GSX you have to make sure that the opening tag is on the 69 00:04:19,670 --> 00:04:22,640 same line as the return statement. 70 00:04:22,640 --> 00:04:26,900 A better way to handle this in a way that's a little bit more following in convention in the community 71 00:04:27,170 --> 00:04:31,610 would be any time that you have a multi line segment of GSX like this. 72 00:04:31,610 --> 00:04:36,230 You will instead but the acts on the next line down you evil. 73 00:04:36,260 --> 00:04:40,130 Indent it and then you will wrap it inside of parentheses. 74 00:04:40,220 --> 00:04:45,490 Read the opening parentheses is on the same line as the return statement in the closing parentheses 75 00:04:45,920 --> 00:04:48,810 is after the end of the GSX like so. 76 00:04:49,250 --> 00:04:53,660 So this right here is a very common convention and we're going to be using this convention very frequently 77 00:04:53,690 --> 00:04:54,690 inside this course. 78 00:04:54,740 --> 00:05:01,170 Anytime we have a multi-line GSX block as we do right here OK so everything you see on the screen is 79 00:05:01,230 --> 00:05:04,250 valid so I'm going to save this. 80 00:05:04,260 --> 00:05:08,610 You'll notice that my code formatter automatically clicked kicked in there again just to put a new line 81 00:05:08,670 --> 00:05:09,300 around the label. 82 00:05:09,300 --> 00:05:11,400 That's totally fine till equivalent. 83 00:05:11,400 --> 00:05:17,830 So now I'm going to flip over to my browser and see how this appears in the browser at localhost 3000. 84 00:05:18,210 --> 00:05:22,620 All right so I could flip back over and you'll see that we immediately get a nasty error message here. 85 00:05:22,620 --> 00:05:26,170 You can read the error message if you want to but I'll tell you what it means. 86 00:05:26,250 --> 00:05:27,500 Let's take a quick pause right here. 87 00:05:27,540 --> 00:05:32,250 When we come back the next section will investigate this a little bit more and figure out exactly why 88 00:05:32,250 --> 00:05:36,220 our e-mail did not translate directly over to GSX. 89 00:05:36,230 --> 00:05:38,150 It's a quick Paulism I'll see you in just a minute.