1 00:00:01,050 --> 00:00:05,530 In a class section we learn that we could reference a javascript variable or a function inside of a 2 00:00:05,530 --> 00:00:09,340 block of GSX by putting down a set of curly braces like so. 3 00:00:09,430 --> 00:00:12,610 Again I want to remind you this is not a javascript object. 4 00:00:12,610 --> 00:00:16,890 It is the syntax that GSX uses to refer to some javascript variable. 5 00:00:16,900 --> 00:00:21,400 Now in this video I want to tell you a little bit more about what different types of variables we can 6 00:00:21,400 --> 00:00:27,580 reference inside of GSX specifically when we're trying to put something in here that's going to display 7 00:00:27,640 --> 00:00:33,580 on our screen as text or some otherwise value are going to first begin by deleting that function that 8 00:00:33,580 --> 00:00:34,780 we just put together. 9 00:00:34,780 --> 00:00:38,590 We don't really need that anymore and it's just going to make this example a little more complicated 10 00:00:38,710 --> 00:00:39,670 than it needs to be. 11 00:00:40,490 --> 00:00:44,620 I'm then going to go back to putting that variable inside the component we had before. 12 00:00:44,660 --> 00:00:51,500 So I'll say Konst button text is click me like so and then inside of our curly braces right here I'll 13 00:00:51,500 --> 00:00:53,840 again replace it with a button text. 14 00:00:53,840 --> 00:00:57,310 And now that we don't have a function we do not need a set of parentheses. 15 00:00:57,410 --> 00:00:59,120 So it just button text like so. 16 00:00:59,480 --> 00:00:59,680 All right. 17 00:00:59,690 --> 00:01:03,160 Very quickly I'm going to save this file and just make sure that everything is still working. 18 00:01:03,390 --> 00:01:04,240 Yep looks good. 19 00:01:05,100 --> 00:01:06,070 All right. 20 00:01:06,400 --> 00:01:12,180 So if we want to you we can reference other types of variables rather than a string here. 21 00:01:12,250 --> 00:01:15,170 For example I could instead replace this with a number. 22 00:01:15,190 --> 00:01:17,240 One two three four five six. 23 00:01:17,650 --> 00:01:21,620 I can then save this flip back over and I'll see that number printed up here. 24 00:01:22,440 --> 00:01:26,520 I could also replace this with an array of say strings or numbers. 25 00:01:26,670 --> 00:01:28,890 I could do something like Hi there. 26 00:01:29,790 --> 00:01:31,370 Two strings inside of an array. 27 00:01:32,470 --> 00:01:37,420 If I then save that and flip back over you'll see the two strings got pushed together are essentially 28 00:01:37,420 --> 00:01:39,520 concatenated inside that button. 29 00:01:40,050 --> 00:01:45,560 And if I want to I could also replace it with a set of numbers like 10 and 20. 30 00:01:45,700 --> 00:01:48,960 I can then say this again and I'll see 10 20 over here. 31 00:01:49,980 --> 00:01:53,300 So we clearly have a pretty good amount of flexibility here. 32 00:01:53,430 --> 00:01:58,020 But there is one particular example of something that I wanna show you right here at the entire point 33 00:01:58,020 --> 00:02:03,240 in this video because I can almost guarantee that you're going to run into this bug at some point in 34 00:02:03,240 --> 00:02:08,250 time and when you see the error message around this bug it's going to be pretty darn confusing. 35 00:02:08,340 --> 00:02:13,490 So I'm going to replace button text right here with a javascript object instead. 36 00:02:13,500 --> 00:02:15,250 This is a plain object. 37 00:02:15,330 --> 00:02:19,130 I'm going to give it a property of say text and I'll say click me. 38 00:02:20,000 --> 00:02:21,890 It's now going to save the file again. 39 00:02:22,280 --> 00:02:25,850 When I flip back over we're going to see a nasty error message appear. 40 00:02:25,850 --> 00:02:30,740 Now I want you to really look at this error message and try to remember it because like I said I can 41 00:02:30,800 --> 00:02:35,610 almost guarantee you're going to see this at some point in time in your re-act career. 42 00:02:35,720 --> 00:02:42,020 Your message says objects are not valid as a react child or react child essentially means we're trying 43 00:02:42,020 --> 00:02:49,610 to show an object like a javascript object inside of a reac component as text and react does not know 44 00:02:49,610 --> 00:02:51,260 how to deal with that. 45 00:02:51,290 --> 00:02:58,640 So we are not allowed to take a javascript object and reference it inside of GSX specifically where 46 00:02:58,640 --> 00:03:01,420 we would normally show text. 47 00:03:01,530 --> 00:03:06,570 We could very easily fix this by putting on a button text dot text. 48 00:03:06,570 --> 00:03:10,000 So now that's going to refer to the text property of this object. 49 00:03:10,110 --> 00:03:14,730 We can save this and we'll see that we're back to working as we were before. 50 00:03:14,730 --> 00:03:19,620 Now the reason that I put a lot of emphasis on that last part saying we can't show an object as text 51 00:03:19,920 --> 00:03:26,250 is because technically we can't show a javascript object as a attribute on an element like this right 52 00:03:26,250 --> 00:03:26,720 here. 53 00:03:27,580 --> 00:03:31,780 Now that you understand the purpose of this clearly braes syntax we can look back at the style property 54 00:03:31,840 --> 00:03:33,960 and get a better idea of what's going on. 55 00:03:34,300 --> 00:03:40,030 So we're really doing here is we're saying we want to reference a javascript variable for this style 56 00:03:40,030 --> 00:03:45,560 property and the value that we're going to pass in is this javascript object. 57 00:03:45,960 --> 00:03:53,270 If we wanted to we could technically cut that thing out create a new variable up here called style assign 58 00:03:53,280 --> 00:03:58,120 the style object to it and then reference that style down here like so. 59 00:03:58,330 --> 00:04:00,860 And that would have the exact same effect. 60 00:04:01,290 --> 00:04:07,410 So clearly we can use javascript objects as long as we're not trying to print them up as text or something 61 00:04:07,410 --> 00:04:09,690 like that inside of our application. 62 00:04:10,160 --> 00:04:10,690 OK. 63 00:04:10,950 --> 00:04:11,790 So that's pretty much it. 64 00:04:11,820 --> 00:04:14,080 I'm going to undo that last little change. 65 00:04:14,930 --> 00:04:16,160 And leave it like so. 66 00:04:16,340 --> 00:04:21,310 And the very last thing I want to mention very quickly is that if we want to we can do multiple interpreters 67 00:04:21,310 --> 00:04:23,690 interpolations inside of a GSX block. 68 00:04:23,960 --> 00:04:31,670 So for example we could extract this to say label text equals enter name and then reference that inside 69 00:04:31,670 --> 00:04:32,660 of our label instead 70 00:04:36,200 --> 00:04:41,000 we can save this flip back over to our browser and we'll see that we still have enter name for the label 71 00:04:41,000 --> 00:04:41,990 as well. 72 00:04:42,490 --> 00:04:46,640 OK so that's just a couple of the big important things for you to understand around the differences 73 00:04:46,640 --> 00:04:49,240 between H.C. email and GSX. 74 00:04:49,370 --> 00:04:53,930 If you look at the diagram over here I made it seem like there is only three issues but there is one 75 00:04:54,020 --> 00:04:56,050 last little thing that I want to show you. 76 00:04:56,120 --> 00:05:00,340 One little thing that you need to be aware of and the differences between GSX and HMO. 77 00:05:00,500 --> 00:05:02,460 So quick pause and I'll see you in just a minute.