So now we've got a better idea of the application that we're about to build.
Let's get started working on it.
I think the best place to start is going to be working on this Hetter component right here.
Remember we organize our reata applications into a series of different components.
So we're going to make a single component called the head or component whose sole purpose is going to
be to sit at the top of the application and show the text albums.
Now we've already figured out how to show text and react natives so chances are the biggest challenge
here is going to be figuring out how to style it nicely.
You know how to make the text nice and big how to center it and how to make a nice header all around
it.
So that's going to be our big challenge here.
So let's get started.
Any re-act need of application.
We always create one component per file.
So one component per file inside of my index iOS J.S. file.
I've already got a single component located in here.
So to create a new component I will make a new javascript file to house it.
That means that for the larger application gets you know the more components we make the more files
remain working with at one time which is totally fine.
It's something that you're going to get used to to create my new component and the new file that goes
along with it.
I'm going to place it inside of a new directory in my project folder.
So in my project folder I'm going to create a new folder called SIRC.
And I thought here is that I'm going to place all of the code that I write for my application inside
of this SIRC file.
It just helps me a folder.
It just helps create division or you know kind of separate from all the boiler plate they got Jefferey
with re-act native versus the code that specifically you know we write and we intend to use with our
application.
Secondly inside this SIRC folder I want to make a nother folder called components so I'll make another
folder called components and this is going to make all the different components they're going to use
inside of our application as we start making more complex applications will have other folders inside
this SIRC one that have radically different jobs.
And so that's why I like to make the second one just to say hey specifically in here.
This is where all my components go.
That's pretty much it.
OK.
So now inside of your last step we'll make a new file to How's our head or component.
So make a new file called header.
Yes this is it.
This is where we're going to make our head or component.
And the purpose of the center component is just so a nice rectangle with some text inside of it that
says albums.
That's it.
That's all we're trying to accomplish here.
So to get started we'll kick off with the same three steps that we used inside of index SJS.
First we will import libraries for making for making a component.
Then we will make a component
finally we will make the components available to other parts of the app.
Notice here that I changed the comment a little bit right.
Whereas in the index file I said rendered on the screen in the device this time around I'm saying well
I don't really want to like immediately rendered to the screen the device.
I just want other parts of the application tool to use this component and reference it.
And so we'll figure out exactly what I mean by that.
When we get to step number three here.
So let's start off with Step number one at the very top.
We will import some libraries for making a component and.
Import the same two that we did last time.
We're going to import react and react native.
So import re-act from re-act import Riak native from
react native you'll notice that as slant is Emily unhappy with this because hey we're not actually referencing
these variables here.
That's totally fine.
We all make use of them in just a moment.
So step number two we need to create our component
as a rule of thumb when we create that component.
We will always name it a function that is the same as the file that it's placed in.
So we're inside of heterogeneous.
Therefore we're going to create a component called header and we'll make our component which is a federal
function and then from here we're going to return some amount of GSX to render.
You'll notice that this time I'm not going to use the parentheses right away that's totally fine.
I'm going to again kind of vary through styles throughout the entire course on exactly how this looks.
It's really up to you.
There's not a super solid convention.
RC I'd take that back.
The convention is throughout the community.
Whenever you've got a single line of GSX you just put the return statement on the same line.
If you have a multi-line statement of GSX that's when you'll start to use the parentheses.
So you know I've got kind of obvious a little bit of foresight on exactly how many lines of GSX we're
going to make.
So throughout the course I'm going to seemingly randomly either use parentheses and put everything on
a new line or sometimes i want.
But you know we'll see.
So we've got the text like here and then inside the text tab tag will place some amount of text to show
to the user.
So I was going to say albums Ray.
Now immediately I'm using a text tag right here.
So I'm going to pull the text tag out of the Riak native library.
So I'm going to delete re-act name at the top and we're going to do a structured import to import the
text component and Amelio all those errors go away and we're left with just take text albums.
Finally on to Step Three here we need to make sure this component is available to other areas of the
application.
So this is where things you know start to a little bit of interesting back inside the index file.
We registered this component using the app registry but I'm saying that this time around inside the
head or I want to do things a little bit differently.
So let's figure out exactly why that is by looking at a diagram really quick.
So this is a diagram of our component hierarchy or all the different components we have in our application.
As I've mentioned several times before a normally react application will have many different components
created for it.
Each one a reusable widget that we can make use of in several different locations.
So when we join all these components together they form a tree of sorts where the very first component
to be rendered to the screen is what we refer to as the root component.
So right now because the first component that gets Rem to the screen is the app component we refer to
it as the root component.
So the app is the root component.
Then every other component that the aplan shows is referred to as a child component.
So pretty soon we're going to tell the app component to show the head or one so we'll refer to the header
as a child component.
So coming back around to this whole concept of you know all these important export statements and the
app registry all that kind of stuff.
Well basically have the text on here only the root component uses app registry.
That's the only time we use the average string is for the most top level most parent component.
It's a component that we want to show first on the device and it's up to that app component to decide
everything that needs to be displayed to the user for every other component that we create for.
So for every child's component we create our application instead of registering it with that app registry.
We export it using yes six syntax.
So just as we have used import statements at the very top of our file we will also use export statements
at the bottom export statements you can kind of think of as meaning hey I want to make this components
hared component usable to other areas of our application as well.
That's the whole idea behind this export statement.
So at the bottom we will write exports default header.
So again this means take that component.
I want other files within our project to be able to make use of it.
So let's now continue in the next section and figure out how to make use of an export component