1 00:00:01,110 --> 00:00:04,720 In this video we're going to kick off one last example around St.. 2 00:00:04,740 --> 00:00:08,500 This application is going to kind of combine a couple other things we've already worked on. 3 00:00:08,510 --> 00:00:12,180 On this course it's definitely going to be a little bit more complicated than the last two examples 4 00:00:12,180 --> 00:00:12,850 we worked on. 5 00:00:12,960 --> 00:00:14,110 So let's get to it. 6 00:00:14,690 --> 00:00:14,930 OK. 7 00:00:14,970 --> 00:00:19,320 So we're still going to do another example that's kind of focused on colors but this time has definitely 8 00:00:19,330 --> 00:00:21,660 like I said a little bit more complexity. 9 00:00:21,810 --> 00:00:26,730 So in this case we're going to have three different sets of buttons one set of buttons the first ones 10 00:00:26,730 --> 00:00:32,610 right here are going to control how much red or not red we're gonna show on some new element down here 11 00:00:32,610 --> 00:00:39,060 at the very bottom whilst have a set of buttons to control how green it is and how blue it is as well. 12 00:00:39,060 --> 00:00:42,380 So we're going to have a red a green in a blue. 13 00:00:42,420 --> 00:00:47,760 We're going to essentially combine all these different values together to form an our G.B. string to 14 00:00:47,760 --> 00:00:49,920 apply to that view element right there. 15 00:00:49,920 --> 00:00:54,990 So in this case as opposed to having a bunch of different squares just one square we're going to change 16 00:00:54,990 --> 00:01:00,750 the value of it based upon how many times the user taps on these different buttons right away. 17 00:01:00,760 --> 00:01:06,190 You're going to notice that this set of elements right here like that label and those two buttons and 18 00:01:06,190 --> 00:01:08,680 this one and these right here. 19 00:01:08,800 --> 00:01:13,900 Well they all look very similar with some just very slightly different words on them like the first 20 00:01:13,900 --> 00:01:17,140 one is red and the next one is green and then blue. 21 00:01:17,150 --> 00:01:22,420 So this might be another opportunity where we can make a reusable component and in doing so we're probably 22 00:01:22,430 --> 00:01:28,060 have to figure out how we can somehow get reusable components to work with state and props at the same 23 00:01:28,060 --> 00:01:28,830 time. 24 00:01:28,840 --> 00:01:33,480 So like I said perhaps is going to be a little bit more complicated. 25 00:01:33,530 --> 00:01:36,830 All right let's answer these three questions once again because they're going to be slightly different 26 00:01:36,830 --> 00:01:38,170 this time around. 27 00:01:38,180 --> 00:01:41,730 So first off what piece of data is changing in our app. 28 00:01:41,960 --> 00:01:46,660 You might think that we're going to have just like a single string a RG value. 29 00:01:46,820 --> 00:01:52,490 Well we could do that but a much easier way to deal with this would you have been to have three separate 30 00:01:52,520 --> 00:01:54,330 different pieces of state. 31 00:01:54,440 --> 00:01:59,630 We could have one piece of state called red and that would be essentially a counter that goes up and 32 00:01:59,630 --> 00:02:00,220 down. 33 00:02:00,350 --> 00:02:06,050 It would be a single number between 0 and 255 and I would track the amount of red we have. 34 00:02:06,050 --> 00:02:11,270 We could then also have a second piece of state very similar between 0 and 255. 35 00:02:11,300 --> 00:02:18,590 It would track the amount of green and then a third piece of state that would be blue what type of data 36 00:02:18,620 --> 00:02:19,160 are these. 37 00:02:19,310 --> 00:02:22,020 Well once again they're going to be numbers. 38 00:02:22,070 --> 00:02:24,890 And then finally what are their starting values going to be. 39 00:02:24,890 --> 00:02:29,360 Well in each case we could either maybe randomly generate them or maybe we'd just start them off as 40 00:02:29,420 --> 00:02:36,640 0 or 255 so that the square here is black but we could figure that out in due time so big challenges 41 00:02:36,640 --> 00:02:39,750 inside this application rather than just one piece of state. 42 00:02:39,790 --> 00:02:42,130 We're going to have three different pieces of state. 43 00:02:42,160 --> 00:02:47,860 In addition we're going to kind of coordinate how these pieces of state change on these child components 44 00:02:47,920 --> 00:02:50,630 as well before we take a break. 45 00:02:50,630 --> 00:02:55,960 Let's go through all this boilerplate setup that we have to go through every time so inside my screens 46 00:02:55,960 --> 00:02:59,050 directory I'm going to make a new screen I'm going to call this. 47 00:02:59,050 --> 00:03:06,080 How about square screen dot J.S. because we're just showing one color square then at the top I'm going 48 00:03:06,080 --> 00:03:08,710 to import react from react. 49 00:03:08,890 --> 00:03:14,110 We'll get our view and how about some text and style sheet. 50 00:03:14,110 --> 00:03:15,950 We'll see how many of those we actually need. 51 00:03:16,150 --> 00:03:17,560 But it's a good place to get started. 52 00:03:18,430 --> 00:03:20,700 I'll then make my square screen 53 00:03:23,560 --> 00:03:24,100 from here. 54 00:03:24,100 --> 00:03:33,290 I'm going to return just a piece of text for now that says square screen all then loop my style sheet 55 00:03:33,320 --> 00:03:39,050 so I'll do con styles is style sheet to create with an empty object and we'll do our export default 56 00:03:39,650 --> 00:03:43,150 of square screen OK. 57 00:03:43,190 --> 00:03:46,080 Looks like a good place to get started so let's save this. 58 00:03:46,100 --> 00:03:56,760 We'll go back to our apt j ust file here's our DOT J.S. as usual I'm going to import square screen from 59 00:03:56,760 --> 00:03:58,800 these source screens directory 60 00:04:01,930 --> 00:04:10,740 and I'll add it into my list of possible routes here so I'll get squared is square screen and then finally 61 00:04:10,750 --> 00:04:16,280 very last step let's make sure we open up that home screen here's the home screen right here I'm going 62 00:04:16,280 --> 00:04:17,760 to copy 1 These buttons again 63 00:04:21,750 --> 00:04:28,700 I'll change the name go to a square demo and we'll change the navigate function as well to square all 64 00:04:28,700 --> 00:04:33,560 right let's do a quick test here so I'll refresh I'll go to Square demo and there we go. 65 00:04:33,560 --> 00:04:35,030 Very good. 66 00:04:35,030 --> 00:04:35,290 All right. 67 00:04:35,300 --> 00:04:40,100 So quick pause right here when we come back the next video we'll start working on our square screen 68 00:04:40,250 --> 00:04:42,170 screen so I'll see you in just a minute.