1
00:00:00,950 --> 00:00:06,120
In the last section we created our Henrick component which currently just shows some text to the user.

2
00:00:06,120 --> 00:00:11,150
We then ended the section by using an export statement down at the bottom.

3
00:00:11,230 --> 00:00:17,070
The component structure that you see the import statement the declaration of the component and the export

4
00:00:17,070 --> 00:00:23,490
statement at the bottom is going to be super Tollman 100 percent reduce Sipple or reproduceable excuse

5
00:00:23,490 --> 00:00:26,870
me are going to use it all over the place for all of our different components.

6
00:00:26,880 --> 00:00:31,530
So you're going to get very used to seeing this type of structure inside of our component files right

7
00:00:31,530 --> 00:00:32,690
here.

8
00:00:33,060 --> 00:00:37,430
Continuing the section we're going to figure out how to make use of a component that we have export.

9
00:00:37,440 --> 00:00:43,800
So again export statement means we can now use this inside of other files inside of our application.

10
00:00:44,430 --> 00:00:50,880
As I've said several times before we use multiple components together to create more elaborate applications

11
00:00:51,270 --> 00:00:51,980
to do so.

12
00:00:51,990 --> 00:00:57,930
We make use of a practice referred to as component nesting component nesting.

13
00:00:57,930 --> 00:01:01,300
Is the process of placing one component inside of another.

14
00:01:01,530 --> 00:01:08,640
So these two topics component nesting and consuming expurgate objects really go hand in hand to get

15
00:01:08,640 --> 00:01:09,870
more experience with this.

16
00:01:09,870 --> 00:01:13,980
We're going to import the header into the app component.

17
00:01:14,250 --> 00:01:20,810
So inside of this index file and then we're going to nest it inside of the app component.

18
00:01:20,820 --> 00:01:24,860
When I say it I mean we're getting the header inside the app component.

19
00:01:25,650 --> 00:01:27,540
So this is me a two step process.

20
00:01:27,540 --> 00:01:31,690
First we're going to import the header and then we're going to nested inside the app.

21
00:01:31,740 --> 00:01:33,650
So let's do step one first.

22
00:01:34,050 --> 00:01:40,530
Underneath the two existing import statements we'll add a third import to import the header so will

23
00:01:40,530 --> 00:01:43,500
say import header from.

24
00:01:43,500 --> 00:01:47,190
And now this last statement this string over here is going to be a little bit different than the ones

25
00:01:47,190 --> 00:01:48,800
we've written previously.

26
00:01:48,840 --> 00:01:55,260
Previously we wrote just reactor re-act native to say hey we want this specific library but that only

27
00:01:55,260 --> 00:01:57,310
works when it's a file that we write.

28
00:01:57,310 --> 00:02:00,140
Or excuse me when it's a file that we installed with NPM.

29
00:02:00,520 --> 00:02:06,750
If it's a file that we are have written ourselves we have to provide a relative path reference to that

30
00:02:06,750 --> 00:02:07,600
file.

31
00:02:08,010 --> 00:02:13,740
So by relative path reference I mean we need to imagine that we're sitting inside of this album's folder

32
00:02:13,740 --> 00:02:21,150
right now and I need to make a reference to the header file to do so I'll say dot slash which means

33
00:02:21,210 --> 00:02:22,780
star in the current directory.

34
00:02:22,800 --> 00:02:27,190
So in the album's directory then go into the source directory.

35
00:02:27,330 --> 00:02:35,390
So as Cercy then go into the components directory and then did that header.

36
00:02:36,000 --> 00:02:41,310
If it's a J S file that we're making reference to we do not have to put on the dot J at the end.

37
00:02:41,310 --> 00:02:45,160
We can just place just Hetter by itself.

38
00:02:45,220 --> 00:02:51,340
Now I'll go ahead and save this and boom that's all we have to do to import a file.

39
00:02:51,540 --> 00:02:55,350
I want to draw your attention back to the big difference between these import statements we've written

40
00:02:55,350 --> 00:02:55,970
so far.

41
00:02:55,980 --> 00:03:03,630
Again if it's an import statement that is for a library that was installed as the NPM module which is

42
00:03:03,630 --> 00:03:08,290
the case with both the react and react native then we can just write the name of the module.

43
00:03:08,490 --> 00:03:13,130
But if it's a module that we write ourselves we have to provide the path reference for this.

44
00:03:13,290 --> 00:03:17,670
So let me tell you a little bit about why that's the case because I always annoy the heck out of me

45
00:03:18,930 --> 00:03:23,960
with NPM all module names are all package names are always unique.

46
00:03:24,030 --> 00:03:29,910
So we have no uniqueness or seemy we can never make two modules called react.

47
00:03:29,910 --> 00:03:35,250
And so when we put just a name in the library our packager assumes Oh hey they must be making reference

48
00:03:35,250 --> 00:03:36,780
to a NPM module.

49
00:03:36,780 --> 00:03:42,540
I'm going to go through the node modules directory and try to find a folder called react and when it

50
00:03:42,540 --> 00:03:43,660
finds it great.

51
00:03:43,680 --> 00:03:45,650
That's what this library must be here.

52
00:03:46,170 --> 00:03:51,660
But in the case of files that we write well we might have many different files on our application called

53
00:03:51,660 --> 00:03:52,280
Hetter.

54
00:03:52,530 --> 00:03:54,930
You know we could have one inside the components directory.

55
00:03:54,930 --> 00:04:00,980
We could also have a file or a file called Hetter inside of the SIRC directory as well.

56
00:04:00,980 --> 00:04:04,210
And so if we just said import header from header.

57
00:04:04,440 --> 00:04:10,260
Well the packager would have no idea which header we want it it might be the one in the source directory

58
00:04:10,260 --> 00:04:12,260
or might be the one in the components directory.

59
00:04:12,300 --> 00:04:13,860
It just wouldn't know.

60
00:04:14,000 --> 00:04:20,100
And so that's why for files that we write we have to specifically say where that file is throughout

61
00:04:20,100 --> 00:04:26,040
the entire course you know make sure to give you a lot of help on whether or not we're using a relative

62
00:04:26,040 --> 00:04:28,870
path or just a library name.

63
00:04:28,950 --> 00:04:32,970
And in addition for every relative path that we use I will certainly make sure to give you a lot of

64
00:04:32,970 --> 00:04:35,630
help on exactly what that path is.

65
00:04:36,330 --> 00:04:36,570
OK.

66
00:04:36,570 --> 00:04:37,690
So that's step one here.

67
00:04:37,770 --> 00:04:41,250
We have imported the hetero component and now we're on to Step Two.

68
00:04:41,370 --> 00:04:49,110
We have to nest the Hetrick component inside of the app so to render one component inside of another

69
00:04:49,410 --> 00:04:55,130
it's just treat the imported component like another GSX tag.

70
00:04:55,350 --> 00:05:01,100
So I'm going to delete the text tag that we've got right here and I can replace it with the SO will

71
00:05:01,100 --> 00:05:05,660
say just Hetter now by convention.

72
00:05:05,840 --> 00:05:12,800
If we have a self-closing terrorist sees me if we have a tag that does not have any text that goes inside

73
00:05:12,800 --> 00:05:14,470
of it as is the case with this header.

74
00:05:14,480 --> 00:05:17,610
You know I don't intend to place any text inside of here.

75
00:05:17,870 --> 00:05:20,140
We turn it into a self-closing tag.

76
00:05:20,300 --> 00:05:25,870
And that's what the excellent rule here is complaining about it saying Empty components are self-closing.

77
00:05:25,970 --> 00:05:33,710
So to make a self-closing component will delete the second tag and then place a forward slash and a

78
00:05:33,710 --> 00:05:35,110
closing bracket.

79
00:05:35,110 --> 00:05:39,020
So now we get just Hetter by itself and that's all we have to do.

80
00:05:39,050 --> 00:05:43,370
Now I notice that when I do this we are no longer using that text tag up top.

81
00:05:43,470 --> 00:05:48,710
Right we're not using the attacks inside this component so we can delete the text import now and we're

82
00:05:48,710 --> 00:05:51,530
left with just the header by itself.

83
00:05:51,530 --> 00:05:55,130
So this right here again is referred to as component nesting.

84
00:05:55,130 --> 00:05:59,060
We take one component and place it inside of another.

85
00:05:59,180 --> 00:06:05,770
It's our chief tool for making really complex applications full of a lot of different components.

86
00:06:05,930 --> 00:06:11,810
Plus I want to do is test this out inside of the simulator so I'll bring the simulator up and I'll refresh

87
00:06:11,810 --> 00:06:20,300
it by hitting command are if you are on Windows and you're using the Android simulator you can at control

88
00:06:20,300 --> 00:06:22,330
are instead to you had to refresh.

89
00:06:22,700 --> 00:06:28,640
So now you'll notice that while the text is still overlapping on the head or up your butt now you can

90
00:06:28,640 --> 00:06:33,310
kind of tell that it says albums instead of the some text that we had before.

91
00:06:33,500 --> 00:06:37,010
So it's still ugly but at least we got the text to work.

92
00:06:37,040 --> 00:06:40,720
That means that the header component is correctly being displayed within the app.

93
00:06:40,730 --> 00:06:41,720
So this is great.

94
00:06:42,080 --> 00:06:47,720
Let's continue in the next section and fix up the header with some styling so that it looks nice and

95
00:06:47,720 --> 00:06:50,330
centered at the very top of our application.