1 00:00:01,190 --> 00:00:05,870 Now that we've got that CSSA library linked up we're going to start to write a little bit of GSX into 2 00:00:05,960 --> 00:00:10,450 our app component inside the index such as file remember. 3 00:00:10,550 --> 00:00:15,110 Right now we're going to take a naive approach to this and we're just going to write out a bunch of 4 00:00:15,110 --> 00:00:20,540 kind of raw GSX inside of your probably end up copy paste you get a couple of times to get that list 5 00:00:20,600 --> 00:00:23,960 of three different comments that we eventually want to end up with. 6 00:00:24,140 --> 00:00:25,610 So let's get to it. 7 00:00:25,610 --> 00:00:28,210 We're going to have to write out a pretty good amount of GSX here. 8 00:00:28,250 --> 00:00:30,850 So it's going to be a decent amount of typing. 9 00:00:30,860 --> 00:00:34,790 Please try to make sure that you spell everything correctly and just do a quick double check when you're 10 00:00:34,790 --> 00:00:35,890 all done. 11 00:00:35,900 --> 00:00:40,910 So I first begin by removing that divide that we started off with and I'll replace it with a set of 12 00:00:40,910 --> 00:00:43,070 parentheses and open it like so. 13 00:00:43,400 --> 00:00:49,280 Remember anytime that we want to place a big block of GSX we usually are going to end up putting a set 14 00:00:49,280 --> 00:00:53,600 of parentheses and then putting our GSX inside there are OK. 15 00:00:53,610 --> 00:01:01,050 So now inside of your first beginning with the div that has a class name of UI and take her comments 16 00:01:01,950 --> 00:01:04,860 and then I'll close that div off like so. 17 00:01:04,870 --> 00:01:05,190 All right. 18 00:01:05,200 --> 00:01:07,340 Easy enough to get started. 19 00:01:07,360 --> 00:01:11,990 Next we'll do a div with a class name of comment. 20 00:01:12,070 --> 00:01:16,960 So this right here is going to be a div that represents one single comment by itself. 21 00:01:17,110 --> 00:01:22,430 And inside there I'm going to put a ankar tag with an H ref of forward slash. 22 00:01:22,540 --> 00:01:26,800 So this is essentially going to be a link that takes us nowhere whatsoever because we don't have any 23 00:01:26,980 --> 00:01:28,940 navigation going on just yet. 24 00:01:29,110 --> 00:01:36,580 And then I'll give it a class name of a guitar then inside of that anchor tag I can make sure I closed 25 00:01:36,590 --> 00:01:40,580 off like so I'm going to place an image in there. 26 00:01:40,580 --> 00:01:45,680 I'll give it an all text just in case our image does not load up correctly and I'll give the Altec something 27 00:01:45,680 --> 00:01:47,770 like Eva tar. 28 00:01:47,770 --> 00:01:50,250 Now we don't really have any images to load up just yet. 29 00:01:50,260 --> 00:01:56,290 So right now I'm not going to put on any sarcy property so I'll just close off the image like so we're 30 00:01:56,290 --> 00:01:59,990 going to put an image in there in just a moment but we'll get around to that. 31 00:02:00,400 --> 00:02:00,640 OK. 32 00:02:00,640 --> 00:02:03,140 So now next after that anchor tag. 33 00:02:03,370 --> 00:02:11,190 So underneath the anchor I'm going to put a div with a class name of content like so I will again close 34 00:02:11,190 --> 00:02:13,410 that div off. 35 00:02:13,460 --> 00:02:17,030 We're going to put just a handful of tags in here very quickly. 36 00:02:17,030 --> 00:02:19,300 So I'm going to do another anchor tag. 37 00:02:19,520 --> 00:02:29,530 It's the nature of forward slash and A-class class name of author or clothes that anchor or tag off. 38 00:02:29,760 --> 00:02:31,390 And then I'll give it some text. 39 00:02:31,620 --> 00:02:35,690 Well let's have it say something like I don't know what do you think would be good. 40 00:02:35,690 --> 00:02:38,660 Let's have it have a name or something like Sam. 41 00:02:38,670 --> 00:02:40,400 That'll work out just fine. 42 00:02:40,410 --> 00:02:43,070 So this is going to be the author's name. 43 00:02:43,380 --> 00:02:45,240 Then after that I'll put a div. 44 00:02:45,240 --> 00:02:47,310 So notice again I'm outside the anchor tag. 45 00:02:48,460 --> 00:02:56,050 I want to do a class name of Medhat data a close off that Dave is well inside of there. 46 00:02:56,090 --> 00:03:04,090 I'll put a span with the class name of date I'll close off the span and then inside there I'll put the 47 00:03:04,120 --> 00:03:06,790 time or how long ago this thing was posted. 48 00:03:06,910 --> 00:03:15,590 So I'll say that maybe this comment was made today at 6:00 p.m. like so then finally the very last part 49 00:03:15,770 --> 00:03:16,200 will do it. 50 00:03:16,200 --> 00:03:23,320 Dave with the class name of text and this is going to be the actual comment body so I'll do something 51 00:03:23,320 --> 00:03:24,080 like. 52 00:03:24,100 --> 00:03:31,750 Nice Blog Post likes the OK so that's a pretty good amount of typing so I'm going to save this right 53 00:03:31,750 --> 00:03:32,810 now. 54 00:03:32,950 --> 00:03:37,750 Then I'll flip back over to my browser very quickly and check out my application. 55 00:03:37,780 --> 00:03:42,700 Now if you see any error message appear right here then that means that you very likely made a typo 56 00:03:42,730 --> 00:03:46,360 as we were putting together this email or receiving this GSX. 57 00:03:46,360 --> 00:03:50,500 At this point it very much looks like H.T. mail because we're not doing anything special with it. 58 00:03:50,650 --> 00:03:54,580 So if you see an error message look at the error message very closely. 59 00:03:54,580 --> 00:04:01,000 Chances are you might have forgot to close off some tag by forgetting to put on a closing brace like 60 00:04:01,000 --> 00:04:05,880 so or you might have neglected to put in a forward slash or something like that. 61 00:04:05,920 --> 00:04:11,290 So just do a quick double check and I'm sure you'll find the error somewhere inside of your all right 62 00:04:11,290 --> 00:04:12,370 so this is looking pretty good. 63 00:04:12,370 --> 00:04:16,060 We've now got our first little comment put together but we definitely have to make sure that we get 64 00:04:16,060 --> 00:04:19,010 a little image in there for the AVA as well. 65 00:04:19,030 --> 00:04:20,130 So let's take a quick pause. 66 00:04:20,140 --> 00:04:24,070 When we come back the next section will start putting a little image in there and the will duplicate 67 00:04:24,070 --> 00:04:28,870 this comment down three times and then after that we'll talk about how we could refactor it in two separate 68 00:04:28,870 --> 00:04:30,070 components. 69 00:04:30,070 --> 00:04:32,190 So quick break and I'll see you in just a moment.