1
00:00:00,810 --> 00:00:07,620
In the last section we extracted a ton of GSX from our index file into this new comment detail file.

2
00:00:07,650 --> 00:00:12,230
Now we have one tiny little mistake inside this file right now something we missed in the last video.

3
00:00:12,240 --> 00:00:16,470
You'll notice that inside this file we're making use of the F.A. library if we want to make use of the

4
00:00:16,470 --> 00:00:18,130
Fakhry library inside this file.

5
00:00:18,150 --> 00:00:20,470
We have to import it into this file.

6
00:00:20,490 --> 00:00:26,730
At present we have only imported it into the index such as file every import statement that we put is

7
00:00:26,820 --> 00:00:30,090
only going to be good for the file that it is placed in.

8
00:00:30,090 --> 00:00:35,070
So this import statement inside of indexed not just is not going to make hacker available inside of

9
00:00:35,070 --> 00:00:36,420
our comment detail.

10
00:00:36,420 --> 00:00:43,680
So to fix this I'm going to put import Achor from Achor inside of come and detail like the OK.

11
00:00:43,700 --> 00:00:46,120
So we've now created a new component.

12
00:00:46,240 --> 00:00:50,990
So now the next thing that we're going to want to do is somehow get this component right here to show

13
00:00:50,990 --> 00:00:52,970
up inside of our app.

14
00:00:53,180 --> 00:00:58,610
We want to essentially render is the term we might use we want to render the comment detail component

15
00:00:58,790 --> 00:01:00,410
inside of our app.

16
00:01:00,500 --> 00:01:01,780
So how are we going to do that.

17
00:01:01,940 --> 00:01:07,190
Well first off we need to make sure that the comment detail component is available inside of the index

18
00:01:07,190 --> 00:01:13,160
such as file remember by default all these different variables components everything that we create

19
00:01:13,160 --> 00:01:18,710
in different files are segmented or siloed off from other files inside of our project.

20
00:01:18,710 --> 00:01:24,010
So right now there is absolutely no connection between our indexed file and the commit detail file.

21
00:01:24,020 --> 00:01:29,800
They're not connected in any way in order to get this comment detail component to show up inside of

22
00:01:29,800 --> 00:01:33,600
it next to us so that we can then use it inside of our app component.

23
00:01:33,680 --> 00:01:35,630
We're going to do two things.

24
00:01:35,630 --> 00:01:41,240
First off we're going to place an export statement inside of the commet detail this export statement

25
00:01:41,270 --> 00:01:46,160
inside of here essentially tells the rest of the world hey everybody else every other file inside my

26
00:01:46,160 --> 00:01:46,940
project.

27
00:01:46,940 --> 00:01:50,630
If you want to get access to the comment detail no problem.

28
00:01:50,630 --> 00:01:51,570
I got you covered.

29
00:01:51,890 --> 00:01:56,450
So the expert statement that we're going to place inside of come a detail is going to make our component

30
00:01:56,450 --> 00:02:01,700
available to every other file inside of our project then to actually get access to that.

31
00:02:01,730 --> 00:02:07,820
We're going to add an import statement to the index file and that's what's going to form an actual link

32
00:02:07,820 --> 00:02:12,470
between these two files and make sure that requirement comment detail is available inside the index

33
00:02:12,470 --> 00:02:13,630
such as file.

34
00:02:13,880 --> 00:02:20,600
So you can kind of imagine that we're going to hook these two things up like so once we get that component

35
00:02:20,660 --> 00:02:25,330
inside of our index as file we can then render it or show it inside of our app.

36
00:02:25,400 --> 00:02:29,380
Through that technique that we refer to as component nesting.

37
00:02:29,380 --> 00:02:29,750
All right.

38
00:02:29,750 --> 00:02:30,860
So let's get to it.

39
00:02:31,040 --> 00:02:36,810
I'm going to first start off and of my comment detail file to export this component that we just created.

40
00:02:36,920 --> 00:02:43,430
I'm going to go down to the very bottom of the file and I'll add export default comment detail like

41
00:02:43,430 --> 00:02:44,020
so.

42
00:02:44,270 --> 00:02:49,480
So again this line right here is what makes this component available to the rest of our project.

43
00:02:49,490 --> 00:02:53,110
We'll talk more about this specific syntax we're using here in a little bit.

44
00:02:53,120 --> 00:02:58,120
But right now we just need to understand it makes this thing available to outside files.

45
00:02:58,130 --> 00:03:03,350
All right so now we're going to change over to the indexed geas file and at the top we're going to add

46
00:03:03,350 --> 00:03:06,710
in an import statement for our comment detail.

47
00:03:06,710 --> 00:03:10,550
So I'm going to say import comment detail from.

48
00:03:10,760 --> 00:03:16,850
And then we're going to provide a relative path reference to the file that we are trying to import in

49
00:03:16,850 --> 00:03:22,520
this case the file that we're trying to import is in the same directory or the same folder.

50
00:03:22,520 --> 00:03:29,450
So to indicate that we'll put down a dot slash and the will list out the file name which is comment

51
00:03:29,600 --> 00:03:32,330
detail like so.

52
00:03:32,340 --> 00:03:33,910
So again the dot slash right there means.

53
00:03:33,960 --> 00:03:40,370
Look in the same folder that we're currently in and then attempt to find the common detail file.

54
00:03:40,380 --> 00:03:44,410
Now you'll notice that we did not have to put on a dot J.S. or anything like that.

55
00:03:46,100 --> 00:03:51,070
Pack the library that is doing this kind of importing stuff and tying all these different files together

56
00:03:51,190 --> 00:03:55,190
is going to automatically attempt to find files ending in G-S for you.

57
00:03:55,270 --> 00:03:59,590
So you don't have to put the actual file extension on there so long as it's a J.S. file that you're

58
00:03:59,590 --> 00:04:01,420
trying to import.

59
00:04:01,420 --> 00:04:02,590
OK so it looks good.

60
00:04:02,590 --> 00:04:07,390
Now last thing we have to do is take this component right here that we just imported and use it inside

61
00:04:07,420 --> 00:04:09,190
of our app to do so.

62
00:04:09,190 --> 00:04:12,910
I'm going to clean out the existing GSX that is inside of here right now.

63
00:04:13,060 --> 00:04:17,380
I'm going to leave the outside div with the class name of UI container comments.

64
00:04:17,470 --> 00:04:21,730
But those two duplicate comments so we put inside if you're going to delete those because we're going

65
00:04:21,730 --> 00:04:24,250
to eventually completely replace them.

66
00:04:24,250 --> 00:04:30,190
So I'm going to highlight everything from div class name Calment all the way down to the second to last

67
00:04:30,200 --> 00:04:31,700
div right here.

68
00:04:32,530 --> 00:04:34,250
And then I'll delete it like so.

69
00:04:34,530 --> 00:04:37,140
So now we're just left with one div with that class name.

70
00:04:37,180 --> 00:04:39,180
And we've got the closing div over there as well.

71
00:04:40,080 --> 00:04:46,020
So now the lesson we need to do is tell our app component that it should show the common detail component

72
00:04:46,500 --> 00:04:47,200
to do so.

73
00:04:47,250 --> 00:04:51,710
I'm going to treat the comment detail as though it were a GSX tag.

74
00:04:52,080 --> 00:04:59,650
So inside of you you're going to put comments detail like so now you might have thought that to show

75
00:04:59,650 --> 00:05:04,660
that component you might have been thinking that we would use those curly braces and say something like

76
00:05:04,660 --> 00:05:10,060
comment detail or remember we just spoke about GSX and we had said that if we want to refer to javascript

77
00:05:10,060 --> 00:05:16,060
variables we're going to use those curly braces like so components are the one exception to that rule

78
00:05:16,330 --> 00:05:22,180
if we want to show one component inside of another we're going to treat it as though it were a GSX tag

79
00:05:22,210 --> 00:05:22,990
instead.

80
00:05:23,230 --> 00:05:27,920
So whenever we're showing a component no knock and use those curly braces.

81
00:05:27,930 --> 00:05:29,210
All right so that's pretty much it.

82
00:05:29,460 --> 00:05:33,230
So let's now save this file and we'll flip over to the browser and we'll test this out.

83
00:05:33,390 --> 00:05:37,560
At this point we're just going to expect to see exactly one comment on the screen.

84
00:05:37,710 --> 00:05:45,210
And as we said previously that comment is currently going to have a fixed author name time and Palmet

85
00:05:45,510 --> 00:05:47,130
content right there as well.

86
00:05:47,170 --> 00:05:47,420
OK.

87
00:05:47,430 --> 00:05:50,590
So I can flip back over and there we go.

88
00:05:50,590 --> 00:05:54,870
So I see Sam I got my logo and I see a nice blog post.

89
00:05:54,950 --> 00:05:57,220
Of course I could zoom in and see all of that more closely.

90
00:05:58,160 --> 00:05:58,390
OK.

91
00:05:58,420 --> 00:05:59,440
That's pretty much it.

92
00:05:59,440 --> 00:06:02,640
That is how we show one component inside of another.

93
00:06:02,650 --> 00:06:06,310
Now there's no limit to the number of components that we show inside of another.

94
00:06:06,340 --> 00:06:13,040
If we wanted to we could copy this detail here a couple of times down like so and then save the file

95
00:06:13,040 --> 00:06:13,890
again.

96
00:06:14,180 --> 00:06:18,530
Look back over to the browser and now we'll see that we have an equal number of new content components

97
00:06:18,530 --> 00:06:20,000
showing up on the screen.

98
00:06:20,500 --> 00:06:20,730
All right.

99
00:06:20,740 --> 00:06:21,820
So this looks good.

100
00:06:21,850 --> 00:06:28,450
So now the only issue here is that we have this very repetitive author name time and blog content as

101
00:06:28,450 --> 00:06:29,140
well.

102
00:06:29,140 --> 00:06:30,750
So let's take a quick pause right here.

103
00:06:30,850 --> 00:06:34,780
When we come back the next section we're going to talk about how we use that prop system that I'd mentioned

104
00:06:34,780 --> 00:06:39,170
in the last video to configure these comment details when they are created.

105
00:06:39,400 --> 00:06:41,750
So quick pause and I'll see you in just a minute.