In the last section we created our Henrick component which currently just shows some text to the user.
We then ended the section by using an export statement down at the bottom.
The component structure that you see the import statement the declaration of the component and the export
statement at the bottom is going to be super Tollman 100 percent reduce Sipple or reproduceable excuse
me are going to use it all over the place for all of our different components.
So you're going to get very used to seeing this type of structure inside of our component files right
here.
Continuing the section we're going to figure out how to make use of a component that we have export.
So again export statement means we can now use this inside of other files inside of our application.
As I've said several times before we use multiple components together to create more elaborate applications
to do so.
We make use of a practice referred to as component nesting component nesting.
Is the process of placing one component inside of another.
So these two topics component nesting and consuming expurgate objects really go hand in hand to get
more experience with this.
We're going to import the header into the app component.
So inside of this index file and then we're going to nest it inside of the app component.
When I say it I mean we're getting the header inside the app component.
So this is me a two step process.
First we're going to import the header and then we're going to nested inside the app.
So let's do step one first.
Underneath the two existing import statements we'll add a third import to import the header so will
say import header from.
And now this last statement this string over here is going to be a little bit different than the ones
we've written previously.
Previously we wrote just reactor re-act native to say hey we want this specific library but that only
works when it's a file that we write.
Or excuse me when it's a file that we installed with NPM.
If it's a file that we are have written ourselves we have to provide a relative path reference to that
file.
So by relative path reference I mean we need to imagine that we're sitting inside of this album's folder
right now and I need to make a reference to the header file to do so I'll say dot slash which means
star in the current directory.
So in the album's directory then go into the source directory.
So as Cercy then go into the components directory and then did that header.
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.
We can just place just Hetter by itself.
Now I'll go ahead and save this and boom that's all we have to do to import a file.
I want to draw your attention back to the big difference between these import statements we've written
so far.
Again if it's an import statement that is for a library that was installed as the NPM module which is
the case with both the react and react native then we can just write the name of the module.
But if it's a module that we write ourselves we have to provide the path reference for this.
So let me tell you a little bit about why that's the case because I always annoy the heck out of me
with NPM all module names are all package names are always unique.
So we have no uniqueness or seemy we can never make two modules called react.
And so when we put just a name in the library our packager assumes Oh hey they must be making reference
to a NPM module.
I'm going to go through the node modules directory and try to find a folder called react and when it
finds it great.
That's what this library must be here.
But in the case of files that we write well we might have many different files on our application called
Hetter.
You know we could have one inside the components directory.
We could also have a file or a file called Hetter inside of the SIRC directory as well.
And so if we just said import header from header.
Well the packager would have no idea which header we want it it might be the one in the source directory
or might be the one in the components directory.
It just wouldn't know.
And so that's why for files that we write we have to specifically say where that file is throughout
the entire course you know make sure to give you a lot of help on whether or not we're using a relative
path or just a library name.
And in addition for every relative path that we use I will certainly make sure to give you a lot of
help on exactly what that path is.
OK.
So that's step one here.
We have imported the hetero component and now we're on to Step Two.
We have to nest the Hetrick component inside of the app so to render one component inside of another
it's just treat the imported component like another GSX tag.
So I'm going to delete the text tag that we've got right here and I can replace it with the SO will
say just Hetter now by convention.
If we have a self-closing terrorist sees me if we have a tag that does not have any text that goes inside
of it as is the case with this header.
You know I don't intend to place any text inside of here.
We turn it into a self-closing tag.
And that's what the excellent rule here is complaining about it saying Empty components are self-closing.
So to make a self-closing component will delete the second tag and then place a forward slash and a
closing bracket.
So now we get just Hetter by itself and that's all we have to do.
Now I notice that when I do this we are no longer using that text tag up top.
Right we're not using the attacks inside this component so we can delete the text import now and we're
left with just the header by itself.
So this right here again is referred to as component nesting.
We take one component and place it inside of another.
It's our chief tool for making really complex applications full of a lot of different components.
Plus I want to do is test this out inside of the simulator so I'll bring the simulator up and I'll refresh
it by hitting command are if you are on Windows and you're using the Android simulator you can at control
are instead to you had to refresh.
So now you'll notice that while the text is still overlapping on the head or up your butt now you can
kind of tell that it says albums instead of the some text that we had before.
So it's still ugly but at least we got the text to work.
That means that the header component is correctly being displayed within the app.
So this is great.
Let's continue in the next section and fix up the header with some styling so that it looks nice and
centered at the very top of our application.