Now that we've got that CSSA library linked up we're going to start to write a little bit of GSX into
our app component inside the index such as file remember.
Right now we're going to take a naive approach to this and we're just going to write out a bunch of
kind of raw GSX inside of your probably end up copy paste you get a couple of times to get that list
of three different comments that we eventually want to end up with.
So let's get to it.
We're going to have to write out a pretty good amount of GSX here.
So it's going to be a decent amount of typing.
Please try to make sure that you spell everything correctly and just do a quick double check when you're
all done.
So I first begin by removing that divide that we started off with and I'll replace it with a set of
parentheses and open it like so.
Remember anytime that we want to place a big block of GSX we usually are going to end up putting a set
of parentheses and then putting our GSX inside there are OK.
So now inside of your first beginning with the div that has a class name of UI and take her comments
and then I'll close that div off like so.
All right.
Easy enough to get started.
Next we'll do a div with a class name of comment.
So this right here is going to be a div that represents one single comment by itself.
And inside there I'm going to put a ankar tag with an H ref of forward slash.
So this is essentially going to be a link that takes us nowhere whatsoever because we don't have any
navigation going on just yet.
And then I'll give it a class name of a guitar then inside of that anchor tag I can make sure I closed
off like so I'm going to place an image in there.
I'll give it an all text just in case our image does not load up correctly and I'll give the Altec something
like Eva tar.
Now we don't really have any images to load up just yet.
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
going to put an image in there in just a moment but we'll get around to that.
OK.
So now next after that anchor tag.
So underneath the anchor I'm going to put a div with a class name of content like so I will again close
that div off.
We're going to put just a handful of tags in here very quickly.
So I'm going to do another anchor tag.
It's the nature of forward slash and A-class class name of author or clothes that anchor or tag off.
And then I'll give it some text.
Well let's have it say something like I don't know what do you think would be good.
Let's have it have a name or something like Sam.
That'll work out just fine.
So this is going to be the author's name.
Then after that I'll put a div.
So notice again I'm outside the anchor tag.
I want to do a class name of Medhat data a close off that Dave is well inside of there.
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
time or how long ago this thing was posted.
So I'll say that maybe this comment was made today at 6:00 p.m. like so then finally the very last part
will do it.
Dave with the class name of text and this is going to be the actual comment body so I'll do something
like.
Nice Blog Post likes the OK so that's a pretty good amount of typing so I'm going to save this right
now.
Then I'll flip back over to my browser very quickly and check out my application.
Now if you see any error message appear right here then that means that you very likely made a typo
as we were putting together this email or receiving this GSX.
At this point it very much looks like H.T. mail because we're not doing anything special with it.
So if you see an error message look at the error message very closely.
Chances are you might have forgot to close off some tag by forgetting to put on a closing brace like
so or you might have neglected to put in a forward slash or something like that.
So just do a quick double check and I'm sure you'll find the error somewhere inside of your all right
so this is looking pretty good.
We've now got our first little comment put together but we definitely have to make sure that we get
a little image in there for the AVA as well.
So let's take a quick pause.
When we come back the next section will start putting a little image in there and the will duplicate
this comment down three times and then after that we'll talk about how we could refactor it in two separate
components.
So quick break and I'll see you in just a moment.