Let's take a bit of a break from redux for a moment and focus a bit more on the rest of our application
now based on the mockups that we've looked at previously we certainly know that we're going to need
a header component and a list composed of sorts right.
Some like something to render the list of all the different topics that we're going to have.
Now we've already got a head or component built from our previous projects.
So I think we should take the same approach as last time.
We're going to copy and paste over all of the common components that we had used.
OK so again there is some fancier ways of sharing code across projects but just for the sake of this
application you know kind of in the context of this tutorial we're going to take the easy way out and
just kind of copy paste some components over.
So first thing we'll do is inside of our Textbook Project we'll make a new folder to hold all of our
components.
So inside my source directory I'm going to make a component's folder and inside of there I will again
make my common folder.
So I've got component's common and just to be clear the idea behind the name common is like this.
These components are common to many different parts of the application.
That's the idea behind it.
OK so now we're going to copy and paste our components over inside my console.
I'm just going to go ahead and pull up my project directory
and pull up a second window soon to do this from the command line.
There we go OK not getting the second one that's fine.
We'll do this the hard way.
So I get to go into my art project which was the last one that we worked on.
My source folder components folder common folder.
And here we go here's all the different components that we made that we've been carrying through from
project to project.
I'm going to just copy them all and then I'll go back to my text project which is the one that we're
working on right now.
I'll go into my source directory components directory common directory and boom paste them all right
in there.
So again however you want to do this and you get a copy from the command line you can copy from the
file explorer whatever way you want.
Basically we just want this set of components inside of our common directory.
Now again if you feel like you're not super happy with the state of these compounds right here if you
feel like you know maybe my spinner isn't quite put together correctly or it's not working.
I encourage you to go check out the official course repo and just copy the common components directly
from there.
And again you can find the Course repot on get hub.
There is a link to it in a much earlier section within this course so feel free to check it out if you
would like.
All right so flipping back or in my code editor now I've got my common directory in here is all the
common components inside of it.
So just to kind of get something on the screen just to get something working.
Let's make immediate use of the head or component.
So we will import the header component into our app and place a header on the screen and just verify
Yup like you know it's has shown up in everything it's good to go.
So inside of my app component I will import header from components slash common.
And again we are making use of that convention where if we just import a directory will automatically
pull in the index file if it contains one then inside of our component here side of the app I will place
my header tag and I'll give it a header text Propp just text act or whatever you would like if you like.
You know any other name in here.
Feel free.
Feel free to go for it.
Some customization.
Now the one thing I want to point out here is that we have the provider tag.
Remember that the provider tag is what serves as glue between the redux side of our application and
the re-act side.
The one little tricky thing about the provider is that it can only have one single child component.
Now that child can have as many subcomponents as it would like.
But right now we have two children that we're passing to the provider.
So if I rendered this in the simulator right now I would end up with a big fat error message something
about the provider only being allowed to have one child.
So I can fix that by wrapping my head or component with the view tag.
Like so.
So now if I have multiple children you know other children they want to toss in here and I certainly
will you know certainly.
I can just place them right in here you know wherever else or whatever other components I would like
to have.
So that would be a nice setup.
All right let's check out the simulator.
Yes.
Simulators running.
Pretty sure my terminal is running with the re-act packager.
Yup.
Let's refresh and just verify that I've got a header on the screen and there we go there's my text.
Fantastic.
So we pulled over all of our common components which means we can reuse just a ton of code going forward
from this course to projects that you work on yourself.
I highly encourage you continue carrying over these common components right here and just develop them
over time.
And after you know maybe you make a toy application or two you'll end up with a set of components that
you know really well and you can use to put together future applications in a really compact timeframe.
OK.
Let's continue in the next section and start focusing on putting together a list of libraries for application