1 00:00:01,040 --> 00:00:03,820 In this video we're going to start to write out our first example of a state. 2 00:00:03,890 --> 00:00:07,080 We're going to try to build this very simple counter application right here. 3 00:00:07,210 --> 00:00:11,810 I know counter applications are probably really boring to you but remember I'm trying to give you a 4 00:00:11,810 --> 00:00:14,240 couple of different quick examples here of state. 5 00:00:14,240 --> 00:00:18,980 This is gonna be the first one we're gonna go over several other small applications that focus on state 6 00:00:19,240 --> 00:00:22,640 and each one is going to be progressively more and more complex. 7 00:00:22,640 --> 00:00:26,910 So this is the first one we're going to take a look at more complicated stuff very quickly. 8 00:00:26,930 --> 00:00:27,140 All right. 9 00:00:27,170 --> 00:00:31,930 So to get started we're going to first create a new screen inside of our screens directory. 10 00:00:32,090 --> 00:00:38,870 So as usual I'll create a new file inside the screen directory called counter screen dot J.S. and then 11 00:00:38,870 --> 00:00:41,460 inside of here we'll put together our usual boilerplate. 12 00:00:41,630 --> 00:00:44,240 So we will import react from react. 13 00:00:44,240 --> 00:00:48,630 We will get view text and style sheet. 14 00:00:48,660 --> 00:00:54,400 Oh Alan skip button as well because we probably need to show some buttons from React Native well then 15 00:00:54,400 --> 00:00:55,990 create our counter screen 16 00:00:59,600 --> 00:01:09,130 and inside there we will return right now a view in that view will wrap a piece of text in that textured 17 00:01:09,130 --> 00:01:12,130 say something like I don't know about current count 18 00:01:14,930 --> 00:01:18,170 we'll just have this piece of text inside of here right now just to have something show up on the screen 19 00:01:18,170 --> 00:01:20,720 and know that our screen is working appropriately. 20 00:01:20,750 --> 00:01:22,920 After that we could create our style sheets. 21 00:01:22,940 --> 00:01:23,730 We still will. 22 00:01:23,750 --> 00:01:25,850 We're not really using our style sheet right now. 23 00:01:25,850 --> 00:01:29,240 Nonetheless it's kind of a good habit to create inside of here because you never know when you're going 24 00:01:29,240 --> 00:01:31,140 to need to add in some styling. 25 00:01:31,190 --> 00:01:36,620 It's all created even though I don't really expect to use it right away and I'll do an export default 26 00:01:37,010 --> 00:01:40,080 of counter screen at the bottom. 27 00:01:40,330 --> 00:01:40,630 All right. 28 00:01:40,630 --> 00:01:42,520 So there's our boiler plate now. 29 00:01:42,550 --> 00:01:47,290 As usual we need to hook this up to our app navigator or the stock navigator inside of our app dot J 30 00:01:47,290 --> 00:01:54,170 as file once we do that we need to make sure that we also add a new button into our home screen so a 31 00:01:54,170 --> 00:01:57,750 new button to show up along with the list of all the other buttons we already have. 32 00:01:57,770 --> 00:02:00,060 Let's take care about those steps right now. 33 00:02:00,120 --> 00:02:04,090 We'll change back over to my at DOT J.S. file at the top. 34 00:02:04,090 --> 00:02:05,290 I'm going to import the screen. 35 00:02:05,290 --> 00:02:15,440 I just created so counter screen from source screens counter screen allowed in a new key value pair. 36 00:02:15,470 --> 00:02:18,410 So a new routing option inside this first object right here. 37 00:02:18,410 --> 00:02:23,530 So we'll do counter is counter screen. 38 00:02:23,670 --> 00:02:27,620 All right so that's going to be it for our app J.S. file so I'll save this one as well. 39 00:02:27,660 --> 00:02:33,860 And then finally we can open up our home screen here's the home screen I'm going to duplicate the button 40 00:02:34,460 --> 00:02:42,600 one of the buttons anyways and we'll just update the tax to go to counter demo and I will update the 41 00:02:42,600 --> 00:02:45,330 navigate call right here rather than going to image. 42 00:02:45,390 --> 00:02:49,500 We'll go to counter instead that should be it. 43 00:02:49,660 --> 00:02:54,400 Let's say this one more time all three of these files we've now changed should all be saved. 44 00:02:54,400 --> 00:02:59,710 And so if I flip back over to my application feel that click on that link and see current count up here. 45 00:02:59,770 --> 00:03:00,860 Very good. 46 00:03:01,000 --> 00:03:03,280 And I should see the same thing on Android as well. 47 00:03:03,280 --> 00:03:03,630 Yep. 48 00:03:03,760 --> 00:03:05,850 Looks good OK. 49 00:03:05,880 --> 00:03:07,360 So let's take a quick pause right here. 50 00:03:07,440 --> 00:03:08,500 We come back the next video. 51 00:03:08,580 --> 00:03:13,440 We're going to start to assemble our counter screen tiny little application so I'll see you in just 52 00:03:13,440 --> 00:03:13,830 a minute.