In this video we're going to start to write out our first example of a state.
We're going to try to build this very simple counter application right here.
I know counter applications are probably really boring to you but remember I'm trying to give you a
couple of different quick examples here of state.
This is gonna be the first one we're gonna go over several other small applications that focus on state
and each one is going to be progressively more and more complex.
So this is the first one we're going to take a look at more complicated stuff very quickly.
All right.
So to get started we're going to first create a new screen inside of our screens directory.
So as usual I'll create a new file inside the screen directory called counter screen dot J.S. and then
inside of here we'll put together our usual boilerplate.
So we will import react from react.
We will get view text and style sheet.
Oh Alan skip button as well because we probably need to show some buttons from React Native well then
create our counter screen
and inside there we will return right now a view in that view will wrap a piece of text in that textured
say something like I don't know about current count
we'll just have this piece of text inside of here right now just to have something show up on the screen
and know that our screen is working appropriately.
After that we could create our style sheets.
We still will.
We're not really using our style sheet right now.
Nonetheless it's kind of a good habit to create inside of here because you never know when you're going
to need to add in some styling.
It's all created even though I don't really expect to use it right away and I'll do an export default
of counter screen at the bottom.
All right.
So there's our boiler plate now.
As usual we need to hook this up to our app navigator or the stock navigator inside of our app dot J
as file once we do that we need to make sure that we also add a new button into our home screen so a
new button to show up along with the list of all the other buttons we already have.
Let's take care about those steps right now.
We'll change back over to my at DOT J.S. file at the top.
I'm going to import the screen.
I just created so counter screen from source screens counter screen allowed in a new key value pair.
So a new routing option inside this first object right here.
So we'll do counter is counter screen.
All right so that's going to be it for our app J.S. file so I'll save this one as well.
And then finally we can open up our home screen here's the home screen I'm going to duplicate the button
one of the buttons anyways and we'll just update the tax to go to counter demo and I will update the
navigate call right here rather than going to image.
We'll go to counter instead that should be it.
Let's say this one more time all three of these files we've now changed should all be saved.
And so if I flip back over to my application feel that click on that link and see current count up here.
Very good.
And I should see the same thing on Android as well.
Yep.
Looks good OK.
So let's take a quick pause right here.
We come back the next video.
We're going to start to assemble our counter screen tiny little application so I'll see you in just
a minute.