1 00:00:00,000 --> 00:00:02,495 [MUSIC PLAYING] 2 00:00:02,495 --> 00:00:16,480 3 00:00:16,480 --> 00:00:20,324 SPEAKER 1: Hello and welcome for Lecture 3 in React Native. 4 00:00:20,324 --> 00:00:22,990 So previous lecture we talked about a bunch of different topics; 5 00:00:22,990 --> 00:00:27,220 one being classes and how ES6 allows you to write classes. 6 00:00:27,220 --> 00:00:29,950 React, we talked about the library by Facebook 7 00:00:29,950 --> 00:00:32,259 that allows you to write declarative programming. 8 00:00:32,259 --> 00:00:35,980 We talked about what imperative and declarative programming were 9 00:00:35,980 --> 00:00:38,380 and how React allows you to write declaratively. 10 00:00:38,380 --> 00:00:40,930 We talked about props, which are basically an object that 11 00:00:40,930 --> 00:00:42,640 are passed down to elements. 12 00:00:42,640 --> 00:00:48,730 We talked about state, which is a management system for allowing you 13 00:00:48,730 --> 00:00:51,790 to track state in a class component. 14 00:00:51,790 --> 00:00:55,360 We implemented the to do app in React and then we teased at something 15 00:00:55,360 --> 00:00:57,070 called React Native. 16 00:00:57,070 --> 00:00:59,800 And so this lecture we'll be talking a lot about React Native. 17 00:00:59,800 --> 00:01:02,800 React Native is a framework that relies on React Core. 18 00:01:02,800 --> 00:01:07,590 And so a lot of the paradigms that apply to React also apply to React Native. 19 00:01:07,590 --> 00:01:11,350 And it allows us to build mobile apps using only JavaScript. 20 00:01:11,350 --> 00:01:15,490 And so, as the React team like to say when this was released, 21 00:01:15,490 --> 00:01:19,600 you can learn once and write everywhere. 22 00:01:19,600 --> 00:01:21,910 And so React Native supports iOS and Android, 23 00:01:21,910 --> 00:01:26,530 and we'll see later today how we get that going. 24 00:01:26,530 --> 00:01:28,520 And so how exactly does this work? 25 00:01:28,520 --> 00:01:33,370 How are we allowed to write JavaScript and have it run on mobile devices? 26 00:01:33,370 --> 00:01:34,870 So first, the JavaScript is bundled. 27 00:01:34,870 --> 00:01:39,040 So, just like in React, what happens are a couple of different steps 28 00:01:39,040 --> 00:01:44,650 where your JavaScript is transpilaged so going from ES6, ES7, ES-next, 29 00:01:44,650 --> 00:01:48,300 down to ES5 code, and it's also minified. 30 00:01:48,300 --> 00:01:51,160 And so throughout the process you go from a bunch of different files 31 00:01:51,160 --> 00:01:54,970 all to one big JavaScript bundle. 32 00:01:54,970 --> 00:01:56,297 This runs on your phone. 33 00:01:56,297 --> 00:01:58,630 There are separate threads for UI layout and JavaScript. 34 00:01:58,630 --> 00:02:01,360 And so, as we saw, if we're running JavaScript in the browser 35 00:02:01,360 --> 00:02:04,259 and that locks up, then nothing works. 36 00:02:04,259 --> 00:02:06,550 But in React Native there are actually separate threads 37 00:02:06,550 --> 00:02:08,500 for the UI layout and JavaScript. 38 00:02:08,500 --> 00:02:11,950 39 00:02:11,950 --> 00:02:17,390 And these different threads communicate asynchronously through a bridge. 40 00:02:17,390 --> 00:02:19,570 And so the JavaScript thread will request 41 00:02:19,570 --> 00:02:24,020 UI elements to be shown and then, like I alluded to earlier, 42 00:02:24,020 --> 00:02:26,940 the JavaScript thread can be blocked and the UI still works. 43 00:02:26,940 --> 00:02:30,800 And so what do I mean by this bridge? 44 00:02:30,800 --> 00:02:33,940 And so what ends up happening is there are separate threads. 45 00:02:33,940 --> 00:02:39,215 So there's one thread for the UI and there's one thread for JavaScript. 46 00:02:39,215 --> 00:02:42,540 47 00:02:42,540 --> 00:02:49,970 And so say we're writing React and we have something like a button 48 00:02:49,970 --> 00:02:51,940 that we want to be shown. 49 00:02:51,940 --> 00:02:59,500 Basically what happens is there's this bridge which will 50 00:02:59,500 --> 00:03:01,090 communicate between these two threads. 51 00:03:01,090 --> 00:03:03,200 And so the JavaScript will basically say, 52 00:03:03,200 --> 00:03:07,690 hey UI thread I want a view or a button. 53 00:03:07,690 --> 00:03:14,400 54 00:03:14,400 --> 00:03:18,597 And then UI will basically say, OK here it is a button. 55 00:03:18,597 --> 00:03:20,430 And then if I, as a user, go ahead and press 56 00:03:20,430 --> 00:03:24,857 that the UI will actually send over to the JavaScript, 57 00:03:24,857 --> 00:03:25,940 oh the button was pressed. 58 00:03:25,940 --> 00:03:34,320 59 00:03:34,320 --> 00:03:36,960 And so this bridge here is asynchronous, so 60 00:03:36,960 --> 00:03:39,900 if something happens on the JavaScript and the JavaScript is actually 61 00:03:39,900 --> 00:03:43,080 clogged and blocking, the UI thread can still do its thing 62 00:03:43,080 --> 00:03:45,700 and I'll show you an example of that in a second. 63 00:03:45,700 --> 00:03:49,950 And, conversely, when you touch something on the UI 64 00:03:49,950 --> 00:03:53,680 the JavaScript doesn't know until the bridge basically says, 65 00:03:53,680 --> 00:03:58,140 hey, this button was pressed and the UI can talk to the JavaScript that way. 66 00:03:58,140 --> 00:04:02,970 And so let's see some example where we can lock up that JavaScript thread 67 00:04:02,970 --> 00:04:06,210 and not have the UI lock up. 68 00:04:06,210 --> 00:04:11,700 And so here we are in the Snack, snack.expo.io, 69 00:04:11,700 --> 00:04:16,620 and this allows us to run React Native and have it all happen in the browser. 70 00:04:16,620 --> 00:04:23,024 And so a few lectures ago we wrote this blocking method that basically locks up 71 00:04:23,024 --> 00:04:23,940 the JavaScript thread. 72 00:04:23,940 --> 00:04:25,550 So we can go ahead and do that again. 73 00:04:25,550 --> 00:04:29,880 So say we have a method called block JavaScript. 74 00:04:29,880 --> 00:04:39,280 And what that does is you can say, we're going to block and then do this thing, 75 00:04:39,280 --> 00:04:48,960 so while date.now so we can say, cons done is five seconds from now. 76 00:04:48,960 --> 00:04:53,900 77 00:04:53,900 --> 00:04:59,210 And we can say, while it has not been that much time just do nothing. 78 00:04:59,210 --> 00:05:02,904 79 00:05:02,904 --> 00:05:05,070 And then when that's done we can say, OK we're done. 80 00:05:05,070 --> 00:05:10,780 81 00:05:10,780 --> 00:05:13,850 And so down here, let's actually create a scroll view-- 82 00:05:13,850 --> 00:05:15,350 we'll see what that is in a second-- 83 00:05:15,350 --> 00:05:20,239 84 00:05:20,239 --> 00:05:20,780 and a button. 85 00:05:20,780 --> 00:05:28,999 86 00:05:28,999 --> 00:05:31,290 And we actually don't care about any of all that stuff. 87 00:05:31,290 --> 00:05:41,691 88 00:05:41,691 --> 00:05:43,440 And so, when this button is clicked, we're 89 00:05:43,440 --> 00:05:45,340 going to go ahead and block that JavaScript. 90 00:05:45,340 --> 00:05:56,610 91 00:05:56,610 --> 00:05:57,590 All right. 92 00:05:57,590 --> 00:06:01,520 93 00:06:01,520 --> 00:06:02,520 So everybody following? 94 00:06:02,520 --> 00:06:07,350 So, so far we have a scroll view which is basically just a view that 95 00:06:07,350 --> 00:06:09,430 can scroll back and forth. 96 00:06:09,430 --> 00:06:13,380 We have a button that says block JavaScript, and when it's clicked, 97 00:06:13,380 --> 00:06:16,755 it will run this function that blocks the JavaScript. 98 00:06:16,755 --> 00:06:20,010 And so watch what happens when I click this button. 99 00:06:20,010 --> 00:06:31,240 100 00:06:31,240 --> 00:06:32,230 Small bug. 101 00:06:32,230 --> 00:06:38,437 102 00:06:38,437 --> 00:06:39,520 All right here's a chance. 103 00:06:39,520 --> 00:06:40,394 Who can spot the bug? 104 00:06:40,394 --> 00:06:47,000 105 00:06:47,000 --> 00:06:49,710 Oh, on press. 106 00:06:49,710 --> 00:06:52,170 So on press, it will actually block the JavaScript. 107 00:06:52,170 --> 00:06:56,430 And you see how it still is scrolling, but that button is locked up. 108 00:06:56,430 --> 00:07:01,110 And then only after five seconds have passed do the logs come through 109 00:07:01,110 --> 00:07:04,260 and then the button returns to its normal state. 110 00:07:04,260 --> 00:07:06,562 But notice how when it was stuck and locked, 111 00:07:06,562 --> 00:07:08,520 when the JavaScript thread was locked, we still 112 00:07:08,520 --> 00:07:11,370 had the ability to scroll back and forth. 113 00:07:11,370 --> 00:07:14,490 That's because all of the JavaScript is controlled on one thread 114 00:07:14,490 --> 00:07:19,390 whereas on the other thread all of the UI elements still worked as intended. 115 00:07:19,390 --> 00:07:21,900 And so even though the JavaScript thread was locked up here, 116 00:07:21,900 --> 00:07:25,950 it was in this while loop doing nothing, the UI elements 117 00:07:25,950 --> 00:07:28,810 were still able to scroll back and forth. 118 00:07:28,810 --> 00:07:32,400 And so it's not as big of a deal if you lock up 119 00:07:32,400 --> 00:07:35,850 the JavaScript thread in React Native but it's still a big deal 120 00:07:35,850 --> 00:07:39,720 because none of your event handlers will fire. 121 00:07:39,720 --> 00:07:42,750 122 00:07:42,750 --> 00:07:48,200 So any questions about how React Native works, how these UI and JavaScript 123 00:07:48,200 --> 00:07:51,200 threads run separately in the bridge? 124 00:07:51,200 --> 00:07:53,060 Great. 125 00:07:53,060 --> 00:07:56,210 And so what are some of the differences between React Native and React Web 126 00:07:56,210 --> 00:07:58,367 which we've been talking about thus far? 127 00:07:58,367 --> 00:08:00,200 So there are differences in base components. 128 00:08:00,200 --> 00:08:03,830 So as you saw in my quick example, things like scroll view or capital 129 00:08:03,830 --> 00:08:06,035 button do not exist in web. 130 00:08:06,035 --> 00:08:08,160 Things like style, the way that you style elements, 131 00:08:08,160 --> 00:08:11,390 is slightly different in React Native and you don't actually 132 00:08:11,390 --> 00:08:14,180 have browser APIs anymore. 133 00:08:14,180 --> 00:08:18,350 So things like CSS, animations, canvas, SVG, things like that 134 00:08:18,350 --> 00:08:20,817 don't actually exist in React Native. 135 00:08:20,817 --> 00:08:23,150 But there are actually things that have been polyfilled. 136 00:08:23,150 --> 00:08:30,050 So polyfilled is a term that people use to mean some methods or functions that 137 00:08:30,050 --> 00:08:34,020 might exist in one environment do not necessarily exist in all environments. 138 00:08:34,020 --> 00:08:37,940 And by polyfilling these we can actually implement them such 139 00:08:37,940 --> 00:08:39,970 that all environments will actually have these. 140 00:08:39,970 --> 00:08:44,169 And so fetch is something that's not supported by all browsers, 141 00:08:44,169 --> 00:08:47,060 but by polyfilling it you can actually include 142 00:08:47,060 --> 00:08:49,940 code that will implement fetch if it doesn't exist already. 143 00:08:49,940 --> 00:08:56,180 And so things like fetch timers like set interval or console or console.log, 144 00:08:56,180 --> 00:09:00,175 console.warn, and stuff like that have been polyfilled so 145 00:09:00,175 --> 00:09:04,319 that they work in React Native as well. 146 00:09:04,319 --> 00:09:06,110 And also the way that you handle navigation 147 00:09:06,110 --> 00:09:08,109 is slightly different in React Native, and we'll 148 00:09:08,109 --> 00:09:10,102 talk about that in a future lecture. 149 00:09:10,102 --> 00:09:13,060 And so I said that React Native base components are slightly different. 150 00:09:13,060 --> 00:09:15,870 And so what do I mean there? 151 00:09:15,870 --> 00:09:20,690 So in React Web we had access to things like div or span or P image, 152 00:09:20,690 --> 00:09:23,530 and we can just declare those globally. 153 00:09:23,530 --> 00:09:28,130 But in React Native we actually have to import from the React Native library, 154 00:09:28,130 --> 00:09:30,770 and we'll see how to do that in a little bit. 155 00:09:30,770 --> 00:09:33,610 And so divs no longer exist and what we use instead are Views. 156 00:09:33,610 --> 00:09:41,190 So View with a capital V is basically a cross-platform, just blank E-Y slate. 157 00:09:41,190 --> 00:09:44,360 So basically the same thing as a div. 158 00:09:44,360 --> 00:09:46,670 There's no such thing as span or P anymore 159 00:09:46,670 --> 00:09:48,557 and so instead we use this text. 160 00:09:48,557 --> 00:09:51,140 And so what's unique in React Native is that all text actually 161 00:09:51,140 --> 00:09:54,830 must be wrapped by this text tag. 162 00:09:54,830 --> 00:09:57,350 As you saw in this previous example lower case button 163 00:09:57,350 --> 00:09:58,800 doesn't exist anymore. 164 00:09:58,800 --> 00:10:01,610 Instead, we use capitol Button with a slightly different API. 165 00:10:01,610 --> 00:10:05,270 And so from React Web, if you want to attach a handler to that 166 00:10:05,270 --> 00:10:06,470 you do on click. 167 00:10:06,470 --> 00:10:10,250 Whereas, in React Native, you do on press which was actually 168 00:10:10,250 --> 00:10:13,100 the bug in the code earlier. 169 00:10:13,100 --> 00:10:16,970 And lastly we have these things called scroll views or lists which 170 00:10:16,970 --> 00:10:22,790 don't really exist in web world, but they do exist a lot in React Native, 171 00:10:22,790 --> 00:10:25,642 and we'll be talking about those in the future as well. 172 00:10:25,642 --> 00:10:27,600 Of course there are many, many other components 173 00:10:27,600 --> 00:10:31,440 and, if you want to explore them, the documentation is really good. 174 00:10:31,440 --> 00:10:34,520 175 00:10:34,520 --> 00:10:36,560 Cool, so let's actually take that example 176 00:10:36,560 --> 00:10:39,920 that we wrote last lecture, the to do app, and actually 177 00:10:39,920 --> 00:10:42,040 translate it into React Native. 178 00:10:42,040 --> 00:10:48,860 And so I have here this implementation, which is exactly the code 179 00:10:48,860 --> 00:10:50,484 that we wrote in the previous lecture. 180 00:10:50,484 --> 00:10:53,150 And what we're going to do is copy and paste that into the Snack 181 00:10:53,150 --> 00:10:56,330 that we saw earlier and go ahead and translate that into React Native. 182 00:10:56,330 --> 00:11:01,670 183 00:11:01,670 --> 00:11:06,410 So this is just the command to copy it and let's actually 184 00:11:06,410 --> 00:11:09,560 paste that into here. 185 00:11:09,560 --> 00:11:12,830 So of course there's going to be many errors just because this is React Web 186 00:11:12,830 --> 00:11:15,050 and we're trying to run this in React Native. 187 00:11:15,050 --> 00:11:18,320 And so let's go ahead and try to fix those errors. 188 00:11:18,320 --> 00:11:23,030 And so first we see stuff like LI, input, button, and those 189 00:11:23,030 --> 00:11:24,350 don't exist in React Native. 190 00:11:24,350 --> 00:11:27,800 And so we'll have to first replace those React Web 191 00:11:27,800 --> 00:11:31,650 components with React Native ones. 192 00:11:31,650 --> 00:11:33,905 And so this rendering does not exist anymore. 193 00:11:33,905 --> 00:11:40,280 And so let's first do import some stuff from React Native. 194 00:11:40,280 --> 00:11:44,100 And we'll be talking about imports and exports a little bit later, 195 00:11:44,100 --> 00:11:45,830 but just bear with me for now. 196 00:11:45,830 --> 00:11:48,990 And so some things that we're going to need are stuff like View, 197 00:11:48,990 --> 00:11:51,710 we'll need a Button and we'll need text. 198 00:11:51,710 --> 00:11:55,880 199 00:11:55,880 --> 00:12:00,590 And we'll need some scrolling views and then maybe 200 00:12:00,590 --> 00:12:02,660 some more stuff in a little bit. 201 00:12:02,660 --> 00:12:06,020 So first let's work on that quick to do component. 202 00:12:06,020 --> 00:12:09,170 And so we have a list item here, instead let's actually use a View. 203 00:12:09,170 --> 00:12:14,200 204 00:12:14,200 --> 00:12:18,550 Let's actually get rid of this input for now, and we'll add that in a little bit 205 00:12:18,550 --> 00:12:19,600 later. 206 00:12:19,600 --> 00:12:23,936 But how are we going to change this lowercase button to React Native? 207 00:12:23,936 --> 00:12:26,560 Well first we need to replace it with the capital Button, which 208 00:12:26,560 --> 00:12:28,734 is React Natives version of the button. 209 00:12:28,734 --> 00:12:31,150 It no longer has an on click property and so instead we'll 210 00:12:31,150 --> 00:12:37,840 pass an on press prop and then we don't actually wrap the content any more 211 00:12:37,840 --> 00:12:40,320 instead we pass a title prop. 212 00:12:40,320 --> 00:12:43,026 213 00:12:43,026 --> 00:12:44,900 And so that button's done. 214 00:12:44,900 --> 00:12:46,630 What are we going to do for span? 215 00:12:46,630 --> 00:12:48,166 Anyone? 216 00:12:48,166 --> 00:12:49,040 AUDIENCE: [INAUDIBLE] 217 00:12:49,040 --> 00:12:50,789 SPEAKER 1: Yeah, we'll use a text instead. 218 00:12:50,789 --> 00:12:53,410 219 00:12:53,410 --> 00:12:56,140 And now our to do is done. 220 00:12:56,140 --> 00:12:59,341 So now let's start looking into this app component. 221 00:12:59,341 --> 00:13:02,170 222 00:13:02,170 --> 00:13:08,110 So first let's get rid of this render, which does not exist in React Native, 223 00:13:08,110 --> 00:13:11,590 and let's start working our way through this big return function here. 224 00:13:11,590 --> 00:13:12,820 So first we have a div. 225 00:13:12,820 --> 00:13:15,070 Instead of a div let's go ahead and use a View. 226 00:13:15,070 --> 00:13:18,639 227 00:13:18,639 --> 00:13:19,930 And then we have a to do count. 228 00:13:19,930 --> 00:13:23,200 So what are we going to use instead of this div? 229 00:13:23,200 --> 00:13:25,060 We can't use a View otherwise an error will 230 00:13:25,060 --> 00:13:28,690 be thrown because remember the only way that we can include text 231 00:13:28,690 --> 00:13:34,611 in React Native is by wrapping it in this text component and same thing 232 00:13:34,611 --> 00:13:35,110 with this. 233 00:13:35,110 --> 00:13:37,924 234 00:13:37,924 --> 00:13:40,590 All right, we see another button and we've seen a button before, 235 00:13:40,590 --> 00:13:44,090 so all we have to do is replace that lowercase b with a capital B, 236 00:13:44,090 --> 00:13:48,585 change on click to on press and change the content to be title. 237 00:13:48,585 --> 00:13:55,007 238 00:13:55,007 --> 00:13:56,090 And then we're done there. 239 00:13:56,090 --> 00:14:01,390 240 00:14:01,390 --> 00:14:03,680 All right, UL, unordered lists. 241 00:14:03,680 --> 00:14:09,030 So how might we handle this unordered list in React Native? 242 00:14:09,030 --> 00:14:13,180 So lists, ULs and ordered lists don't actually 243 00:14:13,180 --> 00:14:16,070 exist in React Native, and the way that we handled those instead 244 00:14:16,070 --> 00:14:22,885 are by using the scrolling components because we don't know 245 00:14:22,885 --> 00:14:25,010 how long that list is going to get and so we better 246 00:14:25,010 --> 00:14:27,080 assume it's going to get pretty long and be able to scroll through them 247 00:14:27,080 --> 00:14:28,390 if we needed. 248 00:14:28,390 --> 00:14:32,570 And so unordered lists we replace with scroll view 249 00:14:32,570 --> 00:14:35,580 and now we have what we were looking for. 250 00:14:35,580 --> 00:14:39,460 So all of the React Native components, the React components sorry, 251 00:14:39,460 --> 00:14:42,848 we've changed to React Native components and now we have-- 252 00:14:42,848 --> 00:14:45,170 Oops, something's breaking still. 253 00:14:45,170 --> 00:14:50,420 254 00:14:50,420 --> 00:14:54,320 Prompt is another one of those browser APIs 255 00:14:54,320 --> 00:14:57,020 that just does not exist in the React Native world which 256 00:14:57,020 --> 00:14:58,410 caused our code to crash. 257 00:14:58,410 --> 00:15:01,370 And so rather than using one of these browser 258 00:15:01,370 --> 00:15:04,580 APIs let's just replace it with some hard coded text for now, 259 00:15:04,580 --> 00:15:12,730 maybe something like to do, number, and then whatever it's ID is. 260 00:15:12,730 --> 00:15:16,511 261 00:15:16,511 --> 00:15:18,260 And rather than incrementing ID down there 262 00:15:18,260 --> 00:15:19,760 let's actually increment it up here. 263 00:15:19,760 --> 00:15:22,510 264 00:15:22,510 --> 00:15:23,660 And so now it works. 265 00:15:23,660 --> 00:15:26,080 So we have to do number one, to do number two 266 00:15:26,080 --> 00:15:29,390 and you can see how we add those. 267 00:15:29,390 --> 00:15:31,490 And so we'll fix the style in the future, 268 00:15:31,490 --> 00:15:34,130 but basically does anybody have questions 269 00:15:34,130 --> 00:15:37,520 on going from React Web to React Native? 270 00:15:37,520 --> 00:15:40,880 What we did there was just replace all the React Web components 271 00:15:40,880 --> 00:15:42,770 with the React Native components. 272 00:15:42,770 --> 00:15:47,290 And it is almost as easy as command effing and replacing like that. 273 00:15:47,290 --> 00:15:51,291 274 00:15:51,291 --> 00:15:51,790 Great. 275 00:15:51,790 --> 00:15:55,060 And so how are you going to go about styling those components? 276 00:15:55,060 --> 00:15:57,960 So in React Web the way we did that was just 277 00:15:57,960 --> 00:16:01,850 by adding a class name and then styling in CSS, but in React Native 278 00:16:01,850 --> 00:16:05,342 we don't have this concept of CSS. 279 00:16:05,342 --> 00:16:07,050 So the way that React Native handles that 280 00:16:07,050 --> 00:16:10,380 is by actually using JavaScript objects for styling and what that gives us 281 00:16:10,380 --> 00:16:14,490 is the ability to use dynamic styles. 282 00:16:14,490 --> 00:16:17,840 Object keys in these objects are based on CSS properties, 283 00:16:17,840 --> 00:16:23,566 so we have stuff like margin top, margin bottom, margin padding. 284 00:16:23,566 --> 00:16:25,440 And the layout system that we used is Flexbox 285 00:16:25,440 --> 00:16:27,856 and so, if you're familiar with the Flexbox system in web, 286 00:16:27,856 --> 00:16:30,960 it's almost exactly the same in React Native. 287 00:16:30,960 --> 00:16:34,020 One of the key differences is that rather than 288 00:16:34,020 --> 00:16:41,500 defaulting to row we default to laying out things in columns. 289 00:16:41,500 --> 00:16:45,020 So, in React Web, we have this concept of pixels or percentages, 290 00:16:45,020 --> 00:16:49,380 but in React Native we actually use unit-less numbers for length. 291 00:16:49,380 --> 00:16:52,860 Which is good because there are so many different devices 292 00:16:52,860 --> 00:16:55,050 that this runs on with different pixel densities 293 00:16:55,050 --> 00:16:59,230 that having a unit-less number allows us to abstract that pixel density out. 294 00:16:59,230 --> 00:17:02,520 295 00:17:02,520 --> 00:17:06,240 The style prop, so the way that you style a given component 296 00:17:06,240 --> 00:17:10,130 is by assigning that JavaScript object to a style prop 297 00:17:10,130 --> 00:17:12,000 and it can actually take an array of styles. 298 00:17:12,000 --> 00:17:15,780 And so, if you wanted to have a bunch of different class names in React Web 299 00:17:15,780 --> 00:17:19,380 you'd just start adding those with a space in between. 300 00:17:19,380 --> 00:17:22,455 But in React Native you handled that by passing an array of styles. 301 00:17:22,455 --> 00:17:25,109 302 00:17:25,109 --> 00:17:32,230 So let's go ahead and add styles to this app that we have here. 303 00:17:32,230 --> 00:17:34,470 So first, let's go ahead and style this view. 304 00:17:34,470 --> 00:17:40,740 And so right now, as you see, each to do has a Delete button and a 305 00:17:40,740 --> 00:17:44,980 to do right under it, whereas in web we had the Delete button next to that 306 00:17:44,980 --> 00:17:45,480 to do. 307 00:17:45,480 --> 00:17:47,800 And so let's try to figure out exactly how we 308 00:17:47,800 --> 00:17:52,500 can get that Delete button over here and the to do to be next to it. 309 00:17:52,500 --> 00:17:57,090 And so does anybody have any ideas about how we might want to do that? 310 00:17:57,090 --> 00:17:59,520 We know we're going to have to pass a style prop, 311 00:17:59,520 --> 00:18:02,970 and we know that it's going to be an object. 312 00:18:02,970 --> 00:18:05,430 And so this looks weird to have those double curlies 313 00:18:05,430 --> 00:18:08,130 but the outer curlies mean, hey here comes 314 00:18:08,130 --> 00:18:11,190 some JavaScript and the inner curlies are just an object 315 00:18:11,190 --> 00:18:14,070 literal like we've seen before. 316 00:18:14,070 --> 00:18:17,680 And so how might we get those to dos to be in a row? 317 00:18:17,680 --> 00:18:20,350 318 00:18:20,350 --> 00:18:27,160 So we saw before that React Native uses Flexbox in order to handle it's layout. 319 00:18:27,160 --> 00:18:33,790 And so we can just say, hey we want the flex direction, rather than being 320 00:18:33,790 --> 00:18:36,608 column by default, let's set it to row. 321 00:18:36,608 --> 00:18:39,420 322 00:18:39,420 --> 00:18:44,610 And so now we have the Delete button next to the to do. 323 00:18:44,610 --> 00:18:50,380 But it's annoying me a little bit how that button is slightly below the text. 324 00:18:50,380 --> 00:18:55,740 And so how might we get those items to be aligned to center? 325 00:18:55,740 --> 00:19:01,860 Well in Flexbox we have this thing called align items 326 00:19:01,860 --> 00:19:05,520 and then you just say, hey align those to be center. 327 00:19:05,520 --> 00:19:07,790 Then all of a sudden we have it aligned center. 328 00:19:07,790 --> 00:19:11,550 329 00:19:11,550 --> 00:19:15,391 And just confirming that delete button does indeed work. 330 00:19:15,391 --> 00:19:15,890 Great. 331 00:19:15,890 --> 00:19:19,340 Anybody notice any other bad style bugs over here? 332 00:19:19,340 --> 00:19:21,890 333 00:19:21,890 --> 00:19:25,140 So look at this. 334 00:19:25,140 --> 00:19:30,860 So most phones will have some nav bar, and that nav bar 335 00:19:30,860 --> 00:19:34,730 will have stuff like if you're connected to Wi-Fi, the time and etc. 336 00:19:34,730 --> 00:19:38,680 But that first view is actually going all the way to the top. 337 00:19:38,680 --> 00:19:42,140 And so how might we get all this content to be slightly moved down? 338 00:19:42,140 --> 00:19:46,290 339 00:19:46,290 --> 00:19:49,040 So how would we do that in Web? 340 00:19:49,040 --> 00:19:51,020 AUDIENCE: Add a margin. 341 00:19:51,020 --> 00:19:53,770 SPEAKER 1: Yeah we would add a margin or some padding or something 342 00:19:53,770 --> 00:19:57,860 to move the content from the top slightly down. 343 00:19:57,860 --> 00:20:01,540 And so we could do that in React Native as well. 344 00:20:01,540 --> 00:20:09,110 So you can say with this view, let's actually put a padding on the top 345 00:20:09,110 --> 00:20:13,851 and let's just say something like 50 which is somewhat arbitrary. 346 00:20:13,851 --> 00:20:16,100 And now we've gone ahead and moved that down slightly. 347 00:20:16,100 --> 00:20:19,460 348 00:20:19,460 --> 00:20:25,540 But what if we wanted to move it down exactly the same amount as the status 349 00:20:25,540 --> 00:20:26,040 bar? 350 00:20:26,040 --> 00:20:28,960 351 00:20:28,960 --> 00:20:31,810 Well there's this great tool called Expo which 352 00:20:31,810 --> 00:20:33,650 we'll talk about in length later today. 353 00:20:33,650 --> 00:20:35,950 They're also the people who designed Snack. 354 00:20:35,950 --> 00:20:38,560 And they actually give you this thing called constant 355 00:20:38,560 --> 00:20:42,075 so we can do import constants from Expo. 356 00:20:42,075 --> 00:20:45,560 357 00:20:45,560 --> 00:20:47,760 And we can actually say, hey padding top rather 358 00:20:47,760 --> 00:20:56,520 than assigning an arbitrary value of 50 let's do constants.statusbarheight 359 00:20:56,520 --> 00:21:00,570 and that will actually give you that exact status bar height 360 00:21:00,570 --> 00:21:02,744 even if you're on different phones. 361 00:21:02,744 --> 00:21:04,660 And so, again, we'll talk about Expo and we'll 362 00:21:04,660 --> 00:21:07,830 talk about importing and exporting later today. 363 00:21:07,830 --> 00:21:11,820 But just FYI there's this thing called constants.statusbarheight which will 364 00:21:11,820 --> 00:21:14,490 give us exactly that status bar height. 365 00:21:14,490 --> 00:21:17,630 And now we have a to do app that doesn't look half bad. 366 00:21:17,630 --> 00:21:18,130 Cool. 367 00:21:18,130 --> 00:21:20,400 So there's actually this thing called style sheet 368 00:21:20,400 --> 00:21:26,310 which is part of React Native which has some optimizations for these styles. 369 00:21:26,310 --> 00:21:30,420 And so we talked about earlier how the way that your JavaScript communicates 370 00:21:30,420 --> 00:21:34,070 with the UI throughout is through this bridge. 371 00:21:34,070 --> 00:21:37,530 And so that means every single time you want a view with the style 372 00:21:37,530 --> 00:21:40,230 you need to send those style attributes over the bridge. 373 00:21:40,230 --> 00:21:42,360 There's actually a way that you can optimize this. 374 00:21:42,360 --> 00:21:44,443 And so the Facebook team created this thing called 375 00:21:44,443 --> 00:21:46,410 style sheet which does this for you. 376 00:21:46,410 --> 00:21:49,080 So it's basically the same thing as creating objects for style, 377 00:21:49,080 --> 00:21:54,120 but as an additional optimization that rather than sending this style object 378 00:21:54,120 --> 00:21:56,670 over the bridge we can only send IDs. 379 00:21:56,670 --> 00:22:03,450 And so say we have these objects, rather than passing the full object 380 00:22:03,450 --> 00:22:05,375 every time you can just say, hey this object, 381 00:22:05,375 --> 00:22:07,590 let's assign it this arbitrary ID of one. 382 00:22:07,590 --> 00:22:12,310 And so every time we say, hey this should have a style of one, 383 00:22:12,310 --> 00:22:16,420 the UI thread will know, oh, I know exactly what style that means. 384 00:22:16,420 --> 00:22:22,680 And so to do that, all we have to do is import this thing called style sheet 385 00:22:22,680 --> 00:22:24,450 from React Native and we can do this. 386 00:22:24,450 --> 00:22:31,830 387 00:22:31,830 --> 00:22:37,250 And so we're saying we're declaring our styles as a constant outside of our app 388 00:22:37,250 --> 00:22:39,890 and we're saying, hey create this style sheet 389 00:22:39,890 --> 00:22:42,440 and we're going to pass into you an object where the keys map 390 00:22:42,440 --> 00:22:46,116 with how we're going to use this later. 391 00:22:46,116 --> 00:22:47,990 And so we can go ahead and abstract this out. 392 00:22:47,990 --> 00:22:52,370 And so we can say, this here we're actually 393 00:22:52,370 --> 00:22:56,365 going to call our to do container. 394 00:22:56,365 --> 00:23:00,085 395 00:23:00,085 --> 00:23:07,250 And our to do container will just say, all right flex in the row direction 396 00:23:07,250 --> 00:23:10,172 and align your items to be centered. 397 00:23:10,172 --> 00:23:11,880 And then down here for style we just say, 398 00:23:11,880 --> 00:23:13,610 oh, we want to use styles.todocontainer. 399 00:23:13,610 --> 00:23:17,420 400 00:23:17,420 --> 00:23:22,460 And let's actually lowercase this for convention. 401 00:23:22,460 --> 00:23:26,320 And as you can see those styles still get applied. 402 00:23:26,320 --> 00:23:29,660 And why else might this pattern be good? 403 00:23:29,660 --> 00:23:32,030 Does anybody see something better about this pattern? 404 00:23:32,030 --> 00:23:35,229 405 00:23:35,229 --> 00:23:37,060 AUDIENCE: It's reusable. 406 00:23:37,060 --> 00:23:40,270 SPEAKER 1: Yeah exactly, it's reusable. 407 00:23:40,270 --> 00:23:43,210 And so say we wanted to have something else that 408 00:23:43,210 --> 00:23:48,700 had very similar styles to to do container 409 00:23:48,700 --> 00:23:49,999 we can actually use that again. 410 00:23:49,999 --> 00:23:52,540 And then if we wanted to change both of them at the same time 411 00:23:52,540 --> 00:23:55,480 we could do it by using this abstracted out object. 412 00:23:55,480 --> 00:24:03,140 And so let's do the app container and set that equal to this object. 413 00:24:03,140 --> 00:24:11,270 414 00:24:11,270 --> 00:24:15,020 And then down here for this view let's do styles.appcontainer. 415 00:24:15,020 --> 00:24:18,610 416 00:24:18,610 --> 00:24:23,600 And so there's actually an even better reason to do this 417 00:24:23,600 --> 00:24:25,890 and it's because every single time we rendered, 418 00:24:25,890 --> 00:24:28,760 we used to be building a new style object to pass. 419 00:24:28,760 --> 00:24:30,890 And now we're just using that same reference 420 00:24:30,890 --> 00:24:34,700 to that object that we created outside of this component. 421 00:24:34,700 --> 00:24:39,690 And so that's just an additional optimization that, using this pattern, 422 00:24:39,690 --> 00:24:42,830 creating the styles outside of the component allows us to do. 423 00:24:42,830 --> 00:24:45,560 424 00:24:45,560 --> 00:24:47,750 Cool. 425 00:24:47,750 --> 00:24:51,430 Any questions on styles and styling? 426 00:24:51,430 --> 00:24:51,930 Great. 427 00:24:51,930 --> 00:24:54,690 428 00:24:54,690 --> 00:24:57,220 So let's talk about event handling. 429 00:24:57,220 --> 00:25:00,930 So unlike Web not every component has every single interaction. 430 00:25:00,930 --> 00:25:04,170 And so in Web, if we had a div, we can assign an onClick to that div 431 00:25:04,170 --> 00:25:08,400 or if we add a list item or a list, anything we can assign an onClick to. 432 00:25:08,400 --> 00:25:11,880 But unlike Web there are only a few touchable components in React Native 433 00:25:11,880 --> 00:25:15,349 and those are a button, which we've used before. 434 00:25:15,349 --> 00:25:18,015 These three things called touchable opacity, touchable highlight 435 00:25:18,015 --> 00:25:22,451 and touchable without feedback, which are just 436 00:25:22,451 --> 00:25:25,200 three basic components that have slightly different reactions when 437 00:25:25,200 --> 00:25:26,492 you touch them. 438 00:25:26,492 --> 00:25:28,950 An then lastly, this thing called touchable native feedback 439 00:25:28,950 --> 00:25:33,040 which is this native component that you can only use on Android. 440 00:25:33,040 --> 00:25:36,330 441 00:25:36,330 --> 00:25:39,690 And so in Web, when you had an event handler, 442 00:25:39,690 --> 00:25:42,560 that handler would receive that event as an argument. 443 00:25:42,560 --> 00:25:48,440 But that's not necessarily true for all React Native handlers. 444 00:25:48,440 --> 00:25:51,010 And so in order just to find out how those work 445 00:25:51,010 --> 00:25:53,580 you basically have to consult the documentation. 446 00:25:53,580 --> 00:25:55,720 The documentation for React Native is really good. 447 00:25:55,720 --> 00:25:57,750 I recommend that you peruse them just to see 448 00:25:57,750 --> 00:26:01,670 what components are available to you and those component APIs. 449 00:26:01,670 --> 00:26:04,920 And basically most of the stuff that you want to do 450 00:26:04,920 --> 00:26:06,662 is already pre-built for you. 451 00:26:06,662 --> 00:26:08,370 And so, even though there's no such thing 452 00:26:08,370 --> 00:26:13,190 as a checkbox component in React Native, there is actually a way to do that. 453 00:26:13,190 --> 00:26:15,840 And so let's go ahead and add this thing which 454 00:26:15,840 --> 00:26:20,310 is similar to a checkbox in that it's a Boolean flag 455 00:26:20,310 --> 00:26:23,772 but it's not really exactly stylistically the same. 456 00:26:23,772 --> 00:26:25,605 And so let's add this thing called a switch. 457 00:26:25,605 --> 00:26:29,082 458 00:26:29,082 --> 00:26:32,510 As a switch you'll see what it looks like in a moment 459 00:26:32,510 --> 00:26:35,997 but it's basically just a Boolean flag that we're going to use in this example 460 00:26:35,997 --> 00:26:37,205 rather than using a checkbox. 461 00:26:37,205 --> 00:26:40,940 462 00:26:40,940 --> 00:26:44,980 So before what we had here was an input of type checkbox and instead 463 00:26:44,980 --> 00:26:47,240 we're going to use a switch. 464 00:26:47,240 --> 00:26:52,450 And the value of that is going to be whether the props.TODO is checked. 465 00:26:52,450 --> 00:26:56,700 466 00:26:56,700 --> 00:26:59,100 And so now when we add a TODO we see the switch 467 00:26:59,100 --> 00:27:01,510 that can be flipped back and forth. 468 00:27:01,510 --> 00:27:04,320 But if you notice, every time I try to flip it on it 469 00:27:04,320 --> 00:27:07,470 immediately turns back off. 470 00:27:07,470 --> 00:27:10,170 Can anybody spot why that's happening? 471 00:27:10,170 --> 00:27:14,970 472 00:27:14,970 --> 00:27:22,220 So we have this value set to props.TODO checked, and down here do we ever 473 00:27:22,220 --> 00:27:23,154 update that value? 474 00:27:23,154 --> 00:27:25,760 475 00:27:25,760 --> 00:27:26,570 No we don't. 476 00:27:26,570 --> 00:27:30,500 So we have this thing called Toggle TODO which we implemented last week, 477 00:27:30,500 --> 00:27:35,430 which, given some TODOs ID will flip that Boolean checked flag. 478 00:27:35,430 --> 00:27:39,960 But we never actually hook that up for this example. 479 00:27:39,960 --> 00:27:44,930 So in the TODO component here we're passing down an onToggle prop 480 00:27:44,930 --> 00:27:47,450 but we never actually use it up here. 481 00:27:47,450 --> 00:27:55,100 And so here we should actually have the switch when we do on-- 482 00:27:55,100 --> 00:27:58,120 what's it called-- on value change. 483 00:27:58,120 --> 00:28:02,180 And I only know this because that's what the documentation says. 484 00:28:02,180 --> 00:28:08,360 And so when that value changed, I should run props.onToggle, 485 00:28:08,360 --> 00:28:11,390 which is the name of the prop that we're passing down 486 00:28:11,390 --> 00:28:13,340 from this parent component. 487 00:28:13,340 --> 00:28:17,590 And so now when we click TODO it updates. 488 00:28:17,590 --> 00:28:23,254 And as you see right here the unchecked TODO count still updates as expected. 489 00:28:23,254 --> 00:28:27,240 And so now if we create a bunch we can see those numbers changing. 490 00:28:27,240 --> 00:28:29,990 We can see the checking and toggling works as expected. 491 00:28:29,990 --> 00:28:32,420 We see if we delete this one the TODO count goes down 492 00:28:32,420 --> 00:28:35,124 but the uncheck count does not go down since it was checked. 493 00:28:35,124 --> 00:28:37,790 If we delete something that isn't checked, both of them go down. 494 00:28:37,790 --> 00:28:43,707 And so we have the same behavior as we did in our React Web application. 495 00:28:43,707 --> 00:28:48,580 496 00:28:48,580 --> 00:28:49,760 Any questions there? 497 00:28:49,760 --> 00:28:55,200 498 00:28:55,200 --> 00:28:57,930 So we have this being a scroll view. 499 00:28:57,930 --> 00:29:00,700 But, if you notice, the scroll view gets cut off early 500 00:29:00,700 --> 00:29:04,930 and as we add TODOs it grows. 501 00:29:04,930 --> 00:29:16,520 But if we add a bunch of TODOs it grows with it. 502 00:29:16,520 --> 00:29:23,060 But say we actually wanted the scroll view to reach all the way to the bottom 503 00:29:23,060 --> 00:29:25,310 no matter how many TODOs were there. 504 00:29:25,310 --> 00:29:28,680 Does anybody know how we may go about doing that? 505 00:29:28,680 --> 00:29:31,367 The hint being that in order to control layout what we use 506 00:29:31,367 --> 00:29:32,575 is this thing called Flexbox. 507 00:29:32,575 --> 00:29:35,660 508 00:29:35,660 --> 00:29:40,490 So by default components will grow to however big 509 00:29:40,490 --> 00:29:43,970 they need to be in order to fit their children. 510 00:29:43,970 --> 00:29:48,660 But we have a way of saying, hey fill as much space as you possibly can. 511 00:29:48,660 --> 00:29:52,310 And the way to do that is saying flex: 1. 512 00:29:52,310 --> 00:29:56,250 And so we want the app container to have a flex value of 1 513 00:29:56,250 --> 00:30:00,650 so that the app container fills up all possible space. 514 00:30:00,650 --> 00:30:05,240 And so we could do something like app container let's do flex: 1. 515 00:30:05,240 --> 00:30:10,910 And then maybe for the TODOs, the scroll view here, maybe we 516 00:30:10,910 --> 00:30:12,880 want that to fill as well. 517 00:30:12,880 --> 00:30:15,620 And so we could go down to the scroll view 518 00:30:15,620 --> 00:30:21,230 and say the style is going to be flex: 1. 519 00:30:21,230 --> 00:30:23,840 But that isn't great design. 520 00:30:23,840 --> 00:30:29,270 What if we wanted instead to just have a style called Fill, which will just 521 00:30:29,270 --> 00:30:31,760 fill whatever space is available. 522 00:30:31,760 --> 00:30:34,532 And so that would be a good abstraction to have. 523 00:30:34,532 --> 00:30:36,990 So here we have a TODO container, we have an app container, 524 00:30:36,990 --> 00:30:41,360 and let's actually create this style called Fill, which we'll just flex: 1. 525 00:30:41,360 --> 00:30:45,800 526 00:30:45,800 --> 00:30:55,140 And so now we can say hey, we want this scroll view to fill 527 00:30:55,140 --> 00:31:00,510 and we also want our app container to fill. 528 00:31:00,510 --> 00:31:03,740 But instead of adding that to app container, 529 00:31:03,740 --> 00:31:05,520 what would be a better way to do it? 530 00:31:05,520 --> 00:31:07,500 Well, we can actually apply both those styles. 531 00:31:07,500 --> 00:31:10,590 Does anybody remember how we could do that, apply multiple styles 532 00:31:10,590 --> 00:31:12,256 to the same component? 533 00:31:12,256 --> 00:31:15,680 534 00:31:15,680 --> 00:31:20,170 So in React Web we would actually just give it multiple classes. 535 00:31:20,170 --> 00:31:21,810 What is the analog in React Native? 536 00:31:21,810 --> 00:31:24,880 537 00:31:24,880 --> 00:31:27,060 We can actually just pass an array. 538 00:31:27,060 --> 00:31:30,640 And so say first apply styles.Appcontainer and then apply 539 00:31:30,640 --> 00:31:31,390 styles.fill. 540 00:31:31,390 --> 00:31:34,630 541 00:31:34,630 --> 00:31:38,860 And now, if we add a bunch of TODOs we can 542 00:31:38,860 --> 00:31:41,260 see that it fills the available space. 543 00:31:41,260 --> 00:31:45,220 And then if we delete TODOs such that it doesn't fill the available space 544 00:31:45,220 --> 00:31:48,280 we see that it's not getting cut off at the bottom 545 00:31:48,280 --> 00:31:53,920 because it's filling all the way down to the bottom of this container. 546 00:31:53,920 --> 00:31:58,840 So any questions on event handling, styling or moving 547 00:31:58,840 --> 00:32:01,195 React Web to React Native components? 548 00:32:01,195 --> 00:32:03,925 549 00:32:03,925 --> 00:32:05,226 No. 550 00:32:05,226 --> 00:32:07,600 So we've been talking about this thing called components, 551 00:32:07,600 --> 00:32:12,100 but we haven't really dived too deeply into what that really means. 552 00:32:12,100 --> 00:32:14,710 In the past few weeks, we've talked about how components 553 00:32:14,710 --> 00:32:17,790 return a node, how they represent a discrete piece of UI, 554 00:32:17,790 --> 00:32:21,800 how all components should act like pure functions with respect to their props. 555 00:32:21,800 --> 00:32:24,490 But that's really where we stopped talking about components. 556 00:32:24,490 --> 00:32:27,220 And so this week, we're going to dive more deeply into components 557 00:32:27,220 --> 00:32:30,017 and what components actually are. 558 00:32:30,017 --> 00:32:32,100 And so there are actually two types of components. 559 00:32:32,100 --> 00:32:34,150 And we've actually seen both of them already. 560 00:32:34,150 --> 00:32:37,070 So first is this thing called a stateless functional component. 561 00:32:37,070 --> 00:32:40,450 You might see it abbreviated as SFC or if you're reading blog posts online, 562 00:32:40,450 --> 00:32:43,400 some people call them pure functional components. 563 00:32:43,400 --> 00:32:47,050 And what those are basically just functions. 564 00:32:47,050 --> 00:32:50,110 So something like this TODO that we've created 565 00:32:50,110 --> 00:32:53,830 is just a function that takes in props and returns some node. 566 00:32:53,830 --> 00:32:56,506 It has no concept of state. 567 00:32:56,506 --> 00:32:59,130 And so that's why it's called a stateless functional component. 568 00:32:59,130 --> 00:33:01,540 It's just a function with no state. 569 00:33:01,540 --> 00:33:04,090 570 00:33:04,090 --> 00:33:05,950 And the second is a react.component which 571 00:33:05,950 --> 00:33:09,160 we've been extending from but we haven't really talked about it 572 00:33:09,160 --> 00:33:11,070 too far in depth. 573 00:33:11,070 --> 00:33:14,111 And so first let's talk about stateless functional components. 574 00:33:14,111 --> 00:33:19,030 575 00:33:19,030 --> 00:33:21,240 So this is the simplest type of component. 576 00:33:21,240 --> 00:33:24,480 You should use this when you don't need any state. 577 00:33:24,480 --> 00:33:28,520 And what it is is a function that takes props and returns a node. 578 00:33:28,520 --> 00:33:31,860 And it shouldn't do anything other than taking props and return a node. 579 00:33:31,860 --> 00:33:33,859 It should be what's called a pure function. 580 00:33:33,859 --> 00:33:36,900 In other words, it should not have any side effects, like setting a value 581 00:33:36,900 --> 00:33:41,760 or pushing to an array, updating an object, something like that 582 00:33:41,760 --> 00:33:45,960 because it should just take in props and return the value. 583 00:33:45,960 --> 00:33:51,360 If you do stuff other than that you might create some bugs or even worse 584 00:33:51,360 --> 00:33:54,624 crash your app or something like that. 585 00:33:54,624 --> 00:33:56,540 Then, any changes to the props that you passed 586 00:33:56,540 --> 00:33:59,220 to a stateless functional component will automatically 587 00:33:59,220 --> 00:34:01,870 cause that function to be re-invoked. 588 00:34:01,870 --> 00:34:05,070 And then after it re-invokes the function and returns nodes, 589 00:34:05,070 --> 00:34:09,477 React will do its thing and compare nodes to what it has in its virtual dom 590 00:34:09,477 --> 00:34:11,310 and then go ahead and replace what's needed. 591 00:34:11,310 --> 00:34:14,060 592 00:34:14,060 --> 00:34:18,026 And so on the other side of the coin, we have what's called a React.component. 593 00:34:18,026 --> 00:34:20,650 This is something that's actually provided by the React library 594 00:34:20,650 --> 00:34:22,330 and implemented for you. 595 00:34:22,330 --> 00:34:26,150 And it's an abstract class that can be extended to behave however you want. 596 00:34:26,150 --> 00:34:29,449 And so, in our example here and examples prior, 597 00:34:29,449 --> 00:34:32,870 we've been doing this thing where we create a class called whatever we want 598 00:34:32,870 --> 00:34:37,400 and we're actually extending this thing called a React component. 599 00:34:37,400 --> 00:34:41,381 And so what is a React.component? 600 00:34:41,381 --> 00:34:43,130 Well these things have additional features 601 00:34:43,130 --> 00:34:45,590 that stateless functional components do not. 602 00:34:45,590 --> 00:34:48,837 One of those, of course, is that they have instances so they're a class. 603 00:34:48,837 --> 00:34:51,170 And so when you invoke that class it returns an instance 604 00:34:51,170 --> 00:34:56,889 and that instance will persist throughout the lifetime of this class. 605 00:34:56,889 --> 00:35:00,230 As suggested by the name, it maintains its own state 606 00:35:00,230 --> 00:35:04,850 and so stateless components do not, whereas these React components do. 607 00:35:04,850 --> 00:35:07,430 They have this concept of state, and we talked about state 608 00:35:07,430 --> 00:35:08,390 in depth last lecture. 609 00:35:08,390 --> 00:35:11,399 610 00:35:11,399 --> 00:35:13,190 One thing we didn't talk about last lecture 611 00:35:13,190 --> 00:35:16,585 is this thing called a lifecycle, it's lifecycle methods. 612 00:35:16,585 --> 00:35:19,180 And so these are similar to hooks or event handlers. 613 00:35:19,180 --> 00:35:23,350 And so we've used the event handlers before in both React Web and React 614 00:35:23,350 --> 00:35:24,640 Native. 615 00:35:24,640 --> 00:35:27,200 And these things are actually automatically invoked for you. 616 00:35:27,200 --> 00:35:30,850 You don't have to worry about exactly the implementation details 617 00:35:30,850 --> 00:35:32,750 or when to invoke your own functions. 618 00:35:32,750 --> 00:35:36,880 That's actually something that's done automatically. 619 00:35:36,880 --> 00:35:39,310 And so unlike stateless functional components, 620 00:35:39,310 --> 00:35:43,990 which just take props and return a node, a React components render function 621 00:35:43,990 --> 00:35:47,050 actually becomes a function of the props and also any class 622 00:35:47,050 --> 00:35:48,110 properties that exist. 623 00:35:48,110 --> 00:35:51,550 And so if you remember back to last lecture we talked about classes 624 00:35:51,550 --> 00:35:53,510 and how when you create a class instance, 625 00:35:53,510 --> 00:35:55,610 you might attach to it some properties. 626 00:35:55,610 --> 00:35:58,840 These properties can be values anywhere from functions 627 00:35:58,840 --> 00:36:02,620 to just primitives, objects. 628 00:36:02,620 --> 00:36:05,810 And so when you create a class component instance, 629 00:36:05,810 --> 00:36:11,660 you can actually use all of those class properties in that render method. 630 00:36:11,660 --> 00:36:18,700 And so we saw that over here when we created this addTODO 631 00:36:18,700 --> 00:36:25,690 where within the render we referenced this.addTODO in this button component 632 00:36:25,690 --> 00:36:27,091 here. 633 00:36:27,091 --> 00:36:30,340 And so, as you see, this is a class property which we actually 634 00:36:30,340 --> 00:36:31,900 used in our render method. 635 00:36:31,900 --> 00:36:36,190 And so this render method is actually a function of both props 636 00:36:36,190 --> 00:36:41,520 and any class properties like its state or these methods that we defined. 637 00:36:41,520 --> 00:36:44,720 638 00:36:44,720 --> 00:36:45,220 Cool. 639 00:36:45,220 --> 00:36:47,960 So I talked about this thing called a lifecycle method, 640 00:36:47,960 --> 00:36:51,040 but what actually is a component lifecycle. 641 00:36:51,040 --> 00:36:54,930 And so a component lifecycle can actually be represented by this graph. 642 00:36:54,930 --> 00:36:59,410 And so first a component will mount and so some lifecycle hooks 643 00:36:59,410 --> 00:37:03,470 get called there, but that's basically that constructor where 644 00:37:03,470 --> 00:37:08,950 the class instance gets created and maybe its state gets instantiated. 645 00:37:08,950 --> 00:37:11,350 And then what it does is it renders. 646 00:37:11,350 --> 00:37:14,380 It will just put you to the page. 647 00:37:14,380 --> 00:37:17,590 And then every time we call set state or get new props we actually 648 00:37:17,590 --> 00:37:19,370 enter what's called an update cycle. 649 00:37:19,370 --> 00:37:22,340 And so when you receive new props, the component needs to update. 650 00:37:22,340 --> 00:37:23,780 It needs to re-render. 651 00:37:23,780 --> 00:37:27,470 And so part of its lifecycle is actually updating over and over. 652 00:37:27,470 --> 00:37:31,000 And this happens any time new props get received because it wouldn't really 653 00:37:31,000 --> 00:37:33,130 make sense if we had a component that when 654 00:37:33,130 --> 00:37:35,740 it received new props nothing changed. 655 00:37:35,740 --> 00:37:39,620 But also this update cycle happens every single time the state changes. 656 00:37:39,620 --> 00:37:43,810 So if you call this .setstate, you update state and presumably you have 657 00:37:43,810 --> 00:37:45,550 something in the UI that also updates. 658 00:37:45,550 --> 00:37:47,590 And so this update cycle will happen again. 659 00:37:47,590 --> 00:37:51,020 And every single time you update state, receive new props this update cycle 660 00:37:51,020 --> 00:37:52,690 will fire again. 661 00:37:52,690 --> 00:37:55,650 And then, when it's time for that component to disappear, 662 00:37:55,650 --> 00:37:59,560 it enters what's called the unmount stage where 663 00:37:59,560 --> 00:38:02,560 you have the chance to clean up anything that you 664 00:38:02,560 --> 00:38:07,000 may have created during that lifecycle. 665 00:38:07,000 --> 00:38:10,652 And so what actually does that mean in practice? 666 00:38:10,652 --> 00:38:12,610 So I said that there's this thing called mount, 667 00:38:12,610 --> 00:38:14,650 which is basically just a series of steps 668 00:38:14,650 --> 00:38:17,839 that happens when a component first gets mounted and rendered. 669 00:38:17,839 --> 00:38:20,630 And so the first thing that happens is the constructor gets called. 670 00:38:20,630 --> 00:38:23,980 And so, as we saw a few lectures ago when we talked about classes, 671 00:38:23,980 --> 00:38:28,090 the constructor is where we have a chance to add class properties 672 00:38:28,090 --> 00:38:31,390 or add anything to that instance that we need. 673 00:38:31,390 --> 00:38:33,910 And so here we might want to do stuff like initialize state 674 00:38:33,910 --> 00:38:39,430 or maybe add some other class properties like bound methods et cetera. 675 00:38:39,430 --> 00:38:44,760 Next what happens is we render, which is just the meat of the component. 676 00:38:44,760 --> 00:38:49,000 The main goal of any component is to show you why. 677 00:38:49,000 --> 00:38:53,080 And so, in this render method, that's exactly what happens. 678 00:38:53,080 --> 00:38:57,740 You take any properties that you have, any class properties that you have, 679 00:38:57,740 --> 00:39:00,949 and then you end up returning a node. 680 00:39:00,949 --> 00:39:03,490 And then after that this hook, that we haven't seen yet, gets 681 00:39:03,490 --> 00:39:05,136 called a component div mount. 682 00:39:05,136 --> 00:39:07,010 And this is the chance for you to do anything 683 00:39:07,010 --> 00:39:11,295 that you wanted to do that didn't really matter for render. 684 00:39:11,295 --> 00:39:14,170 And so if you have asynched actions, like standing network or passes. 685 00:39:14,170 --> 00:39:17,740 If you want to add timers and stuff like that this 686 00:39:17,740 --> 00:39:21,050 is exactly where you should do that. 687 00:39:21,050 --> 00:39:24,370 And then maybe you'll need to update the state accordingly. 688 00:39:24,370 --> 00:39:26,380 And so if you actually see that state here 689 00:39:26,380 --> 00:39:28,740 this will cause a re-render without updating the UI. 690 00:39:28,740 --> 00:39:32,310 And so all of this will happen before the UI re-renders. 691 00:39:32,310 --> 00:39:35,200 And so let's play with that a little bit. 692 00:39:35,200 --> 00:39:39,010 So first let's copy this, that way you can keep it. 693 00:39:39,010 --> 00:39:49,010 694 00:39:49,010 --> 00:39:57,770 So let's clear all of this and then play with mounting a little bit. 695 00:39:57,770 --> 00:40:01,040 And so in your next project what you're going to do is you're 696 00:40:01,040 --> 00:40:04,800 going to be implementing what's called a Pomodoro timer. 697 00:40:04,800 --> 00:40:08,270 And so for those of you who are aware of what those are-- 698 00:40:08,270 --> 00:40:11,330 basically what it is is a timer that allows you 699 00:40:11,330 --> 00:40:14,399 to switch between two amounts of time. 700 00:40:14,399 --> 00:40:16,940 And so there's this thing called the Pomodoro Technique which 701 00:40:16,940 --> 00:40:21,127 is used for studying where you study or work very hard for some amount of time 702 00:40:21,127 --> 00:40:22,460 and then you take a short break. 703 00:40:22,460 --> 00:40:24,626 And then you work hard for some short amount of time 704 00:40:24,626 --> 00:40:26,231 and then you take a short break. 705 00:40:26,231 --> 00:40:28,730 And so what you're going to be creating in your next project 706 00:40:28,730 --> 00:40:31,190 is actually a timer that allows you to do that. 707 00:40:31,190 --> 00:40:35,980 It will automatically track for you however long you want to work. 708 00:40:35,980 --> 00:40:38,207 And it will also allow you to set some time 709 00:40:38,207 --> 00:40:40,790 that you want to take a break in between those working blocks. 710 00:40:40,790 --> 00:40:41,623 And it will do that. 711 00:40:41,623 --> 00:40:45,410 So when you start the timer it will count down until you're done working. 712 00:40:45,410 --> 00:40:47,690 It will let you know, hey time for a break. 713 00:40:47,690 --> 00:40:49,670 Then it will switch over to that break timer, 714 00:40:49,670 --> 00:40:52,790 run down until that ends up and says, oh now it's time to work, 715 00:40:52,790 --> 00:40:54,610 and it will cycle through that. 716 00:40:54,610 --> 00:40:56,360 And so in order to do that, you might need 717 00:40:56,360 --> 00:40:59,210 to know how to work things like timers. 718 00:40:59,210 --> 00:41:04,620 And so these methods may be a chance for you to set up those timers. 719 00:41:04,620 --> 00:41:07,700 And so let's go ahead and do an example doing that. 720 00:41:07,700 --> 00:41:13,920 So first let's get rid of all of this stuff. 721 00:41:13,920 --> 00:41:18,190 So in this example we no longer need TODOs. 722 00:41:18,190 --> 00:41:23,070 And in our render lets actually just have some count. 723 00:41:23,070 --> 00:41:23,820 Those have a View. 724 00:41:23,820 --> 00:41:28,620 725 00:41:28,620 --> 00:41:30,580 And inside here let's have some text. 726 00:41:30,580 --> 00:41:36,270 727 00:41:36,270 --> 00:41:38,370 And that text is just going to show some count. 728 00:41:38,370 --> 00:41:45,040 729 00:41:45,040 --> 00:41:46,710 And let's initialize that count to 0. 730 00:41:46,710 --> 00:41:55,550 731 00:41:55,550 --> 00:42:00,860 So, as soon as I get rid of all this, we have a very simple app and all it does 732 00:42:00,860 --> 00:42:01,930 is show a count of 0. 733 00:42:01,930 --> 00:42:04,420 You see it up in this left hand corner here. 734 00:42:04,420 --> 00:42:06,300 And let's go ahead and actually center this. 735 00:42:06,300 --> 00:42:13,040 So let's do styles, and let's create a new style sheet. 736 00:42:13,040 --> 00:42:17,420 737 00:42:17,420 --> 00:42:21,330 Let's call this app container and whatever we want to do in here. 738 00:42:21,330 --> 00:42:24,049 So let's have it grow as much as we can. 739 00:42:24,049 --> 00:42:25,340 Let's have it center its items. 740 00:42:25,340 --> 00:42:29,690 741 00:42:29,690 --> 00:42:34,640 And let's have it align its items the other direction as well. 742 00:42:34,640 --> 00:42:42,240 743 00:42:42,240 --> 00:42:47,000 And down here let's actually pass this in as styles.appcontainer. 744 00:42:47,000 --> 00:42:53,000 745 00:42:53,000 --> 00:42:54,970 So now we see this number 0 is very small. 746 00:42:54,970 --> 00:42:57,700 Let's go ahead and make it a little bit bigger. 747 00:42:57,700 --> 00:43:02,350 And so let's have count and let's give it a big font 748 00:43:02,350 --> 00:43:06,019 size of like 48 or something. 749 00:43:06,019 --> 00:43:12,870 750 00:43:12,870 --> 00:43:17,810 So now-- style-- 751 00:43:17,810 --> 00:43:19,970 we have a big number and all it does is 0. 752 00:43:19,970 --> 00:43:22,400 And so how are we going to get it to count? 753 00:43:22,400 --> 00:43:24,650 Well presumably we should be setting our state 754 00:43:24,650 --> 00:43:28,700 and just have that state increase. 755 00:43:28,700 --> 00:43:34,390 And so if we want to repeat something what might we use to achieve that? 756 00:43:34,390 --> 00:43:38,210 757 00:43:38,210 --> 00:43:42,020 So do something at some given interval. 758 00:43:42,020 --> 00:43:44,850 We can actually use that set interval. 759 00:43:44,850 --> 00:43:47,050 And so let's first implement this count. 760 00:43:47,050 --> 00:43:49,150 So let's have this thing called increment. 761 00:43:49,150 --> 00:43:52,590 Is this too small? 762 00:43:52,590 --> 00:43:54,640 Let's have this thing called ink. 763 00:43:54,640 --> 00:44:03,450 And what that does is it does this.setstate, takes a previous state 764 00:44:03,450 --> 00:44:08,190 and returns the count to be 1 greater than the previous state. 765 00:44:08,190 --> 00:44:13,450 766 00:44:13,450 --> 00:44:18,220 And so now we've implemented this thing called increment where we 767 00:44:18,220 --> 00:44:21,470 take the states count and increment it. 768 00:44:21,470 --> 00:44:27,967 And so how might we get this increment call to happen every once in a while? 769 00:44:27,967 --> 00:44:29,800 Well presumably we should use a thing called 770 00:44:29,800 --> 00:44:34,150 set interval, which we'll call a function every n milliseconds. 771 00:44:34,150 --> 00:44:37,369 But how are we going to get that to happen? 772 00:44:37,369 --> 00:44:39,910 Well we should do this after the component finishes mounting. 773 00:44:39,910 --> 00:44:42,240 We should set up some sort of timer. 774 00:44:42,240 --> 00:44:44,500 And so how do we know or how do we get a function 775 00:44:44,500 --> 00:44:49,230 to execute after components finish mounting? 776 00:44:49,230 --> 00:44:51,749 That's actually where this lifecycle method comes in. 777 00:44:51,749 --> 00:44:53,540 And so there's this lifecycle method called 778 00:44:53,540 --> 00:44:56,080 componentDidMount which automatically gets 779 00:44:56,080 --> 00:44:58,710 run for after the component mounts. 780 00:44:58,710 --> 00:45:02,090 And so we can actually set up our timer tap in there. 781 00:45:02,090 --> 00:45:10,510 And so we can do componentDidMount and inside of it we can do setInterval 782 00:45:10,510 --> 00:45:16,090 and that's called this.Increment every second. 783 00:45:16,090 --> 00:45:20,650 And so there's going to be a small bug here. 784 00:45:20,650 --> 00:45:23,900 Does anybody know what the bug is? 785 00:45:23,900 --> 00:45:27,080 786 00:45:27,080 --> 00:45:30,890 So every 1,000 milliseconds this thing called this.Increment is getting 787 00:45:30,890 --> 00:45:31,890 called. 788 00:45:31,890 --> 00:45:35,310 And this.Increment is invoking this.Setstate. 789 00:45:35,310 --> 00:45:37,980 790 00:45:37,980 --> 00:45:41,186 Does anybody see how that might be a problem? 791 00:45:41,186 --> 00:45:47,150 792 00:45:47,150 --> 00:45:48,140 I'll give you a hint. 793 00:45:48,140 --> 00:45:52,660 It has something to do with this. 794 00:45:52,660 --> 00:45:57,490 And so when this gets executed this might not mean what this is here. 795 00:45:57,490 --> 00:45:59,430 And so this is a common bug in React. 796 00:45:59,430 --> 00:46:04,020 Oftentimes, when you say this here, what it means 797 00:46:04,020 --> 00:46:06,150 lexically is not necessarily what it means 798 00:46:06,150 --> 00:46:08,310 when it actually eventually gets run. 799 00:46:08,310 --> 00:46:15,370 And so how did we go about fixing this bug in previous lectures? 800 00:46:15,370 --> 00:46:19,180 We have to somehow get this to be bound to what we want it to be. 801 00:46:19,180 --> 00:46:23,450 And in case we want it to be bound lexically. 802 00:46:23,450 --> 00:46:25,380 So a few different ways to do that. 803 00:46:25,380 --> 00:46:29,600 One way was creating a new function here in line that does this. 804 00:46:29,600 --> 00:46:33,000 805 00:46:33,000 --> 00:46:38,390 And I'm actually not sure that that works in this example 806 00:46:38,390 --> 00:46:41,570 because this isn't necessarily set here. 807 00:46:41,570 --> 00:46:48,690 The way we've generally handled this is by actually binding it 808 00:46:48,690 --> 00:46:51,230 at creation time. 809 00:46:51,230 --> 00:47:02,020 And so there's a shorthand whereby we can 810 00:47:02,020 --> 00:47:06,520 say when we create this increment function automatically 811 00:47:06,520 --> 00:47:08,530 bind it to this class. 812 00:47:08,530 --> 00:47:14,860 And so this is actually a new addition to the ECMAScript standard 813 00:47:14,860 --> 00:47:17,200 where this is called class properties whereby 814 00:47:17,200 --> 00:47:20,170 inline as we're declaring this class we can also 815 00:47:20,170 --> 00:47:23,870 create properties that should be added during the constructor. 816 00:47:23,870 --> 00:47:30,280 And so this is syntactically the same as doing this. 817 00:47:30,280 --> 00:47:40,070 Having the increment function defined as we did before. 818 00:47:40,070 --> 00:47:42,090 And in the constructor when this is created 819 00:47:42,090 --> 00:47:51,490 doing this.Increment equals this.Increment.bind whatever 820 00:47:51,490 --> 00:47:53,780 the this context we want to be. 821 00:47:53,780 --> 00:47:56,840 And in this case it's this. 822 00:47:56,840 --> 00:47:59,000 Or in other words, it's the same as just doing 823 00:47:59,000 --> 00:48:03,010 this.Increment is equal to the anonymous function that we defined down there. 824 00:48:03,010 --> 00:48:07,030 825 00:48:07,030 --> 00:48:09,610 Whatever. 826 00:48:09,610 --> 00:48:15,170 And so that's just, rather than having to write everything in the constructor, 827 00:48:15,170 --> 00:48:22,850 we can just use this shorthand down here which 828 00:48:22,850 --> 00:48:29,014 is just generally the preferred way because it's easier to read. 829 00:48:29,014 --> 00:48:31,430 And now we've gone ahead and created this timer that runs. 830 00:48:31,430 --> 00:48:34,707 And so you can see that the numbers are going up. 831 00:48:34,707 --> 00:48:37,790 And the reason that this is happening is because we created this increment 832 00:48:37,790 --> 00:48:38,540 function. 833 00:48:38,540 --> 00:48:41,717 We correctly bound it to the this that we wanted to bind it to 834 00:48:41,717 --> 00:48:43,550 and then we said, hey, component when you're 835 00:48:43,550 --> 00:48:48,870 done mounting set up this timer, set up on an interval of 1,000 milliseconds. 836 00:48:48,870 --> 00:48:51,392 So every second call this increment function. 837 00:48:51,392 --> 00:48:53,100 And what does that increment function do? 838 00:48:53,100 --> 00:48:56,600 Well it updates the state to be the previous states count plus 1 839 00:48:56,600 --> 00:48:59,900 and then down in the render we render this.state.count. 840 00:48:59,900 --> 00:49:04,070 And so you see every second the state gets updated to a new number, 841 00:49:04,070 --> 00:49:06,530 and the new number is shown there. 842 00:49:06,530 --> 00:49:15,680 And so we never had to manually say hey, run this code when you mount. 843 00:49:15,680 --> 00:49:20,960 We just created this method called component.DidMount and React handles 844 00:49:20,960 --> 00:49:23,780 automatically invoking that for you after the component mounted. 845 00:49:23,780 --> 00:49:27,590 846 00:49:27,590 --> 00:49:29,670 And it's the same as the constructor. 847 00:49:29,670 --> 00:49:31,750 We never had to manually invoke the constructor. 848 00:49:31,750 --> 00:49:35,400 It just gets called automatically when a class instance is getting created? 849 00:49:35,400 --> 00:49:38,220 850 00:49:38,220 --> 00:49:43,470 Any questions on the mount cycle or the mount processor I should say? 851 00:49:43,470 --> 00:49:51,010 852 00:49:51,010 --> 00:49:55,240 Great so now let's talk about the update cycle. 853 00:49:55,240 --> 00:49:57,410 And so, just like in the mounting process, 854 00:49:57,410 --> 00:50:00,760 there is a bunch of lifecycle hooks that got called for you automatically. 855 00:50:00,760 --> 00:50:02,468 There are also a bunch of lifecycle hooks 856 00:50:02,468 --> 00:50:07,230 that get called automatically every single time we want to re-render. 857 00:50:07,230 --> 00:50:09,610 And so the first thing that happens is component 858 00:50:09,610 --> 00:50:13,150 will receive props which takes the next props. 859 00:50:13,150 --> 00:50:15,250 And so say you had something in your state 860 00:50:15,250 --> 00:50:18,994 that really depended on what the props were set to, 861 00:50:18,994 --> 00:50:21,910 you can actually use this function to update any of those state fields 862 00:50:21,910 --> 00:50:23,420 that rely on the props. 863 00:50:23,420 --> 00:50:26,320 And you do that by calling this .setstate. 864 00:50:26,320 --> 00:50:29,470 Next is this thing called shouldComponentUpdate, 865 00:50:29,470 --> 00:50:32,410 which takes the next props and the next date, 866 00:50:32,410 --> 00:50:35,950 and here you can compare change values and decide whether or not 867 00:50:35,950 --> 00:50:37,420 you want that component to render. 868 00:50:37,420 --> 00:50:41,560 And you can actually stop the update cycle here. 869 00:50:41,560 --> 00:50:44,260 870 00:50:44,260 --> 00:50:46,360 And so this is a good optimization. 871 00:50:46,360 --> 00:50:48,500 So say you have a very complicated component 872 00:50:48,500 --> 00:50:52,040 that takes a really long time to render you don't necessarily 873 00:50:52,040 --> 00:50:55,220 want it to render every single time you get a new prop 874 00:50:55,220 --> 00:50:57,470 because it might be that the new prop doesn't actually 875 00:50:57,470 --> 00:50:59,510 change anything that's shown. 876 00:50:59,510 --> 00:51:03,530 And so you could use this method to stop it early. 877 00:51:03,530 --> 00:51:05,420 But that adds a lot of complexity to your app 878 00:51:05,420 --> 00:51:08,870 and there's almost always a premature optimization. 879 00:51:08,870 --> 00:51:12,890 The next happens render, we know exactly what happens there. 880 00:51:12,890 --> 00:51:15,950 And last we have this thing called ComponentDidUpdate, 881 00:51:15,950 --> 00:51:19,010 whereby you can do anything that isn't needed for the UI, 882 00:51:19,010 --> 00:51:21,260 like network requests, which is basically 883 00:51:21,260 --> 00:51:23,950 the analog for ComponentDidMount. 884 00:51:23,950 --> 00:51:27,120 And so let's see an example for this update. 885 00:51:27,120 --> 00:51:35,900 So say rather than just rendering this text we actually 886 00:51:35,900 --> 00:51:39,060 pass this count to another function. 887 00:51:39,060 --> 00:51:49,350 So let's have this thing called a count, which takes as a propped account. 888 00:51:49,350 --> 00:51:54,470 889 00:51:54,470 --> 00:51:57,520 And then let's create this class called count. 890 00:51:57,520 --> 00:52:02,610 891 00:52:02,610 --> 00:52:05,925 And then here, let's first just render the text. 892 00:52:05,925 --> 00:52:12,160 893 00:52:12,160 --> 00:52:22,960 And so now we're back to where we started, where we basically 894 00:52:22,960 --> 00:52:27,690 have some text that gets rendered based on this.PropsAccount, 895 00:52:27,690 --> 00:52:30,560 and let's style it to be larger. 896 00:52:30,560 --> 00:52:38,201 897 00:52:38,201 --> 00:52:40,700 And so now we're basically back to exactly where we started. 898 00:52:40,700 --> 00:52:45,400 We have this app which automatically increments 899 00:52:45,400 --> 00:52:48,910 and then it passes whatever its state count is as the count prop 900 00:52:48,910 --> 00:52:53,130 to this other class that we call count. 901 00:52:53,130 --> 00:52:55,480 And then this component we basically just take 902 00:52:55,480 --> 00:52:59,590 that prop and render that text. 903 00:52:59,590 --> 00:53:05,530 But say we actually only wanted to update on odd numbers. 904 00:53:05,530 --> 00:53:09,630 So say we want to create a new-- 905 00:53:09,630 --> 00:53:15,020 or say we want to have this be called CountEvennumbers. 906 00:53:15,020 --> 00:53:23,290 907 00:53:23,290 --> 00:53:28,080 And so, in this example here, how might we say, 908 00:53:28,080 --> 00:53:34,050 hey don't actually update unless your number is even? 909 00:53:34,050 --> 00:53:39,070 Right now every single time it receives a new prop it's updating. 910 00:53:39,070 --> 00:53:43,140 But say we only wanted to count even numbers, what's some strategy that we 911 00:53:43,140 --> 00:53:46,470 may use in order to skip the rendering for odd numbers 912 00:53:46,470 --> 00:53:48,060 and only render on even numbers? 913 00:53:48,060 --> 00:53:54,780 914 00:53:54,780 --> 00:53:58,630 AUDIENCE: You could use [INAUDIBLE] before an update. 915 00:53:58,630 --> 00:54:02,010 SPEAKER 1: Yeah, so we have this thing called shouldComponentUpdate, 916 00:54:02,010 --> 00:54:03,180 which takes the next props. 917 00:54:03,180 --> 00:54:05,370 And so we have the ability to look at the next props 918 00:54:05,370 --> 00:54:08,140 and decide whether or not we want to update, 919 00:54:08,140 --> 00:54:11,880 and if we return false from this function, the update cycle is over. 920 00:54:11,880 --> 00:54:14,080 It won't render. 921 00:54:14,080 --> 00:54:20,340 And so if in this function we wanted to check if that count were odd 922 00:54:20,340 --> 00:54:22,390 we can abort early. 923 00:54:22,390 --> 00:54:24,000 And so let's actually do that. 924 00:54:24,000 --> 00:54:29,784 So let's have this method called shouldComponentUpdate 925 00:54:29,784 --> 00:54:31,200 and first let's just return false. 926 00:54:31,200 --> 00:54:33,857 927 00:54:33,857 --> 00:54:35,190 Now what's going to happen here? 928 00:54:35,190 --> 00:54:37,910 929 00:54:37,910 --> 00:54:38,790 Nothing. 930 00:54:38,790 --> 00:54:40,530 We can see that it's receiving stuff. 931 00:54:40,530 --> 00:54:48,460 932 00:54:48,460 --> 00:54:53,400 So see down here in the logs we're receiving this thing called 933 00:54:53,400 --> 00:54:56,230 updating every second. 934 00:54:56,230 --> 00:54:58,822 But the UI is just stuck at 0, it never updates 935 00:54:58,822 --> 00:55:01,530 and that's because we're saying hey, should the component update? 936 00:55:01,530 --> 00:55:03,120 No we shouldn't. 937 00:55:03,120 --> 00:55:05,100 And so React is saying, OK, then we're not 938 00:55:05,100 --> 00:55:09,020 going to call this render method and nothing changes over here. 939 00:55:09,020 --> 00:55:14,670 And so how may we change this is such that it only counts the even numbers? 940 00:55:14,670 --> 00:55:19,740 941 00:55:19,740 --> 00:55:35,910 Well we can say return, check to see if the next Props.count is divisible by 2. 942 00:55:35,910 --> 00:55:47,720 And, if it returns true, that means we're an odd number. 943 00:55:47,720 --> 00:55:50,610 But what we want is whether we're an even number. 944 00:55:50,610 --> 00:55:53,714 And so we can actually just say, oh, return the inverse of this. 945 00:55:53,714 --> 00:55:55,880 And now it's only going to count those even numbers. 946 00:55:55,880 --> 00:56:01,456 947 00:56:01,456 --> 00:56:02,330 Does that make sense? 948 00:56:02,330 --> 00:56:06,400 949 00:56:06,400 --> 00:56:10,475 And so say we wanted to do something like send a request 950 00:56:10,475 --> 00:56:16,150 or server every single time this UI updated, 951 00:56:16,150 --> 00:56:18,460 we wouldn't really want to do that in the render cycle, 952 00:56:18,460 --> 00:56:23,060 we wouldn't really want to do it in shouldComponentUpdate. 953 00:56:23,060 --> 00:56:25,258 We can actually do that in ComponentDidUpdate. 954 00:56:25,258 --> 00:56:28,320 955 00:56:28,320 --> 00:56:31,500 And so we can actually do for now let's just console.log. 956 00:56:31,500 --> 00:56:37,130 957 00:56:37,130 --> 00:56:41,760 We can say, hey, we updated it and we created a new number. 958 00:56:41,760 --> 00:56:46,160 And as you see, it's only getting called for those even numbers. 959 00:56:46,160 --> 00:56:49,970 Because first shouldComponentUpdate gets called and then 960 00:56:49,970 --> 00:56:53,020 it renders and then ComponentDidUpdate gets called. 961 00:56:53,020 --> 00:56:56,120 And, since we exit early on all odd numbers, 962 00:56:56,120 --> 00:57:00,410 only the even numbers will reach the render cycle and ComponentDidUpdate. 963 00:57:00,410 --> 00:57:02,900 And so what you see logged are only those even numbers. 964 00:57:02,900 --> 00:57:10,210 965 00:57:10,210 --> 00:57:15,820 So does this concept of updating and methods that automatically 966 00:57:15,820 --> 00:57:19,144 get invoked makes sense to everyone? 967 00:57:19,144 --> 00:57:21,534 AUDIENCE: Could you only do this kind of stuff 968 00:57:21,534 --> 00:57:24,094 with [INAUDIBLE] and not the purely functional ones? 969 00:57:24,094 --> 00:57:24,760 SPEAKER 1: Yeah. 970 00:57:24,760 --> 00:57:28,690 So the question was, do these methods exist on the functional ones? 971 00:57:28,690 --> 00:57:32,890 And they don't because, say this functional components 972 00:57:32,890 --> 00:57:35,260 are literally just functions. 973 00:57:35,260 --> 00:57:37,330 They take props and they return a node. 974 00:57:37,330 --> 00:57:40,570 And so since they're functions, all they do are get invoked. 975 00:57:40,570 --> 00:57:43,022 You pass them props and then you get a node back. 976 00:57:43,022 --> 00:57:44,980 And in order to have these methods you actually 977 00:57:44,980 --> 00:57:50,650 have to have this concept of an instance. 978 00:57:50,650 --> 00:57:53,800 And so React components have instances, and these instances 979 00:57:53,800 --> 00:57:55,720 are tracked throughout their lifecycle. 980 00:57:55,720 --> 00:58:00,310 And since these are class instances React well 981 00:58:00,310 --> 00:58:03,850 go ahead and invoke those methods for you. 982 00:58:03,850 --> 00:58:06,104 And so the stateless functional components 983 00:58:06,104 --> 00:58:08,020 are just functions that get invoked and do not 984 00:58:08,020 --> 00:58:11,980 have these class methods, whereas the React components not only have 985 00:58:11,980 --> 00:58:15,120 these methods but the methods also get invoked automatically for you. 986 00:58:15,120 --> 00:58:16,120 But yeah great question. 987 00:58:16,120 --> 00:58:20,360 988 00:58:20,360 --> 00:58:22,790 So that's the update cycle. 989 00:58:22,790 --> 00:58:26,356 And then lastly we have what's called the unmount cycle. 990 00:58:26,356 --> 00:58:28,730 There's only one thing that happens in the unmount cycle. 991 00:58:28,730 --> 00:58:33,150 You have componentWillUnmount which gives you a chance to clean up. 992 00:58:33,150 --> 00:58:34,280 What do I mean by clean up? 993 00:58:34,280 --> 00:58:40,190 Well, you can remove any event listeners if you had them in React, mostly Web. 994 00:58:40,190 --> 00:58:42,860 You can invalidate any network requests that you have out. 995 00:58:42,860 --> 00:58:45,860 Or lastly you should clear any timeouts or intervals. 996 00:58:45,860 --> 00:58:51,960 And so there's actually some bugs that you can create if you're not careful. 997 00:58:51,960 --> 00:59:00,820 So let's actually revert this back to being 998 00:59:00,820 --> 00:59:07,250 just an app that shows that count. 999 00:59:07,250 --> 00:59:15,810 1000 00:59:15,810 --> 00:59:19,420 So now we have again that number being incremented. 1001 00:59:19,420 --> 00:59:27,750 1002 00:59:27,750 --> 00:59:34,270 And this class called app keeps track of its own number and is updating. 1003 00:59:34,270 --> 00:59:39,300 But say, let's actually call this counter 1004 00:59:39,300 --> 00:59:41,400 and create this thing called app. 1005 00:59:41,400 --> 00:59:50,590 1006 00:59:50,590 --> 00:59:53,342 And in this, let's actually just show the component. 1007 00:59:53,342 --> 01:00:15,490 1008 01:00:15,490 --> 01:00:17,520 So now we have basically the same exact thing. 1009 01:00:17,520 --> 01:00:20,390 So we have this thing called class app which 1010 01:00:20,390 --> 01:00:22,930 just returns an instance of counter. 1011 01:00:22,930 --> 01:00:25,370 And counter is what we've been working on thus far. 1012 01:00:25,370 --> 01:00:28,010 It creates an interval and we'll keep track of that interval 1013 01:00:28,010 --> 01:00:30,220 and keep counting up. 1014 01:00:30,220 --> 01:00:34,010 But say we actually have this button that will toggle whether or not 1015 01:00:34,010 --> 01:00:35,150 this counter is shown. 1016 01:00:35,150 --> 01:00:48,960 And so let's have this thing called state 1017 01:00:48,960 --> 01:00:51,997 and let's have this flag called show counter 1018 01:00:51,997 --> 01:00:53,330 and let's initialize it to true. 1019 01:00:53,330 --> 01:00:57,270 1020 01:00:57,270 --> 01:01:02,070 And then down here we can do something like, 1021 01:01:02,070 --> 01:01:11,320 if you should show the counter then return this. 1022 01:01:11,320 --> 01:01:16,960 1023 01:01:16,960 --> 01:01:19,316 Else let's just return an empty view. 1024 01:01:19,316 --> 01:01:27,750 1025 01:01:27,750 --> 01:01:30,510 And so now this is basically the exact same thing 1026 01:01:30,510 --> 01:01:35,160 because we have no way to change whether or not we want to show the counter. 1027 01:01:35,160 --> 01:01:37,770 But say we did, so let's create toggleCounter. 1028 01:01:37,770 --> 01:01:48,040 1029 01:01:48,040 --> 01:01:50,210 So show counter. 1030 01:01:50,210 --> 01:01:53,280 It should be the opposite of what the previous state show counter was. 1031 01:01:53,280 --> 01:01:56,140 1032 01:01:56,140 --> 01:02:13,480 And let's also have a button that will toggle this counter. 1033 01:02:13,480 --> 01:02:23,370 1034 01:02:23,370 --> 01:02:26,952 And so now we have a button where if we click it, 1035 01:02:26,952 --> 01:02:29,160 we can just toggle whether or not that counter shows. 1036 01:02:29,160 --> 01:02:41,530 1037 01:02:41,530 --> 01:02:44,256 And there's actually a pretty bad bug here. 1038 01:02:44,256 --> 01:02:47,610 1039 01:02:47,610 --> 01:02:51,122 And that is that when we toggled this counter-- 1040 01:02:51,122 --> 01:02:55,590 1041 01:02:55,590 --> 01:02:59,270 oops, we should return this-- 1042 01:02:59,270 --> 01:03:05,450 when you toggle that counter we never actually tell this component, 1043 01:03:05,450 --> 01:03:08,822 hey, stop incrementing. 1044 01:03:08,822 --> 01:03:10,530 It's actually going to keep incrementing. 1045 01:03:10,530 --> 01:03:13,470 And so we can show that if we have here, if we console 1046 01:03:13,470 --> 01:03:24,130 that log we see that it's incrementing, and if we toggle it, 1047 01:03:24,130 --> 01:03:25,600 it's still logging. 1048 01:03:25,600 --> 01:03:27,890 So counters now gone. 1049 01:03:27,890 --> 01:03:34,210 So there's no counter here, it's gone but it keeps saying increment. 1050 01:03:34,210 --> 01:03:44,360 And, if we show it again, now look at how fast it's incrementing. 1051 01:03:44,360 --> 01:03:49,530 It's two every second because the first counter created 1052 01:03:49,530 --> 01:03:53,730 an incrementing function every 1,000 milliseconds and the second time 1053 01:03:53,730 --> 01:03:56,670 we created one it also did. 1054 01:03:56,670 --> 01:03:58,260 And so what if we did this again. 1055 01:03:58,260 --> 01:04:01,680 Toggle and then toggle again. 1056 01:04:01,680 --> 01:04:03,580 Now it's going up three every second. 1057 01:04:03,580 --> 01:04:08,250 And if we did this a bunch of times, you see it's going pretty crazy now. 1058 01:04:08,250 --> 01:04:10,322 It's like five every second. 1059 01:04:10,322 --> 01:04:11,280 And so that's not good. 1060 01:04:11,280 --> 01:04:13,270 That's definitely not good at all. 1061 01:04:13,270 --> 01:04:17,820 Say you had a super complex app and hundreds of timers getting set 1062 01:04:17,820 --> 01:04:19,350 and you kept toggling them. 1063 01:04:19,350 --> 01:04:22,380 Eventually you're going to have a big problem where a bunch of things 1064 01:04:22,380 --> 01:04:25,290 are getting called and nothing should be getting called. 1065 01:04:25,290 --> 01:04:29,640 And so that's like a memory leak and it could cause your app to crash. 1066 01:04:29,640 --> 01:04:33,250 And so how might we go about solving this? 1067 01:04:33,250 --> 01:04:36,360 So, as we alluded to, there's this thing called an unmount cycle 1068 01:04:36,360 --> 01:04:38,370 where we have a chance to clean up. 1069 01:04:38,370 --> 01:04:43,530 We can get rid of any timers that we've created. 1070 01:04:43,530 --> 01:04:46,530 And so you can actually do that here. 1071 01:04:46,530 --> 01:04:48,750 And so, rather than just setting the interval, 1072 01:04:48,750 --> 01:04:51,810 we should actually track that function that we created. 1073 01:04:51,810 --> 01:04:57,990 And so you can do something like this.Interval equals setInterval. 1074 01:04:57,990 --> 01:05:03,620 And so setInterval actually returns like an ID of the interval that you created. 1075 01:05:03,620 --> 01:05:08,560 And so now we're tracking exactly the interval that we created. 1076 01:05:08,560 --> 01:05:12,630 And we can go ahead and right before this component dies, 1077 01:05:12,630 --> 01:05:19,470 so component will unmount, we should actually clean that up. 1078 01:05:19,470 --> 01:05:24,915 We can actually do clearInterval and we pass in that ID. 1079 01:05:24,915 --> 01:05:29,360 1080 01:05:29,360 --> 01:05:34,430 And so now you can see-- 1081 01:05:34,430 --> 01:05:37,805 oops, things did not get updated. 1082 01:05:37,805 --> 01:05:45,422 Let's actually copy all this and refresh the page. 1083 01:05:45,422 --> 01:05:52,060 1084 01:05:52,060 --> 01:05:56,560 And so when this loads, you'll see that it will still 1085 01:05:56,560 --> 01:06:00,050 log when it's getting shown. 1086 01:06:00,050 --> 01:06:05,470 And so as this number is incrementing we can see it saying, oh I'm incrementing. 1087 01:06:05,470 --> 01:06:12,880 But when we toggle it that number no longer goes up. 1088 01:06:12,880 --> 01:06:17,210 And then, if we toggle it again, it's going to continue incrementing. 1089 01:06:17,210 --> 01:06:20,950 And, if we cancel that, that incrementing function 1090 01:06:20,950 --> 01:06:22,710 is no longer getting called. 1091 01:06:22,710 --> 01:06:28,010 And that's because, over here, when the component was created, 1092 01:06:28,010 --> 01:06:33,210 so when the component mounts, we set the interval for this button increment 1093 01:06:33,210 --> 01:06:35,960 to happen every 1,000 seconds. 1094 01:06:35,960 --> 01:06:44,680 But then later when we are no longer returning that counter so 1095 01:06:44,680 --> 01:06:46,180 the instance gets unmounted. 1096 01:06:46,180 --> 01:06:47,850 It's no longer part of the React tree. 1097 01:06:47,850 --> 01:06:53,890 1098 01:06:53,890 --> 01:07:01,100 Before it gets unmounted, we say clear that interval and it clears. 1099 01:07:01,100 --> 01:07:04,480 And then when it remounts it creates a new interval. 1100 01:07:04,480 --> 01:07:08,950 And when it gets unmounted again it goes ahead and clears that interval. 1101 01:07:08,950 --> 01:07:10,930 And so now we no longer have any memory leaks. 1102 01:07:10,930 --> 01:07:14,760 1103 01:07:14,760 --> 01:07:18,350 So does that whole lifecycle process make sense to people? 1104 01:07:18,350 --> 01:07:21,290 Do you have any questions about these methods 1105 01:07:21,290 --> 01:07:27,070 or why we might want to use them? 1106 01:07:27,070 --> 01:07:27,570 Cool. 1107 01:07:27,570 --> 01:07:29,930 Let's take a quick five minute break and then 1108 01:07:29,930 --> 01:07:32,810 after this, we'll go ahead and start writing some React Native. 1109 01:07:32,810 --> 01:07:34,190 Hello and welcome back. 1110 01:07:34,190 --> 01:07:39,350 So if you are following Snack some people had some questions about style 1111 01:07:39,350 --> 01:07:42,140 and whether or not people in industry chose to bundle 1112 01:07:42,140 --> 01:07:44,600 this style with each component. 1113 01:07:44,600 --> 01:07:47,270 And what I tend to see mostly in industry 1114 01:07:47,270 --> 01:07:51,770 is that people do indeed tend to include the styles with each component 1115 01:07:51,770 --> 01:07:54,410 because part of React's component mindset 1116 01:07:54,410 --> 01:07:56,960 is that each component should be a standalone thing 1117 01:07:56,960 --> 01:08:02,210 and it should include with it any event handlers or JavaScript and any style 1118 01:08:02,210 --> 01:08:03,460 as well. 1119 01:08:03,460 --> 01:08:06,710 But there are many compelling reasons to actually remove 1120 01:08:06,710 --> 01:08:08,660 the style outside of that component. 1121 01:08:08,660 --> 01:08:12,170 And one big compelling reason would be something like color themes. 1122 01:08:12,170 --> 01:08:18,080 So say you had some color theme where you really liked crimson in your app 1123 01:08:18,080 --> 01:08:20,450 and everywhere you were using crimson. 1124 01:08:20,450 --> 01:08:25,850 And then say suddenly you wanted to use something like blue. 1125 01:08:25,850 --> 01:08:28,189 If you had everything hard coded to crimson 1126 01:08:28,189 --> 01:08:31,399 it might be a bit of a pain to go through and find every instance 1127 01:08:31,399 --> 01:08:33,390 of that crimson and change it to blue. 1128 01:08:33,390 --> 01:08:38,689 But say you actually abstracted out some value like primary color 1129 01:08:38,689 --> 01:08:41,358 and instead used that in all of your components. 1130 01:08:41,358 --> 01:08:44,149 Then if you wanted to change the primary color from crimson to blue 1131 01:08:44,149 --> 01:08:45,065 it would be very easy. 1132 01:08:45,065 --> 01:08:47,330 You would just do it in one file and be done. 1133 01:08:47,330 --> 01:08:51,200 So there are definitely compelling reasons to remove the styles out 1134 01:08:51,200 --> 01:08:53,810 of a particular component. 1135 01:08:53,810 --> 01:08:57,979 And since React Native uses JavaScript's objects to style components 1136 01:08:57,979 --> 01:09:02,520 it allows you to do stuff like create variables and import them in. 1137 01:09:02,520 --> 01:09:05,270 And so are there reasons to take the style sheets 1138 01:09:05,270 --> 01:09:07,819 outside of any particular component. 1139 01:09:07,819 --> 01:09:09,920 But generally if you have a choice it's easier 1140 01:09:09,920 --> 01:09:13,970 to just leave it in there for organization sake. 1141 01:09:13,970 --> 01:09:15,330 Cool. 1142 01:09:15,330 --> 01:09:21,920 And so up until now we've been writing a lot of React Native in this browser 1143 01:09:21,920 --> 01:09:22,700 environment. 1144 01:09:22,700 --> 01:09:26,300 And so let's actually figure out and talk about how we actually 1145 01:09:26,300 --> 01:09:30,319 write React Native if you were to start your own personal project 1146 01:09:30,319 --> 01:09:33,479 or assignment for the course. 1147 01:09:33,479 --> 01:09:36,689 So I've been talking about this company called Expo quite a bit. 1148 01:09:36,689 --> 01:09:40,149 And what they do is they create a very fast way to build an app. 1149 01:09:40,149 --> 01:09:41,899 They provide a lot of tooling around React 1150 01:09:41,899 --> 01:09:45,201 Native and the React native community. 1151 01:09:45,201 --> 01:09:48,200 So there are a suite of tools to accelerate the React Native development 1152 01:09:48,200 --> 01:09:49,247 process. 1153 01:09:49,247 --> 01:09:51,080 And so one that we've been using quite a lot 1154 01:09:51,080 --> 01:09:54,890 is this thing called Snack, which is this website here. 1155 01:09:54,890 --> 01:10:00,470 We've used it this course, a lot this lecture and last. 1156 01:10:00,470 --> 01:10:03,530 And what that allows us to do is run React Native in the browser. 1157 01:10:03,530 --> 01:10:06,020 So it automatically bundles any libraries 1158 01:10:06,020 --> 01:10:09,770 that we need like React Native, React, and then 1159 01:10:09,770 --> 01:10:12,320 it also runs on a phone embedded into the browser. 1160 01:10:12,320 --> 01:10:16,100 1161 01:10:16,100 --> 01:10:19,130 They also give us a tool called the XDE which 1162 01:10:19,130 --> 01:10:23,930 is a GUI, graphical user interface, to serve share and publish any Expo 1163 01:10:23,930 --> 01:10:26,240 projects that you have. 1164 01:10:26,240 --> 01:10:28,280 They also give us a command line interface to do 1165 01:10:28,280 --> 01:10:31,800 the same things, to be a command line. 1166 01:10:31,800 --> 01:10:36,050 They give us the Expo client which, if you saw my email from earlier, 1167 01:10:36,050 --> 01:10:40,340 is an iPhone app that you can install and actually run stuff 1168 01:10:40,340 --> 01:10:44,630 that you write in Snack or stuff that you write and manage 1169 01:10:44,630 --> 01:10:49,940 by the XDE or the CLI to actually run it on your phone while developing 1170 01:10:49,940 --> 01:10:52,550 and before you publish. 1171 01:10:52,550 --> 01:10:55,640 And lastly they give us an SDK, software development kit, 1172 01:10:55,640 --> 01:10:59,570 which bundles and exposes cross-platform libraries and APIs. 1173 01:10:59,570 --> 01:11:07,580 And so included in that are maps, stuff for like icons and images and SVGs 1174 01:11:07,580 --> 01:11:09,140 and maybe animations. 1175 01:11:09,140 --> 01:11:10,700 They also give us handy constants. 1176 01:11:10,700 --> 01:11:16,640 So the Expo that we imported into this app is actually the SDK, 1177 01:11:16,640 --> 01:11:20,960 and it gave us a constant like, we didn't use it here 1178 01:11:20,960 --> 01:11:24,680 but, the height of the status bar. 1179 01:11:24,680 --> 01:11:27,170 And so they give us a lot of helpful things 1180 01:11:27,170 --> 01:11:31,030 to really get our developing process moving forward. 1181 01:11:31,030 --> 01:11:34,790 And so let's take a look at this thing called the XDE. 1182 01:11:34,790 --> 01:11:36,230 So I have it here. 1183 01:11:36,230 --> 01:11:40,070 1184 01:11:40,070 --> 01:11:43,970 It's a little bit small but basically what this is is it 1185 01:11:43,970 --> 01:11:46,350 allows us to create and run projects. 1186 01:11:46,350 --> 01:11:51,390 And so I actually already created this project before the class, 1187 01:11:51,390 --> 01:11:55,550 but when you do create your project it allows you to choose a template 1188 01:11:55,550 --> 01:12:00,560 and basically create the directory and all of its dependencies 1189 01:12:00,560 --> 01:12:01,790 on your computer. 1190 01:12:01,790 --> 01:12:06,320 And so, if you started with the blank like I did and created my new project, 1191 01:12:06,320 --> 01:12:13,520 it gives you a chance to save it wherever you'd like. 1192 01:12:13,520 --> 01:12:16,490 But I already went and did that process and created my new project. 1193 01:12:16,490 --> 01:12:18,560 And so, if you want to follow along at home, 1194 01:12:18,560 --> 01:12:22,520 you just do create new project, blank, save it wherever you like 1195 01:12:22,520 --> 01:12:26,280 and then you end up right here. 1196 01:12:26,280 --> 01:12:29,090 And basically what this is, is this is running a bunch of things 1197 01:12:29,090 --> 01:12:32,900 behind the scenes including React Native packager which handles the bundling 1198 01:12:32,900 --> 01:12:38,270 and whatnot of your app and any logs if you want to console log, 1199 01:12:38,270 --> 01:12:40,580 will also appear in this XDE. 1200 01:12:40,580 --> 01:12:43,550 And so what it's doing is it's actually looking in that directory 1201 01:12:43,550 --> 01:12:45,828 that it created on your computer. 1202 01:12:45,828 --> 01:12:54,110 1203 01:12:54,110 --> 01:12:57,890 And so if you create it and then CD into the correct directory on your computer 1204 01:12:57,890 --> 01:12:58,970 you end up right here. 1205 01:12:58,970 --> 01:13:01,942 1206 01:13:01,942 --> 01:13:03,650 And so when you create a new file you see 1207 01:13:03,650 --> 01:13:09,100 this thing called app.json which is basically 1208 01:13:09,100 --> 01:13:11,600 a bunch of metadata that's created about your project and is 1209 01:13:11,600 --> 01:13:14,810 how Expo tracks your app. 1210 01:13:14,810 --> 01:13:16,560 And then you see this thing called app.js. 1211 01:13:16,560 --> 01:13:20,480 1212 01:13:20,480 --> 01:13:27,400 And that is basically the bare bones React Native app that you start with. 1213 01:13:27,400 --> 01:13:35,506 And when you run it, if you open it up on a device, you see it run here. 1214 01:13:35,506 --> 01:13:38,860 1215 01:13:38,860 --> 01:13:42,680 And so this says, open up app.js to start working on your app. 1216 01:13:42,680 --> 01:13:55,560 And if I were to change the text here and save, we can see it re-bundle. 1217 01:13:55,560 --> 01:13:57,690 It's currently building that new JavaScript bundle 1218 01:13:57,690 --> 01:14:03,270 and then you see here, live on the phone, that you did update that text. 1219 01:14:03,270 --> 01:14:05,890 1220 01:14:05,890 --> 01:14:10,200 And so, if you want to start working on your project earlier 1221 01:14:10,200 --> 01:14:13,680 or work on any personal projects of your own, you're welcome to use Expo. 1222 01:14:13,680 --> 01:14:16,470 I actually encourage you to use Expo because they 1223 01:14:16,470 --> 01:14:19,260 take a lot of annoying and difficult parts 1224 01:14:19,260 --> 01:14:21,107 about creating projects and publishing them 1225 01:14:21,107 --> 01:14:23,940 and do all the hard work for you so that all you have to worry about 1226 01:14:23,940 --> 01:14:25,231 is writing the JavaScript here. 1227 01:14:25,231 --> 01:14:30,330 1228 01:14:30,330 --> 01:14:31,320 Cool. 1229 01:14:31,320 --> 01:14:35,409 And so we've been doing this thing a lot in this lecture and previous ones 1230 01:14:35,409 --> 01:14:36,700 called importing and exporting. 1231 01:14:36,700 --> 01:14:39,350 And we haven't actually talked about what is. 1232 01:14:39,350 --> 01:14:42,450 And so we have talked a lot about components 1233 01:14:42,450 --> 01:14:44,822 and how we should break up components. 1234 01:14:44,822 --> 01:14:48,790 And it's actually also highly encouraged that you break up the components 1235 01:14:48,790 --> 01:14:50,280 into their own files. 1236 01:14:50,280 --> 01:14:53,514 And so we've seen that components are great for simplifying your code 1237 01:14:53,514 --> 01:14:55,680 and we can actually split them into their own files. 1238 01:14:55,680 --> 01:15:00,870 And then what this allows us to do is help organize the project even more. 1239 01:15:00,870 --> 01:15:04,620 Rather than having everything all in one big super long file, which 1240 01:15:04,620 --> 01:15:07,080 might get very unwieldy, we can actually organize things 1241 01:15:07,080 --> 01:15:10,650 into their own separate files or even separate folders 1242 01:15:10,650 --> 01:15:14,540 so it's easy to find whatever code you need to update. 1243 01:15:14,540 --> 01:15:17,910 Then what we do is from the file that we create we actually 1244 01:15:17,910 --> 01:15:20,800 export the component that we want. 1245 01:15:20,800 --> 01:15:25,620 And then we can then import it in to another file if we want to use it. 1246 01:15:25,620 --> 01:15:27,732 1247 01:15:27,732 --> 01:15:30,190 And there are a couple different ways to import and export. 1248 01:15:30,190 --> 01:15:32,310 There's this thing called a default export, 1249 01:15:32,310 --> 01:15:35,190 and there's this thing called a named import and export. 1250 01:15:35,190 --> 01:15:39,760 And so what I was typing a lot earlier is you see me type 1251 01:15:39,760 --> 01:15:42,380 this thing called export default class app. 1252 01:15:42,380 --> 01:15:45,810 And that's me saying, hey from this file here I actually 1253 01:15:45,810 --> 01:15:47,370 want to export this app. 1254 01:15:47,370 --> 01:15:50,360 And it should be the default export. 1255 01:15:50,360 --> 01:15:52,590 And so let's take a look at what that looks here. 1256 01:15:52,590 --> 01:15:56,580 And so in app.js in a brand new directory I went and-- 1257 01:15:56,580 --> 01:15:59,190 1258 01:15:59,190 --> 01:16:02,190 the boiler plate code says export this default class app. 1259 01:16:02,190 --> 01:16:04,240 But say I want to in a new file. 1260 01:16:04,240 --> 01:16:08,330 So let me create a new file called let's just call it count.js. 1261 01:16:08,330 --> 01:16:10,950 1262 01:16:10,950 --> 01:16:17,670 From here let's first import from React, which is something that we 1263 01:16:17,670 --> 01:16:19,950 have to do in every single file. 1264 01:16:19,950 --> 01:16:22,860 And let's create this component called Count. 1265 01:16:22,860 --> 01:16:27,060 So let's do const Count equals props and then 1266 01:16:27,060 --> 01:16:29,850 let's return this thing called a view. 1267 01:16:29,850 --> 01:16:35,064 And then have props.count show. 1268 01:16:35,064 --> 01:16:36,480 Actually, let's have this be text. 1269 01:16:36,480 --> 01:16:43,810 1270 01:16:43,810 --> 01:16:48,340 So this won't actually work because we're using this component called 1271 01:16:48,340 --> 01:16:51,490 Text here which doesn't exist. 1272 01:16:51,490 --> 01:16:56,170 So Text here, capital T capital Text, is a component 1273 01:16:56,170 --> 01:17:01,500 but this file has no idea what Text is, what capital Text is. 1274 01:17:01,500 --> 01:17:03,140 It's a component. 1275 01:17:03,140 --> 01:17:06,310 We know it's a component because it's in JSX and capitalized 1276 01:17:06,310 --> 01:17:09,500 but nowhere in this file do we declare this thing called Text. 1277 01:17:09,500 --> 01:17:13,990 And so we actually have to import it from the library called React Native. 1278 01:17:13,990 --> 01:17:25,200 1279 01:17:25,200 --> 01:17:28,530 And so you've seen me before in the example 1280 01:17:28,530 --> 01:17:31,240 files do this thing called import Text from React Native. 1281 01:17:31,240 --> 01:17:36,240 And what that the actually does is it goes into that React Native API code 1282 01:17:36,240 --> 01:17:40,030 and gives you access to the variable that they're exporting called Text. 1283 01:17:40,030 --> 01:17:43,980 And then when we go ahead and use it here 1284 01:17:43,980 --> 01:17:47,230 the JavaScript knows that this variable context exists. 1285 01:17:47,230 --> 01:17:54,660 And so how are we going to get this component called Count into our app? 1286 01:17:54,660 --> 01:17:57,190 1287 01:17:57,190 --> 01:18:05,800 So say I wanted to hear a display count and passed an account of 0. 1288 01:18:05,800 --> 01:18:09,010 1289 01:18:09,010 --> 01:18:11,380 So if I save this and try to run it, it's 1290 01:18:11,380 --> 01:18:16,670 going to error because this variable called Count doesn't exist, 1291 01:18:16,670 --> 01:18:18,730 which makes sense right? 1292 01:18:18,730 --> 01:18:23,320 In this app.js file we haven't created a variable called Count. 1293 01:18:23,320 --> 01:18:29,110 We actually created it in a separate file called count.js. 1294 01:18:29,110 --> 01:18:32,710 And so as I alluded to, you can actually export a component from a file 1295 01:18:32,710 --> 01:18:34,740 and import it into a new file. 1296 01:18:34,740 --> 01:18:39,025 And so we can actually, over here, just use this term called export. 1297 01:18:39,025 --> 01:18:43,050 1298 01:18:43,050 --> 01:18:45,670 And if we go ahead and save this then now we 1299 01:18:45,670 --> 01:18:50,785 can try to import this thing called Count from-- 1300 01:18:50,785 --> 01:18:54,190 1301 01:18:54,190 --> 01:18:54,826 where is it? 1302 01:18:54,826 --> 01:18:56,950 Well, it's in the current directory, so ./Count.js. 1303 01:18:56,950 --> 01:19:01,210 1304 01:19:01,210 --> 01:19:07,060 And so now if we save that we can see that it compiles and we 1305 01:19:07,060 --> 01:19:10,450 see that 0 show up. 1306 01:19:10,450 --> 01:19:14,190 And so let's make it a little bit bigger so that's easier to see. 1307 01:19:14,190 --> 01:19:15,680 And so how are we going to do that? 1308 01:19:15,680 --> 01:19:20,880 Let's create this constant called styles and let's have stylesheet.create. 1309 01:19:20,880 --> 01:19:25,510 1310 01:19:25,510 --> 01:19:30,750 And let's just have a font size of 72. 1311 01:19:30,750 --> 01:19:35,200 1312 01:19:35,200 --> 01:19:45,131 And then here let's just do style is that Styles object that we created. 1313 01:19:45,131 --> 01:19:47,380 And if we save this and run it what's going to happen? 1314 01:19:47,380 --> 01:19:49,212 It's going to error. 1315 01:19:49,212 --> 01:19:50,170 And why is it erroring? 1316 01:19:50,170 --> 01:19:54,210 Well it says cannot find variable called stylesheet, which makes sense right? 1317 01:19:54,210 --> 01:19:59,237 In this file here nowhere is there a variable called stylesheet. 1318 01:19:59,237 --> 01:20:01,820 And so we actually also have to import that from React Native. 1319 01:20:01,820 --> 01:20:06,190 1320 01:20:06,190 --> 01:20:08,720 And so if we run that and save it, lo and behold, 1321 01:20:08,720 --> 01:20:11,010 it rhymes and the style is applied. 1322 01:20:11,010 --> 01:20:14,420 We see a big number 0 there. 1323 01:20:14,420 --> 01:20:16,550 And so that is called a named export. 1324 01:20:16,550 --> 01:20:21,110 We exported a named variable called Count. 1325 01:20:21,110 --> 01:20:27,400 And then in here in brackets we say import all of the variables named Count 1326 01:20:27,400 --> 01:20:31,880 that we exported from ./Count.js. 1327 01:20:31,880 --> 01:20:33,770 And so that is an example of a named export. 1328 01:20:33,770 --> 01:20:41,818 And say we wanted to export another named variable we can do export const-- 1329 01:20:41,818 --> 01:20:44,954 1330 01:20:44,954 --> 01:20:51,890 let's just call it num, and let's have it be the number 50. 1331 01:20:51,890 --> 01:20:57,800 And we can, over here, do import Count and also num count.js. 1332 01:20:57,800 --> 01:21:02,380 And then rather than passing in 0 we can just pass in num. 1333 01:21:02,380 --> 01:21:06,510 And as we see over here now it's the number 50. 1334 01:21:06,510 --> 01:21:07,200 Why is that? 1335 01:21:07,200 --> 01:21:12,200 Well in Count.js we exported two variables. 1336 01:21:12,200 --> 01:21:15,950 One we called Count, so capital Count here. 1337 01:21:15,950 --> 01:21:18,600 We have a const called Count and we're exporting that. 1338 01:21:18,600 --> 01:21:21,690 And so it's a named variable that's getting exported. 1339 01:21:21,690 --> 01:21:25,110 Over here we have a constant called num, and we're exporting that, 1340 01:21:25,110 --> 01:21:28,410 so there's also a named variable called num that's getting exported. 1341 01:21:28,410 --> 01:21:30,810 Then over here in our app file we actually 1342 01:21:30,810 --> 01:21:33,399 import to this thing called Count and num. 1343 01:21:33,399 --> 01:21:35,190 And so the names do matter because it needs 1344 01:21:35,190 --> 01:21:38,074 to know exactly what we're importing in. 1345 01:21:38,074 --> 01:21:40,740 And then we go ahead and use those and they show up as expected. 1346 01:21:40,740 --> 01:21:43,570 1347 01:21:43,570 --> 01:21:46,890 And so those are called named imports and named exports 1348 01:21:46,890 --> 01:21:49,890 but there's also this thing called a default export. 1349 01:21:49,890 --> 01:21:55,320 And so you see here we have an additional term called export default 1350 01:21:55,320 --> 01:21:56,830 this value. 1351 01:21:56,830 --> 01:22:00,380 And so in our Count file over here let's get rid of-- 1352 01:22:00,380 --> 01:22:02,130 or let's not actually get rid of anything 1353 01:22:02,130 --> 01:22:07,550 and let's actually do export default. And then just 1354 01:22:07,550 --> 01:22:10,490 give it a value to export. 1355 01:22:10,490 --> 01:22:14,090 So export default this function that we're creating 1356 01:22:14,090 --> 01:22:17,120 and if we want to make this more obvious what's happening here 1357 01:22:17,120 --> 01:22:24,380 we can actually do const Count equals this. 1358 01:22:24,380 --> 01:22:27,830 And then we can do export default Count, which 1359 01:22:27,830 --> 01:22:31,530 is saying set the default export of this file to be Count. 1360 01:22:31,530 --> 01:22:33,705 1361 01:22:33,705 --> 01:22:35,330 And then how are we going to import it? 1362 01:22:35,330 --> 01:22:39,650 Well, rather than importing these name things 1363 01:22:39,650 --> 01:22:44,840 we just say we want to import this thing from Count.js. 1364 01:22:44,840 --> 01:22:47,360 And since we've dropped those brackets we 1365 01:22:47,360 --> 01:22:50,500 say just import whatever is default exporting. 1366 01:22:50,500 --> 01:22:53,120 And we're going to call it here Count. 1367 01:22:53,120 --> 01:22:56,540 And so if you notice it works-- 1368 01:22:56,540 --> 01:23:05,630 oops as long as I save all the files but I never-- 1369 01:23:05,630 --> 01:23:06,800 let's change this back to 0. 1370 01:23:06,800 --> 01:23:10,800 1371 01:23:10,800 --> 01:23:14,285 And so now as you notice it is showing that 0 value as expected. 1372 01:23:14,285 --> 01:23:17,290 1373 01:23:17,290 --> 01:23:19,970 But let's actually call this something else. 1374 01:23:19,970 --> 01:23:22,950 So let's call this custom Count. 1375 01:23:22,950 --> 01:23:29,980 1376 01:23:29,980 --> 01:23:34,900 So even though over here we're exporting a variable called 1377 01:23:34,900 --> 01:23:39,790 Count, since we're are using it as a default export, 1378 01:23:39,790 --> 01:23:45,330 we can import the default export in this file and call it whatever you want. 1379 01:23:45,330 --> 01:23:50,390 And so we can call it custom Count over here and it still works as expected. 1380 01:23:50,390 --> 01:23:55,060 And so the difference between named and default exports are that named, 1, 1381 01:23:55,060 --> 01:24:00,460 you can export multiple of named exports and also 1382 01:24:00,460 --> 01:24:04,420 import to multiple named exports from a different file. 1383 01:24:04,420 --> 01:24:10,100 And they do have to be named exactly as they are in the other files. 1384 01:24:10,100 --> 01:24:12,250 But when you export something default you're 1385 01:24:12,250 --> 01:24:14,770 limited to only exporting one which makes sense. 1386 01:24:14,770 --> 01:24:19,087 If you exported multiple defaults you wouldn't know which one to import. 1387 01:24:19,087 --> 01:24:20,920 And then over here, you can call it whatever 1388 01:24:20,920 --> 01:24:26,080 you want because it doesn't matter, it's just the default export. 1389 01:24:26,080 --> 01:24:28,450 And so that's how you're going to go about starting 1390 01:24:28,450 --> 01:24:35,540 to remove components from one long file and move them into separate files. 1391 01:24:35,540 --> 01:24:45,910 And so you can also actually import the export default and also named exports. 1392 01:24:45,910 --> 01:24:50,330 1393 01:24:50,330 --> 01:24:57,440 So here we are exporting a named export and we're also having a default export. 1394 01:24:57,440 --> 01:25:05,340 And in here we're importing the default and we're also importing a named export 1395 01:25:05,340 --> 01:25:07,780 and, as you see, that works as well. 1396 01:25:07,780 --> 01:25:10,720 1397 01:25:10,720 --> 01:25:15,920 And so over here you see that we are importing React from React which 1398 01:25:15,920 --> 01:25:19,490 is whatever its default export is. 1399 01:25:19,490 --> 01:25:25,160 We could also import one of its named exports, 1400 01:25:25,160 --> 01:25:28,000 and rather than extending a React.component 1401 01:25:28,000 --> 01:25:32,300 we can just extend component here because we 1402 01:25:32,300 --> 01:25:37,040 went ahead and imported the named export called component from React. 1403 01:25:37,040 --> 01:25:39,180 And so that will also work as well. 1404 01:25:39,180 --> 01:25:43,890 1405 01:25:43,890 --> 01:25:46,610 So any questions on importing and exporting 1406 01:25:46,610 --> 01:25:50,270 and how you would go about breaking up particular components 1407 01:25:50,270 --> 01:25:53,310 into separate files? 1408 01:25:53,310 --> 01:25:54,310 Yeah. 1409 01:25:54,310 --> 01:26:00,810 AUDIENCE: You were able to access the components with React.components. 1410 01:26:00,810 --> 01:26:07,310 Is that because the component is [INAUDIBLE] named export and the value 1411 01:26:07,310 --> 01:26:09,310 in the React.components? 1412 01:26:09,310 --> 01:26:10,310 SPEAKER 1: Yes exactly. 1413 01:26:10,310 --> 01:26:14,140 So the question was, I was able to access component 1414 01:26:14,140 --> 01:26:22,000 as React.component and separately also as component 1415 01:26:22,000 --> 01:26:25,690 and that's because this thing called component is actually 1416 01:26:25,690 --> 01:26:30,250 a property on this React. 1417 01:26:30,250 --> 01:26:34,360 And so what React exports is both a default export, which 1418 01:26:34,360 --> 01:26:41,650 is this massive thing where one of its object keys is called a component 1419 01:26:41,650 --> 01:26:45,730 and has the value of the component and it's also separately exporting 1420 01:26:45,730 --> 01:26:47,590 a named export called component. 1421 01:26:47,590 --> 01:26:51,860 And so we can go ahead and either import the default export and do that 1422 01:26:51,860 --> 01:26:55,470 .component or we can import the named component and just use that. 1423 01:26:55,470 --> 01:26:57,390 So you're absolutely correct. 1424 01:26:57,390 --> 01:27:01,230 1425 01:27:01,230 --> 01:27:04,220 Any other questions on importing and exporting? 1426 01:27:04,220 --> 01:27:07,930 1427 01:27:07,930 --> 01:27:08,430 Cool. 1428 01:27:08,430 --> 01:27:12,850 So when we go ahead and import and export components 1429 01:27:12,850 --> 01:27:18,110 they can start to get more and more complex as we pass down more props. 1430 01:27:18,110 --> 01:27:22,330 And so how might we go about keeping track of all of these props? 1431 01:27:22,330 --> 01:27:25,420 Well React actually has a way to help you with that, 1432 01:27:25,420 --> 01:27:27,640 and it's called prop types. 1433 01:27:27,640 --> 01:27:31,540 And so React can actually validate the types of a given components props 1434 01:27:31,540 --> 01:27:34,130 at runtime which is great. 1435 01:27:34,130 --> 01:27:37,220 It's a development tool that allows you as a developer 1436 01:27:37,220 --> 01:27:39,220 to ensure that you're passing the props that you 1437 01:27:39,220 --> 01:27:40,678 think you're actually passing down. 1438 01:27:40,678 --> 01:27:44,650 And so say you're passing down some prop that's a number 1439 01:27:44,650 --> 01:27:46,750 but you actually want it as a string. 1440 01:27:46,750 --> 01:27:52,262 It's very easy, as your project scales up, to kind of get those mixed up 1441 01:27:52,262 --> 01:27:54,220 and maybe you pass down a string when you meant 1442 01:27:54,220 --> 01:27:57,530 to pass down a number or vise versa. 1443 01:27:57,530 --> 01:28:01,840 And so this thing called PropTypes allows you to keep track of that. 1444 01:28:01,840 --> 01:28:06,590 And React will actually do this automatically in development mode. 1445 01:28:06,590 --> 01:28:09,370 And this is also great because it helps document your APIs. 1446 01:28:09,370 --> 01:28:17,560 And so I have this very simple component over here called Count 1447 01:28:17,560 --> 01:28:19,720 and it takes a single prop called Count. 1448 01:28:19,720 --> 01:28:22,545 But say it also took three other props and say 1449 01:28:22,545 --> 01:28:27,910 it also had 10 other components that also took their own props. 1450 01:28:27,910 --> 01:28:32,020 It might get kind of hard to remember that as I scale the project. 1451 01:28:32,020 --> 01:28:33,820 And say you're somebody like Facebook who 1452 01:28:33,820 --> 01:28:37,510 have something like 30,000 different components in production 1453 01:28:37,510 --> 01:28:39,720 it would be very painful to not have those documented 1454 01:28:39,720 --> 01:28:42,700 and have to go and read the code to know exactly what props you should 1455 01:28:42,700 --> 01:28:44,150 be passing. 1456 01:28:44,150 --> 01:28:48,100 And so by declaring this thing called PropTypes 1457 01:28:48,100 --> 01:28:51,690 you actually can help self document all of these APIs. 1458 01:28:51,690 --> 01:28:53,920 And what's nice is this only runs in development mode 1459 01:28:53,920 --> 01:28:56,086 and so you don't have to worry about it slowing down 1460 01:28:56,086 --> 01:28:59,690 your production in production mode. 1461 01:28:59,690 --> 01:29:02,140 And so how might we go about doing that? 1462 01:29:02,140 --> 01:29:04,210 There's actually a package called PropTypes. 1463 01:29:04,210 --> 01:29:07,120 It used to be bundled as part of React but they've 1464 01:29:07,120 --> 01:29:12,850 since split it into its own module though it's still 1465 01:29:12,850 --> 01:29:14,470 maintained by Facebook. 1466 01:29:14,470 --> 01:29:18,940 So we can go ahead and do this thing called import PropTypes 1467 01:29:18,940 --> 01:29:20,890 from a package called prop-types. 1468 01:29:20,890 --> 01:29:24,970 1469 01:29:24,970 --> 01:29:27,580 And so now we have access to this variable called PropTypes 1470 01:29:27,580 --> 01:29:33,940 where importing the default export of whatever this library called 1471 01:29:33,940 --> 01:29:35,570 PropTypes is. 1472 01:29:35,570 --> 01:29:37,780 And so now we can go ahead and use that in our file. 1473 01:29:37,780 --> 01:29:41,980 And so let's go ahead and do Count. 1474 01:29:41,980 --> 01:29:45,230 And so we created this variable called Count, 1475 01:29:45,230 --> 01:29:49,010 which is a function of a stateless functional component. 1476 01:29:49,010 --> 01:29:55,490 And we can actually attached to it a property called propTypes. 1477 01:29:55,490 --> 01:29:57,790 Note that it's a lower case p here. 1478 01:29:57,790 --> 01:30:01,050 1479 01:30:01,050 --> 01:30:04,380 And I can set it equal to an object and the keys of this object 1480 01:30:04,380 --> 01:30:07,690 will map to whatever props that I expect. 1481 01:30:07,690 --> 01:30:11,590 And so in this case we expect a single prop called Count. 1482 01:30:11,590 --> 01:30:16,390 And so I can say Count should be of what type, well PropTypes. 1483 01:30:16,390 --> 01:30:20,480 So capital P here is referring to the library that we just imported. 1484 01:30:20,480 --> 01:30:24,720 And we can say we want a number, and it's required. 1485 01:30:24,720 --> 01:30:28,140 1486 01:30:28,140 --> 01:30:33,630 And so now we see this warning. 1487 01:30:33,630 --> 01:30:38,400 We see, hey, there's a failed prop type here. 1488 01:30:38,400 --> 01:30:41,940 The prop count is marked as required in this component 1489 01:30:41,940 --> 01:30:44,430 called Count but it's values undefined. 1490 01:30:44,430 --> 01:30:46,120 Why is it undefined? 1491 01:30:46,120 --> 01:30:49,830 Well because we're importing this thing called number 1492 01:30:49,830 --> 01:30:52,140 and we're passing this thing called number over here. 1493 01:30:52,140 --> 01:30:56,650 But we're not actually exporting anything called number in this module. 1494 01:30:56,650 --> 01:31:03,990 And say we actually remove that and passed a 0 here. 1495 01:31:03,990 --> 01:31:06,540 1496 01:31:06,540 --> 01:31:08,250 Now it'll run as expected. 1497 01:31:08,250 --> 01:31:11,160 There are no warnings thrown. 1498 01:31:11,160 --> 01:31:16,380 And now let's try simulating a mistake where rather than passing the number 0 1499 01:31:16,380 --> 01:31:20,700 we go ahead and pass the string 0. 1500 01:31:20,700 --> 01:31:25,170 The app will still work because we're just displaying whatever we pass. 1501 01:31:25,170 --> 01:31:29,280 But if you notice we have a warning here. 1502 01:31:29,280 --> 01:31:30,570 Warning: Failed prop type. 1503 01:31:30,570 --> 01:31:33,810 Invalid prop count of type string supplied to count. 1504 01:31:33,810 --> 01:31:35,635 We were actually expecting a number. 1505 01:31:35,635 --> 01:31:38,310 And so that's actually React's built-in prop type 1506 01:31:38,310 --> 01:31:42,390 system which is checking against the types that we're passing down here. 1507 01:31:42,390 --> 01:31:45,310 We say, hey we're expecting this thing as a number 1508 01:31:45,310 --> 01:31:48,945 but since we pass a string it will throw a warning for us just to let us know, 1509 01:31:48,945 --> 01:31:51,070 oh by the way I don't know if you know this or not, 1510 01:31:51,070 --> 01:31:53,320 but you're passing the wrong type down. 1511 01:31:53,320 --> 01:31:55,710 And so we can use this thing called prop types in order 1512 01:31:55,710 --> 01:32:00,872 to validate the props that were passed. 1513 01:32:00,872 --> 01:32:02,580 And so in stateless functional components 1514 01:32:02,580 --> 01:32:05,910 we actually just add this as a property. 1515 01:32:05,910 --> 01:32:09,720 But say this were actually a class component. 1516 01:32:09,720 --> 01:32:22,680 So let's do class Count, extends React.component. 1517 01:32:22,680 --> 01:32:28,037 And then we have a render which will just return this. 1518 01:32:28,037 --> 01:32:33,350 1519 01:32:33,350 --> 01:32:35,510 And let's fix some styling so it's easier to read. 1520 01:32:35,510 --> 01:32:40,500 1521 01:32:40,500 --> 01:32:48,260 So now we have a class component and as long as there are no syntax errors-- 1522 01:32:48,260 --> 01:32:51,060 1523 01:32:51,060 --> 01:32:57,220 There's a syntax error somewhere that I don't see. 1524 01:32:57,220 --> 01:32:58,730 Does anybody see the syntax error? 1525 01:32:58,730 --> 01:33:00,423 Can anybody beat me to it? 1526 01:33:00,423 --> 01:33:03,522 AUDIENCE: Is that last a parentheses or is that a bracket? 1527 01:33:03,522 --> 01:33:05,105 SPEAKER 1: This here is a parentheses. 1528 01:33:05,105 --> 01:33:07,700 Oh, yep. 1529 01:33:07,700 --> 01:33:08,445 Nice catch. 1530 01:33:08,445 --> 01:33:09,320 I owe you some candy. 1531 01:33:09,320 --> 01:33:12,080 1532 01:33:12,080 --> 01:33:15,380 So now if we go ahead and reload this, it 1533 01:33:15,380 --> 01:33:21,890 can't find the called props because class component 1534 01:33:21,890 --> 01:33:24,020 is stored as this.props. 1535 01:33:24,020 --> 01:33:27,809 And now we can go ahead and see that it is as expected. 1536 01:33:27,809 --> 01:33:29,600 We still have that failed prop type message 1537 01:33:29,600 --> 01:33:33,980 because we're passing a string rather than a number but it's working. 1538 01:33:33,980 --> 01:33:37,680 And so we can go ahead and so we create the class here. 1539 01:33:37,680 --> 01:33:41,520 And then we go ahead and do Count.propTypes here which works. 1540 01:33:41,520 --> 01:33:46,040 But generally the way that you see the convention is actually 1541 01:33:46,040 --> 01:33:49,590 to use this thing called a static method. 1542 01:33:49,590 --> 01:33:54,940 And so there's actually a static keyword where you can do static propTypes 1543 01:33:54,940 --> 01:33:56,630 equals that object. 1544 01:33:56,630 --> 01:34:02,090 1545 01:34:02,090 --> 01:34:07,360 So functionally exactly the same, but the convention is to use this thing 1546 01:34:07,360 --> 01:34:13,240 called a static method or a static property 1547 01:34:13,240 --> 01:34:18,770 because it's just the way that the new class index works. 1548 01:34:18,770 --> 01:34:23,340 And so it's functionally the same as doing count.propTypes down here, 1549 01:34:23,340 --> 01:34:25,465 but the convention is just to use the newer syntax. 1550 01:34:25,465 --> 01:34:28,490 1551 01:34:28,490 --> 01:34:31,870 So any questions on PropTypes? 1552 01:34:31,870 --> 01:34:34,720 Does everybody see the utility of using them? 1553 01:34:34,720 --> 01:34:37,585 They've definitely saved me multiple times on personal projects. 1554 01:34:37,585 --> 01:34:43,830 1555 01:34:43,830 --> 01:34:50,050 And so now, if we've passed the correct props, there are no warnings. 1556 01:34:50,050 --> 01:34:50,550 Great. 1557 01:34:50,550 --> 01:34:56,065 And the last concept I wanted to touch on is just how the heck do I read docs. 1558 01:34:56,065 --> 01:34:58,440 Because I can't possibly teach you every single component 1559 01:34:58,440 --> 01:35:00,180 that React Native offers. 1560 01:35:00,180 --> 01:35:02,520 But they do offer a lot of great components 1561 01:35:02,520 --> 01:35:06,000 that you may want to use in either project for this class or maybe 1562 01:35:06,000 --> 01:35:07,980 a personal project that you're working on. 1563 01:35:07,980 --> 01:35:11,130 And so here's basically the steps that I go through 1564 01:35:11,130 --> 01:35:15,220 in order to figure out what I should use when working on my own project. 1565 01:35:15,220 --> 01:35:17,052 So first have a goal in mind. 1566 01:35:17,052 --> 01:35:19,260 You need to know what problem you're trying to solve. 1567 01:35:19,260 --> 01:35:21,570 Otherwise reading a bunch about what's offered 1568 01:35:21,570 --> 01:35:23,430 doesn't really mean anything to you. 1569 01:35:23,430 --> 01:35:26,520 And so say you were doing something like the TODO app 1570 01:35:26,520 --> 01:35:30,120 that we did before the first thing that you'll notice 1571 01:35:30,120 --> 01:35:33,820 is that there is no input type checkbox in React Native. 1572 01:35:33,820 --> 01:35:36,390 And so you have to figure out what is my goal here? 1573 01:35:36,390 --> 01:35:41,300 Well I want to replace what used to be a checkbox. 1574 01:35:41,300 --> 01:35:44,070 And so your goal in that example would be all right 1575 01:35:44,070 --> 01:35:48,690 I need some component that basically just renders a Boolean. 1576 01:35:48,690 --> 01:35:51,410 Then just see what the library or framework offers. 1577 01:35:51,410 --> 01:35:55,180 And so the way I did that was I just browsed through the docs. 1578 01:35:55,180 --> 01:35:58,050 So they're linked in this presentation. 1579 01:35:58,050 --> 01:36:01,560 I'll go ahead and link them in the Resources tab on the website. 1580 01:36:01,560 --> 01:36:06,315 But just see exactly what the library has to offer, see what they have, 1581 01:36:06,315 --> 01:36:08,190 then find something that solves your problem. 1582 01:36:08,190 --> 01:36:10,380 There may be multiple things that solve your problem 1583 01:36:10,380 --> 01:36:13,260 but just try to find the thing that best solves your problem. 1584 01:36:13,260 --> 01:36:16,350 And so in my case for that particular Boolean switch 1585 01:36:16,350 --> 01:36:18,840 I saw that they had something called a switch that 1586 01:36:18,840 --> 01:36:27,270 just renders a Boolean flag that you can just tap and then configure it. 1587 01:36:27,270 --> 01:36:30,000 And so the docs will tell you exactly what 1588 01:36:30,000 --> 01:36:33,420 the API is, how you can configure it, what properties you have to set. 1589 01:36:33,420 --> 01:36:37,790 And so for switch we had the value which was either true or false. 1590 01:36:37,790 --> 01:36:42,690 And we had on value change which was, I believe, the name of the prop that gets 1591 01:36:42,690 --> 01:36:46,000 called every single time you change that value. 1592 01:36:46,000 --> 01:36:52,830 And so it just fit that API to whatever you're using. 1593 01:36:52,830 --> 01:36:55,890 And then, of course, if you have trouble even then, then 1594 01:36:55,890 --> 01:36:57,720 you can turn to the community. 1595 01:36:57,720 --> 01:37:01,304 A great thing about React, React Native is the community. 1596 01:37:01,304 --> 01:37:03,720 Lots and lots of people use React, lots and lots of people 1597 01:37:03,720 --> 01:37:07,662 use React Native and a lot of them are experts 1598 01:37:07,662 --> 01:37:09,120 who were once beginners themselves. 1599 01:37:09,120 --> 01:37:12,350 And everybody remembers when they were first learning React and React 1600 01:37:12,350 --> 01:37:14,730 Native there's just a lot around and there's 1601 01:37:14,730 --> 01:37:16,770 a lot of stuff in the ecosystem. 1602 01:37:16,770 --> 01:37:21,900 And the community's really great in helping each other learn what's around 1603 01:37:21,900 --> 01:37:23,512 and how to best solve their problems. 1604 01:37:23,512 --> 01:37:24,720 And so just ask the question. 1605 01:37:24,720 --> 01:37:27,480 You can ask it in Slack if you're part of a class. 1606 01:37:27,480 --> 01:37:31,779 You can ask it on something like Stack Overflow or just Google around. 1607 01:37:31,779 --> 01:37:34,070 And so if you run into a problem odds are somebody else 1608 01:37:34,070 --> 01:37:39,000 has already run into the problem and odds are somebody better than you, 1609 01:37:39,000 --> 01:37:41,470 better than I have solved that problem. 1610 01:37:41,470 --> 01:37:45,360 And you can go ahead and use their solution. 1611 01:37:45,360 --> 01:37:49,800 And so any time you get stuck feel free to either browse 1612 01:37:49,800 --> 01:37:55,620 the documentation yourself or reach out to the staff with any questions. 1613 01:37:55,620 --> 01:37:59,110 And so, yeah, that's all I have for you today. 1614 01:37:59,110 --> 01:38:00,720 Good luck starting your project. 1615 01:38:00,720 --> 01:38:04,040 It will be released before next Monday. 1616 01:38:04,040 --> 01:38:06,048