1 00:00:00,750 --> 00:00:05,300 We've now looked at state in a couple of different places and now we're going to look at state in just 2 00:00:05,300 --> 00:00:06,830 one more location. 3 00:00:06,830 --> 00:00:10,990 I know we've been talking about state for quite a while but it really is the most important of react 4 00:00:11,020 --> 00:00:12,070 by far. 5 00:00:12,110 --> 00:00:15,820 So let's talk about where we're going to build for this last example. 6 00:00:15,900 --> 00:00:16,120 OK. 7 00:00:16,160 --> 00:00:18,630 So where we kind of took a look at a mockup like this. 8 00:00:18,740 --> 00:00:23,690 We're going to show a enter name little label right there underneath that will show a text input. 9 00:00:23,690 --> 00:00:28,340 We want a user to enter some text into that input and as they do we're going to print out whatever the 10 00:00:28,340 --> 00:00:31,900 user types character by character as the user types it. 11 00:00:31,910 --> 00:00:37,970 So for example if I type in s I should then instantly see your name as s appear right there. 12 00:00:37,970 --> 00:00:43,040 And when I add in the character T I should see t up here right away and all the way through until I 13 00:00:43,040 --> 00:00:47,000 eventually finish my entire name. 14 00:00:47,080 --> 00:00:48,610 Well like so. 15 00:00:48,670 --> 00:00:52,440 So this might look like a really simple application and in truth it really is. 16 00:00:52,520 --> 00:00:57,860 But you're going to find that there's one kind of weird thing around handling text inputs with react. 17 00:00:57,860 --> 00:01:00,720 It's one thing that just takes a little bit of understanding to get used to. 18 00:01:00,800 --> 00:01:03,660 But at the end of the day the code around it is not that bad. 19 00:01:03,680 --> 00:01:06,140 It's just a kind of conceptual thing. 20 00:01:06,140 --> 00:01:06,440 All right. 21 00:01:06,460 --> 00:01:10,400 So let's get started with this application by going through our usual process. 22 00:01:10,640 --> 00:01:13,380 We're going to create a new screen inside of our screens directory. 23 00:01:13,430 --> 00:01:17,470 Why are that up to our app dot J.S. file and then add a button to our home screen. 24 00:01:17,540 --> 00:01:23,390 So right away let's get to it inside my screen directory I'll create a new file called text screen not 25 00:01:23,420 --> 00:01:32,690 J.S. but there are some boilerplate inside of your so import react from react import view text style 26 00:01:32,780 --> 00:01:36,000 sheet from react native. 27 00:01:36,180 --> 00:01:41,060 Well then do our text screen component. 28 00:01:41,280 --> 00:01:45,300 I'll do an export default text screen at the bottom. 29 00:01:45,420 --> 00:01:46,870 Let's not forget that style sheet. 30 00:01:46,890 --> 00:01:53,870 You count styles is style sheet create an inside of our component let's just so show something right 31 00:01:53,870 --> 00:01:54,140 now. 32 00:01:54,140 --> 00:01:58,600 How about just a view with a text element inside there. 33 00:02:02,340 --> 00:02:05,000 And right now I'll give it the text text screen. 34 00:02:05,040 --> 00:02:06,770 Very good. 35 00:02:06,840 --> 00:02:07,140 All right. 36 00:02:07,140 --> 00:02:08,660 So again just the usual boilerplate. 37 00:02:08,670 --> 00:02:10,350 Nothing crazy here. 38 00:02:10,480 --> 00:02:15,270 So let's save this and then we'll hook this up to our laptop J.S. file and then add our button to the 39 00:02:15,270 --> 00:02:20,340 home screen so I'll find out what J.S. here it is at the top. 40 00:02:20,340 --> 00:02:32,440 I will import text screen from source screens text screen and then I'll wire up that up to my routing 41 00:02:32,440 --> 00:02:33,610 object right here. 42 00:02:33,610 --> 00:02:40,190 So I'll add on text for text screen. 43 00:02:40,250 --> 00:02:45,640 We'll save that file and then finally go over to our home screen and once again down at the very bottom 44 00:02:45,640 --> 00:02:53,420 after all these buttons will add in one less button I'll change the text or the title on it to go to 45 00:02:53,420 --> 00:02:55,030 text demo. 46 00:02:55,310 --> 00:02:58,900 And of course we'll change the navigate call as well to navigate. 47 00:02:58,940 --> 00:03:05,840 Text again so we can save this will make sure all of our different files that we just changed are saved 48 00:03:06,500 --> 00:03:08,560 and we can flip back over to our device. 49 00:03:08,610 --> 00:03:10,070 There is my text demo button. 50 00:03:10,070 --> 00:03:12,160 I'll tap it and I'm at my tech screen. 51 00:03:12,170 --> 00:03:13,460 Very good. 52 00:03:13,460 --> 00:03:13,640 All right. 53 00:03:13,650 --> 00:03:17,300 So let's take a quick pause right here when we come back the next video will write out some code inside 54 00:03:17,300 --> 00:03:21,230 of our tech screen and get a better idea of how to show a text input to a user.