We've now centralized all the code for application inside of our out.
File.
So again this has the benefit of allowing us to test against an Android or iOS build without having
to worry about any platform specific configuration.
Thinking back to the mockup So we looked out for this app.
Let's put those up real quick.
Here we go.
So thinking back to the mock ups we definitely had a lot of components in here such as the header and
the buttons and the card views rather than rebuild all these from scratch.
You suggest that we just copy paste these files over from our last project.
After all that is the goal of reusable components we want to avoid having to remake the same elements
over and over again.
And I know I don't know about you but if I had to make the header a second time inside this course I
wouldn't be terribly happy.
But anyways there are some really fancy ways to import code over or kind of shared between projects
and we certainly could.
But we're going to keep things here just for the sake of this course.
Very simple very straightforward.
We're just going to copy paste a few fights.
That's all we're going to do.
So I want to copy paste a handful of components out of my previous project dark albums project and then
just drop them directly into this project.
OK so not a lot of magic here we're just going to do a copy paste.
So inside my phone instructor excuse me and my source directory will start by making a component's folder
so all make my components folder like so.
And then this time around I'm going to make another folder inside of here and I call it common.
And the goal here is that any reusable components that I have inside my project I'm going to place them
all inside this common directory.
You'll see why in just a minute is give me a really nice really nice trick that we're going to use here
for our reusable components.
So this coming for the right here is where I want to put my reusable components from the last section.
So now will do a little bit of copy pasting.
I going to open up my file explorer here and honestly you can do is copy pasting process however you
want so you use the terminal you can use your code editor.
However you want to get your files over here is totally fine by me but for me it just make everything
nice and easy for everyone to do it.
And a very visual fashion by doing the actual dragging and dropping.
So let me pull open my re-act native project directory here we go
and origo.
So I've got my component's directory from my albums project in one window and then in my other window.
I've got my Auth. source components Paghman directory.
Something is going to take my button my card my card section in my header components and I don't just
drop them all inside that common directory.
This should be a really fast copy paste over.
So now I've got bar button card card section and header all inside of that common directory right here.
As a quick side if you feel as though your four components right here you know we are going to depend
on these pretty heavily.
If yours are not working perfectly you can always hop on the official didn't have revoke from this course
and just copy paste the code for each of these files directly.
You could just get a nice fresh copy as a reminder you can find a link to the Get have Ribault in one
of the very first sections inside this course you just hop right on over there go find the prodigy's
project files and just copy them right into your project directory.
OK so that's that.
But my code editor back open here and yup now I can verify that I've got my four components inside the
common directory.
OK so now here's a little trick I mentioned.
We know that components like the log and form that we're going to create in a little bit.
You know I've only vaguely mentioned the log in form but the line forms give me the thing that's going
to house the actual logon form here.
We know that it's going to need to require several different components out of that common directory.
Right.
We know that it's definitely you need the button.
It's going to mean the card it's going to be in the card section we're going to need to import quite
these things out of that single directory right there.
That means that we would have to stack up a bunch of import statements that all import stuff out of
the same directory.
And you know what having a ton of import statements at the top of your file.
It gets a little bit tiresome to read right.
You don't want to see whenever you open a file something like that right.
It just gets old really quickly.
So I'm going to suggest a little to work around a nice little trick that's going to dramatically simplify
the number of import statements that we have to use inside this application.
I'm going to pull a diagram up really quick of exactly how this going to work.
All right so here's the here's the strategy here inside of our common folder.
We're going to create a new file called index dot.
J.S..
So don't confuse this with a top level index.
Iowa SJS and index Android js files.
This is a completely separate one are a completely separate index js file.
So inside of index G-S we will import the header the button.
The card section and the card and then we will immediately export them.
Then any other component that wants to use any of these files is are in want of a single component that
wants to get access to the header and the button we will be able to import both those components from
just components.
Slash.
Common take note of the import string here and the diagram actually is correct.
I've not actually specified a file here but whenever we have a file called index start yes inside of
a directory and I'm suggesting that we do if we try to import from that directory without specifying
a file it will by default pick up that index file.
So basically if we leave off any very particular file we will get a default of index G-S come back to
us as a quick aside.
That's why you generally see the file name of index floating all over the place and really larger established
reac projects.
OK.
So let's give this a shot.
It really shouldn't be too bad in my common folder.
I'm going to make a new file called index dot J us.
Then inside of here we are going to immediately or we're going to import and export each of these other
components in just a single line here.
So when you're a little bit of a trick to do that normally we might do something like say import button
from button and then export button.
Right.
Instead we're going to do this entire step all in one line to do so.
We will write export star.
That's you know date on your keyboard from button.
So in a single line here this imports and exports the button component.
So then we will repeat the same step for our other files as well.
Our card section and we're going to one thing that you know we made a mistake on much earlier.
I use a lowercase on the head here.
I'm going to fix that issue right now.
So very important.
I'm going to fix the header issue.
I have capital H right here.
I'm going to fix up my header file by just renaming it to use a capital H as well.
So capital a chatter.
Now everything across the board is nice and consistent.
So again the statement here.
These statements each of these is essentially a pass through.
It can be read as.
Take everything from the button file and export it from this one like export it from index G-S.
One last thing though you'll notice that each of these I've got it.
Yes lint Arafura says no named experts found a module button.
So the one downside to this approach then taking right here is if I want to use this pattern I cannot
use the default keyword inside of each of these files saw side of my button component right now if I
want to use this approach.
I can not use the default keyword.
Instead I have to export an object with a key of button.
So I'd have to do something like this.
So I want to export an object with a key a button and a value of the actual component which is button.
And of course you'll also notice that because I've got a key and a value that are identical I can use
a little bit of ESX to condense this down to just button like so.
So again the one twist here if you're using this export star syntax we have to make sure that we just
export something without that default keyword.
And when I say it here you'll see that that air now falls off.
So we're going to get the same process in the other files as well inside of my card component.
I will go down to the bottom and take off the default keyword and wrap it with curly braces.
I need to do the same thing for my card section
replaced with curly braces and same thing with the header as well.
Get.
So now all four of my reusable components have a single export statement at the bottom is my export
export and my export and now my index dot J.S. file is all happy.
So no errors from yes lint.
If you still have something or some errors from iOS lint keep in mind that you Slint just command us
to save the file and you should see those errors drop off.
If Yeslam is still complaining I would encourage you to just close the index file and open it back up
and you should be good to go.
OK so one last step here.
I wanted to make sure that everything is working as we expect.
So I flip back over to our app component and I want to test out this new import strategy.
So at the very top.
I import Hetter from components common.
Notice that I do not have to specify that index file.
If I just specify a directory by default it will go to the index js file.
In addition I only want to get the header out of here so I get a structure header out of that index
file.
Then inside of our component I locate the header and I'll give it a better text of authentication like
so
cool let's go ahead and give this a test out in our simulator.
So flip over refresh and hot dog.
It all worked out.
Hooray.
So again this whole pattern right here I know three factor was a little bit of a pain but the entire
idea behind it was that we can now put all of our usable components inside that common directory and
then just have one single import statement to get access to all of them.
So definitely makes life a little bit easier.
Let's continue on the next section and get started with firebase