We've now done a whole bunch of discussion about the out there we're going to build you know talked
about challenges around it and I don't think we can put off any longer.
I think it's really time to start working on this application.
So unless I actually did start up the installation of our new app so my installation is complete here
I'm going to change into my project directory and I'm calling the app manager.
So I'm changing into the Manager Project file folder.
I just started my code editor.
Our goal in this section is to get through a whole bunch of set up.
OK so we've kind of got a real big stack of set up to do.
We have to install re-act we have to install redux.
We have to hook up those index files.
We have to bring over our default components.
Definitely a little bit of setup here.
I know that the server can get a little bit tedious but you know there's a lot of just having mastery
over that default setup I think is very valuable.
And so even though this is like the fourth time that we're going through the set up I really think it
is a valuable exercise to just figure out how this stuff is all put together from scratch.
Okay so then mind let's get to it.
I don't really necessarily have any set order of you know what the best way to go about this is I think
we're just going to do this on a you know whatever's whatever is easiest to get it started sort of way.
So I think first we'll install some dependencies then we'll set up our boiler plate and then we'll bring
over some default components.
So the first thing we're going to do is install the redux and re-act redux libraries.
So I'm back at the command line.
I'll run and PM install dash dash save re-act redux and redux.
So remember the re-act redux library is specifically the bindings between react and redux.
That's why we're installing that and of course redux is just redux.
So we don't really need to watch the progress bar here.
We can let it do its thing and flip back over to our codebase.
So next I think we should set up our route component remember the root component is we're going to create
our redux store.
We're going to place that provider tag and they're going to make sure that the two index files point
out that root component.
So inside of my project directory or make a new folder that's going to house all the code for our project
and I can call just SIRC and then side if you're going to make my root component which I'm going to
call Apgar J.S. OK.
So Years of us will get started by importing react and component because we are going to create a component
in here and I am going to make it a class based component for reasons that we'll talk about in a little
bit will import the provider tag from re-act redux.
We'll import that create store method from redux.
And you know what let's import the view and text tags from re-act native as well.
You can also tell that I have not yet said it might yes Slint configuration.
You know I'm going to do that here between the next break.
So right now I'm going to go just without.
Lint.
No big deal.
Next we'll create our root component.
So class app extends component will place our render method inside of your and by default we will return
our provider tag and inside of they're going to place a single view
with my textbook
and I'm going to say hello right now.
Now of course I'm probably gonna be running this on iOS.
So as we've seen we're getting a little bit of a overlay on the top nav bar or the top like default
connection bar on iOS.
No big deal.
We're going to replace this thing really quickly but I just want to have something on the screen just
to make sure that you know something's actually working.
So finally at the bottom you export default app now last up in here we need to make sure that we give
the provider tag an instance of a redux store.
So remember that provider tag is what connects to all those different connect tags that we scatter about
our application and the provider tag make sure that all those connect tags can get access to the store
grab our redux state and then pass it off to individual components.
So inside the provider tag will pass it a store with create store like so and then we're going to I
think that this component is probably in a pretty good place right now.
So we'll go ahead and we're wired up to our two index files at the top level.
So inside of my index Android J us let's go ahead and you know we can probably clear out just about
everything in here.
I'll take out the top import and take out all of the other imports re-act native and just leave behind
app registry because we do know that we need that app registry component.
Now here comes the real fun part.
We get to delete just about everything in here except for that app registry registry component tag at
the bottom.
So we will import app from source app and install instead of returning this little manager component.
You know the default line will return our new component.
The one that we just created the app component.
So let's say that I think that the index Android js file now looks pretty darn good.
So I'm going to take all of this and I copy it and I'll pull it over to the index.
Iowa SJS file as well and save it.
OK.
So this is good.
Good start.
We've now got something Nashville to run in both the Android and iOS simulators.
So I think that's enough set up for this section.
Let's take a quick break.
During the break you know one last thing I want to do is going to start up my simulator so run re-act
native run iOS and this is going to take a little minute or two to warm up so I can take a quick break
while this warms up and we'll come back and just verify that our project actually runs on the simulator
so I'll see him in just a second.