1
00:00:00,670 --> 00:00:02,390
At this point I think you can agree with me.

2
00:00:02,410 --> 00:00:04,530
This app component does not look good.

3
00:00:04,660 --> 00:00:08,710
So in this video we're going to walk through these series of steps that you're going to go through every

4
00:00:08,710 --> 00:00:12,580
single time to create a reusable component.

5
00:00:12,580 --> 00:00:13,820
All right so here is the flow.

6
00:00:13,840 --> 00:00:16,130
Here's the series of steps.

7
00:00:16,160 --> 00:00:20,150
So this is what we're going to do to make a very usable and configurable component.

8
00:00:20,150 --> 00:00:25,220
The first thing we're going to do is identify the GSX that already exists inside of our application

9
00:00:25,430 --> 00:00:28,580
that somehow appears to be duplicated.

10
00:00:28,580 --> 00:00:34,670
Now if we go back over into our codebase over here without a doubt we know that this div with class

11
00:00:34,670 --> 00:00:39,140
name of comment all the way down to the closing part of that tag right there.

12
00:00:39,140 --> 00:00:41,990
That thing is basically duplicated three times.

13
00:00:42,020 --> 00:00:46,600
Now of course we know that very very well because we did a copy paste in the last video.

14
00:00:46,730 --> 00:00:49,130
But I think you probably understand what's going on here.

15
00:00:49,160 --> 00:00:55,840
We want to find or isolate some portion of our application or some GSX that appears to be copy pasted

16
00:00:56,180 --> 00:01:00,750
either in a single component or in many places inside of our project.

17
00:01:01,980 --> 00:01:07,580
The next we're going to do is try to provide a name for the component that we're going to generate.

18
00:01:07,690 --> 00:01:13,750
We're going to eventually take that duplicated GSX and put it into a brand new stand alone component.

19
00:01:13,750 --> 00:01:18,880
And one of the most important things around that process is giving that component a good meaningful

20
00:01:18,970 --> 00:01:20,050
name.

21
00:01:20,050 --> 00:01:26,140
Now in this case I would say that the purpose of this GSX right here is to display a single comment

22
00:01:26,350 --> 00:01:29,250
or maybe details about a single comment.

23
00:01:29,470 --> 00:01:35,230
So I might give this thing the name of something like component or see me comment detail because that's

24
00:01:35,230 --> 00:01:39,420
what it's doing it's giving the details on a single comment.

25
00:01:39,600 --> 00:01:44,560
The next it will do is then create a new file to house the component that we're going to create to kind

26
00:01:44,560 --> 00:01:47,400
of duplicate the GSX inside of our application.

27
00:01:48,530 --> 00:01:51,400
This file is going to have the same name as the component.

28
00:01:51,530 --> 00:01:58,080
So we are going to now make a new file called comment detail inside of our Cercy folder.

29
00:01:58,490 --> 00:01:58,780
All right.

30
00:01:58,790 --> 00:02:02,600
So I'm going to flip back over to my code editor inside the Cercy folder.

31
00:02:02,630 --> 00:02:06,890
I'm going to make a new file called comment detail.

32
00:02:06,960 --> 00:02:15,520
J.S. like so now I want you to take a look at the nomenclature or the style of the name I provided right

33
00:02:15,520 --> 00:02:16,180
here.

34
00:02:16,180 --> 00:02:20,940
Usually real components are written in uppercase or kind of proper form.

35
00:02:21,130 --> 00:02:25,840
So that is comment detail for the name of this file as opposed to something like.

36
00:02:25,840 --> 00:02:30,170
Comment detail or comment detail or anything else like that.

37
00:02:30,280 --> 00:02:35,110
So simply comment detail with a capital C and a capital D.

38
00:02:35,140 --> 00:02:39,250
So now that we've created this file with the appropriate name we're going to create a new component

39
00:02:39,280 --> 00:02:46,180
inside that file and we're going to move that duplicated GSX over to this new component and this process

40
00:02:46,180 --> 00:02:47,450
is going to be a little bit longer.

41
00:02:47,470 --> 00:02:49,020
So let's do this right now.

42
00:02:50,140 --> 00:02:57,080
Inside this file I have to first import the re-act library out the very top.

43
00:02:57,210 --> 00:03:02,430
Then after that I can make a new function that is going to serve as this comment detailed component

44
00:03:02,910 --> 00:03:09,310
so I'll say Konst Calment detail that's going to be an arrow function like so.

45
00:03:09,890 --> 00:03:14,750
And then inside of your I'll put a return statement with a set of parentheses like so because remember

46
00:03:14,780 --> 00:03:15,730
that's what we always do.

47
00:03:15,740 --> 00:03:21,770
Anytime we know that we're going to have a big block of GSX And then finally I'm going to go back over

48
00:03:21,890 --> 00:03:24,720
to where we have that kind of duplicated GSX.

49
00:03:24,920 --> 00:03:27,440
And I'm going to take that duplicated stuff right here.

50
00:03:27,530 --> 00:03:31,910
So everything from div class name comment all the way down to the closing div right there.

51
00:03:31,910 --> 00:03:40,060
So a total of about 13 lines or so and I'm going to cut that and then take it over and paste it inside

52
00:03:40,100 --> 00:03:41,960
of my comment detail like so

53
00:03:45,120 --> 00:03:47,870
then I'll go ahead and save the file.

54
00:03:47,900 --> 00:03:48,590
OK so that's it.

55
00:03:48,590 --> 00:03:55,610
We just extracted a touch of CSX out to a separate components but we're not quite done just yet.

56
00:03:55,880 --> 00:04:02,450
So last thing we do is now make sure that this new component is configurable by using reacts props system

57
00:04:03,290 --> 00:04:06,690
to react prop's system is a very important system for us to understand.

58
00:04:06,710 --> 00:04:11,240
And this is a system in a topic that we're going to spend a pretty good amount of time on before we

59
00:04:11,240 --> 00:04:13,050
talk about exactly what prop's are.

60
00:04:13,160 --> 00:04:19,490
I want you to take a look at the GSX that we just put into our comment detail component at present it

61
00:04:19,490 --> 00:04:26,750
has a hardcoded author a hard code at a time and a hard coded comment content inside of your as well.

62
00:04:26,750 --> 00:04:31,940
Chances are not every single comment that we want to show inside of our application is going to have

63
00:04:32,090 --> 00:04:33,470
an identical author.

64
00:04:33,470 --> 00:04:35,930
Time and content assigned to it.

65
00:04:35,960 --> 00:04:41,870
So anytime that we now try to show this comment detail on the screen as a component we probably are

66
00:04:41,870 --> 00:04:45,710
going to want to be able to customize it when we create that component.

67
00:04:45,860 --> 00:04:48,880
And that's what this entire prop's system is all about.

68
00:04:48,890 --> 00:04:54,710
It allows us to configure exactly how a component behaves or the content that it shows.

69
00:04:54,740 --> 00:04:58,460
Now let's take a quick pause right here when we come back the next section will start to expand on this

70
00:04:58,460 --> 00:05:00,100
Propp system a little bit more.