1
00:00:00,720 --> 00:00:04,150
In the last section I gave you some fancy terms around components.

2
00:00:04,150 --> 00:00:06,480
Now these terms by themselves don't do a lot of good.

3
00:00:06,490 --> 00:00:09,110
We have to actually write some code to understand what's going on.

4
00:00:09,130 --> 00:00:12,730
So in the section we're going to start to talk about a little application we're going to put together

5
00:00:12,940 --> 00:00:15,770
to get a better idea of what all these different terms mean.

6
00:00:15,790 --> 00:00:19,510
Let me very quickly show you the mockup and then we're going to generate a new project to build this

7
00:00:19,510 --> 00:00:20,200
thing.

8
00:00:20,610 --> 00:00:20,840
OK.

9
00:00:20,860 --> 00:00:21,840
So here's our mockup.

10
00:00:21,970 --> 00:00:24,400
It's really simple rather straightforward.

11
00:00:24,430 --> 00:00:29,260
We're going to essentially make a couple of Riak components that are going to generate what looks like

12
00:00:29,320 --> 00:00:35,820
a list of comments maybe on a blog post or a song or a news article or whatever it might be.

13
00:00:35,860 --> 00:00:40,960
So we're going to want to make sure that we have the ability to display an image a user's name in bold

14
00:00:41,350 --> 00:00:43,840
some time at which the comment was posted.

15
00:00:44,050 --> 00:00:47,130
And then finally the actual comment text underneath it.

16
00:00:47,170 --> 00:00:53,050
Now as you look at this you probably can recognize almost instantly that every little one of these comments

17
00:00:53,110 --> 00:00:56,400
like comment one comment to and comment three.

18
00:00:56,470 --> 00:00:59,030
All look very very similar to each other.

19
00:00:59,200 --> 00:01:03,430
The only difference between them is that they tend to have a little bit of different text different

20
00:01:03,430 --> 00:01:08,690
user names different times and different content for each comment as well.

21
00:01:08,920 --> 00:01:14,800
But as far as the styling goes the spacing all that kind of stuff it generally looks almost identical.

22
00:01:14,800 --> 00:01:19,120
Now rather than just dive in say oh yeah we're going to build a bunch of different components to build

23
00:01:19,120 --> 00:01:20,230
this thing out.

24
00:01:20,230 --> 00:01:24,450
I say that we first begin by taking a kind of naive approach.

25
00:01:24,550 --> 00:01:30,280
By that I mean that we will try to make one single component and in that single component we're going

26
00:01:30,280 --> 00:01:36,820
to put all of the GSX where essentially HCM L that is going to make a list of comments that looks like

27
00:01:36,820 --> 00:01:42,180
this right here after we see some negatives around that approach will then start to refactor it into

28
00:01:42,190 --> 00:01:43,630
separate components.

29
00:01:43,630 --> 00:01:49,090
And so this will give you a much more natural inclination as to why we like to split things out into

30
00:01:49,120 --> 00:01:54,410
reusable components rather than just put down a whole bunch of GSX like a big blob of it.

31
00:01:54,630 --> 00:01:54,860
OK.

32
00:01:54,880 --> 00:02:00,670
So with that in mind let's generate a new project will make the project we'll let our dependencies install.

33
00:02:00,680 --> 00:02:03,330
And all right start writing some code for this in the next video.

34
00:02:03,460 --> 00:02:08,200
So let's start making a new project right now I'm going to flip back over to my terminal where we still

35
00:02:08,200 --> 00:02:10,740
have our GSX project running.

36
00:02:10,870 --> 00:02:16,150
I'm going to shut that thing down by hitting Control-C and then going to go up one directory.

37
00:02:16,180 --> 00:02:21,460
So I'm back in my workspace directory of sorts and then decide if you're going to generate a new re-act

38
00:02:21,490 --> 00:02:22,530
application.

39
00:02:22,690 --> 00:02:25,730
We could absolutely reuse the app that we're working on currently.

40
00:02:25,750 --> 00:02:26,820
That entire scaffold.

41
00:02:26,920 --> 00:02:31,180
But at the end of this course I want you to have a bunch of different projects that you can easily refer

42
00:02:31,180 --> 00:02:32,820
back to if you need to.

43
00:02:32,830 --> 00:02:40,140
So I'm going to run create re-act app and I'm going to get this thing a name of components like so.

44
00:02:40,500 --> 00:02:40,760
OK.

45
00:02:40,780 --> 00:02:43,910
So it's installing my dependencies so let's take a quick pause right here.

46
00:02:43,960 --> 00:02:48,120
When we come back the next section we're going to start putting together this little app.

47
00:02:48,160 --> 00:02:49,450
So see you in just a minute.