In the last section I gave you some fancy terms around components.
Now these terms by themselves don't do a lot of good.
We have to actually write some code to understand what's going on.
So in the section we're going to start to talk about a little application we're going to put together
to get a better idea of what all these different terms mean.
Let me very quickly show you the mockup and then we're going to generate a new project to build this
thing.
OK.
So here's our mockup.
It's really simple rather straightforward.
We're going to essentially make a couple of Riak components that are going to generate what looks like
a list of comments maybe on a blog post or a song or a news article or whatever it might be.
So we're going to want to make sure that we have the ability to display an image a user's name in bold
some time at which the comment was posted.
And then finally the actual comment text underneath it.
Now as you look at this you probably can recognize almost instantly that every little one of these comments
like comment one comment to and comment three.
All look very very similar to each other.
The only difference between them is that they tend to have a little bit of different text different
user names different times and different content for each comment as well.
But as far as the styling goes the spacing all that kind of stuff it generally looks almost identical.
Now rather than just dive in say oh yeah we're going to build a bunch of different components to build
this thing out.
I say that we first begin by taking a kind of naive approach.
By that I mean that we will try to make one single component and in that single component we're going
to put all of the GSX where essentially HCM L that is going to make a list of comments that looks like
this right here after we see some negatives around that approach will then start to refactor it into
separate components.
And so this will give you a much more natural inclination as to why we like to split things out into
reusable components rather than just put down a whole bunch of GSX like a big blob of it.
OK.
So with that in mind let's generate a new project will make the project we'll let our dependencies install.
And all right start writing some code for this in the next video.
So let's start making a new project right now I'm going to flip back over to my terminal where we still
have our GSX project running.
I'm going to shut that thing down by hitting Control-C and then going to go up one directory.
So I'm back in my workspace directory of sorts and then decide if you're going to generate a new re-act
application.
We could absolutely reuse the app that we're working on currently.
That entire scaffold.
But at the end of this course I want you to have a bunch of different projects that you can easily refer
back to if you need to.
So I'm going to run create re-act app and I'm going to get this thing a name of components like so.
OK.
So it's installing my dependencies so let's take a quick pause right here.
When we come back the next section we're going to start putting together this little app.
So see you in just a minute.