1 00:00:00,000 --> 00:00:01,990 2 00:00:01,990 --> 00:00:04,130 PAUL SONG: All right, hello, everybody. 3 00:00:04,130 --> 00:00:07,300 Welcome to the mobile development seminar 4 00:00:07,300 --> 00:00:11,380 for React Native with Paul and Catherine. 5 00:00:11,380 --> 00:00:14,260 Today we'll just be talking about React Native-- 6 00:00:14,260 --> 00:00:20,290 how we use it to develop mobile apps and some of the facts, pros 7 00:00:20,290 --> 00:00:22,600 and cons, history behind it-- 8 00:00:22,600 --> 00:00:24,097 stuff like that. 9 00:00:24,097 --> 00:00:25,180 CATHERINE DESKUR: Awesome. 10 00:00:25,180 --> 00:00:28,420 We'll get started with just some quick introductions. 11 00:00:28,420 --> 00:00:29,530 I'm Catherine. 12 00:00:29,530 --> 00:00:30,500 I'm a sophomore. 13 00:00:30,500 --> 00:00:33,670 I'm living in Currier House, and I'm a CS concentrator. 14 00:00:33,670 --> 00:00:35,830 And, Paul? 15 00:00:35,830 --> 00:00:37,210 PAUL SONG: My name is Paul. 16 00:00:37,210 --> 00:00:40,150 I'm also a sophomore living in Mather House. 17 00:00:40,150 --> 00:00:43,890 And I'm also studying CS, probably secondary in economics. 18 00:00:43,890 --> 00:00:44,890 CATHERINE DESKUR: Great. 19 00:00:44,890 --> 00:00:48,340 So let's get started and talk about how you can maybe use 20 00:00:48,340 --> 00:00:49,945 React in one of your final projects. 21 00:00:49,945 --> 00:00:55,130 22 00:00:55,130 --> 00:00:58,120 PAUL SONG: So React Native is, as I said, 23 00:00:58,120 --> 00:01:01,780 it's a programming language to develop mobile apps. 24 00:01:01,780 --> 00:01:06,460 And it's been used by companies like Facebook, Discord, Instagram, 25 00:01:06,460 --> 00:01:09,573 Pinterest, et cetera. 26 00:01:09,573 --> 00:01:12,740 CATHERINE DESKUR: So if you choose to develop your final project using React 27 00:01:12,740 --> 00:01:16,520 Native, you'll be joining a full force of engineers 28 00:01:16,520 --> 00:01:19,550 from these awesome and famous companies that are also using 29 00:01:19,550 --> 00:01:22,960 the same thing to develop their apps. 30 00:01:22,960 --> 00:01:25,312 So, Paul, what exactly is React Native? 31 00:01:25,312 --> 00:01:26,770 PAUL SONG: That's a great question. 32 00:01:26,770 --> 00:01:29,910 So React Native is a programming language 33 00:01:29,910 --> 00:01:33,210 born in 2013 from a Facebook hackathon. 34 00:01:33,210 --> 00:01:36,930 And it's derived from React, which was Facebook's open source 35 00:01:36,930 --> 00:01:42,120 library for creating web and mobile application interfaces. 36 00:01:42,120 --> 00:01:46,170 So essentially it's a JavaScript framework for writing natively 37 00:01:46,170 --> 00:01:48,360 rendering mobile applications. 38 00:01:48,360 --> 00:01:51,930 And there are two other really popular mobile development 39 00:01:51,930 --> 00:01:55,080 frameworks, like Xamarin and Flutter. 40 00:01:55,080 --> 00:01:58,740 However today, obviously, we'll be focusing more on React Native. 41 00:01:58,740 --> 00:02:02,760 So why is React Native called React Native? 42 00:02:02,760 --> 00:02:06,090 Well, it was based, again as I said, off of React 43 00:02:06,090 --> 00:02:11,120 by JavaScript Library for developing normal websites and web applications. 44 00:02:11,120 --> 00:02:14,220 And it also has native in its name because it 45 00:02:14,220 --> 00:02:18,790 develops mobile applications that feel native to the mobile device 46 00:02:18,790 --> 00:02:24,100 and that integrate well with native iOS or Android on mobile devices. 47 00:02:24,100 --> 00:02:28,020 So essentially, when you break it down to its core, 48 00:02:28,020 --> 00:02:30,270 React Native is essentially just JavaScript 49 00:02:30,270 --> 00:02:35,610 but with stronger development tools, error messages, libraries, et cetera. 50 00:02:35,610 --> 00:02:38,640 And some other pros are that you actually 51 00:02:38,640 --> 00:02:43,050 don't need to rebuild your application every time to see updated changes. 52 00:02:43,050 --> 00:02:46,200 You could just hit Command-R and refresh. 53 00:02:46,200 --> 00:02:50,460 And you can see changes in real time without having to recompile. 54 00:02:50,460 --> 00:02:52,260 It also has a really large community, which 55 00:02:52,260 --> 00:02:56,070 is good for debugging, finding third party libraries. 56 00:02:56,070 --> 00:02:59,100 There's a lot of support in the React Native community. 57 00:02:59,100 --> 00:03:02,310 And probably most importantly, it's really easy to learn. 58 00:03:02,310 --> 00:03:05,760 And it's really similar to HTML and JavaScript. 59 00:03:05,760 --> 00:03:08,160 It uses a Document Object Model. 60 00:03:08,160 --> 00:03:12,660 And for example, the tags in React Native are really similar to the tags 61 00:03:12,660 --> 00:03:15,720 that you'd see in HTML that we learned from CS50. 62 00:03:15,720 --> 00:03:21,777 For example, you'd see tags like text and view instead of div and paragraph. 63 00:03:21,777 --> 00:03:22,860 CATHERINE DESKUR: Awesome. 64 00:03:22,860 --> 00:03:25,830 So that means you don't have to do too much more work 65 00:03:25,830 --> 00:03:28,860 to be able to develop a mobile application. 66 00:03:28,860 --> 00:03:32,640 You already know JavaScript and HTML and CSS. 67 00:03:32,640 --> 00:03:35,160 And those are the main elements of React Native. 68 00:03:35,160 --> 00:03:37,860 So we're going to go into showing you how much you already 69 00:03:37,860 --> 00:03:39,360 know of React Native. 70 00:03:39,360 --> 00:03:43,600 And then fill in the gaps for how to finish up a project. 71 00:03:43,600 --> 00:03:46,270 So let's get started. 72 00:03:46,270 --> 00:03:51,630 So the first thing-- and the little bit more complicated part of React Native-- 73 00:03:51,630 --> 00:03:52,347 is the setup. 74 00:03:52,347 --> 00:03:54,930 But that's awesome because once you get it up and running then 75 00:03:54,930 --> 00:03:55,870 you're good to go. 76 00:03:55,870 --> 00:04:01,200 So setting up your environment to run and develop a mobile application 77 00:04:01,200 --> 00:04:03,210 will take a couple of steps. 78 00:04:03,210 --> 00:04:06,900 And we won't go through each of them step-by-step during this seminar 79 00:04:06,900 --> 00:04:10,110 because it's very specific to the operating system 80 00:04:10,110 --> 00:04:11,650 that you're working on. 81 00:04:11,650 --> 00:04:16,380 So if you're working on a MacBook, which would be the Mac OS, 82 00:04:16,380 --> 00:04:19,829 or if you're working on a Windows or Linux operating system, 83 00:04:19,829 --> 00:04:21,810 there will be slightly different setup steps 84 00:04:21,810 --> 00:04:25,620 for those operating systems and depending on which kind of app 85 00:04:25,620 --> 00:04:29,535 you would like to develop for so either iOS or Android. 86 00:04:29,535 --> 00:04:31,410 Again, there will be slightly different steps 87 00:04:31,410 --> 00:04:33,480 that will go into setting up the environment. 88 00:04:33,480 --> 00:04:36,480 But luckily enough, there's really great documentation 89 00:04:36,480 --> 00:04:40,210 for how to go through all of these steps on the React Native website 90 00:04:40,210 --> 00:04:42,040 so we've included the link here. 91 00:04:42,040 --> 00:04:46,420 And you can revisit these slides later to get started up on your own. 92 00:04:46,420 --> 00:04:49,870 But after you've done that environment set up, 93 00:04:49,870 --> 00:04:53,060 you can create a project using this command. 94 00:04:53,060 --> 00:04:57,520 And again, you can revisit this once you've gotten your own setup started. 95 00:04:57,520 --> 00:04:59,920 But all of these things are walked through step-by-step 96 00:04:59,920 --> 00:05:03,520 in the React Native documentation. 97 00:05:03,520 --> 00:05:05,920 And there's tons of other great resources for helping 98 00:05:05,920 --> 00:05:08,360 walk you through the setup process. 99 00:05:08,360 --> 00:05:11,470 So then once you've created your app, you 100 00:05:11,470 --> 00:05:15,040 can launch it and get started on working on development, 101 00:05:15,040 --> 00:05:17,110 which is the step that we're going to pick up on. 102 00:05:17,110 --> 00:05:21,720 And then we'll show you how to develop the app. 103 00:05:21,720 --> 00:05:25,950 As a word of warning, these steps often take a little bit of time-- 104 00:05:25,950 --> 00:05:30,960 downloading the correct software to set up the environment, building the app, 105 00:05:30,960 --> 00:05:31,900 running it. 106 00:05:31,900 --> 00:05:36,120 So we've taken a few shortcuts and gotten something set up already 107 00:05:36,120 --> 00:05:37,600 beforehand. 108 00:05:37,600 --> 00:05:43,170 So what we're going to do is switch over to Paul's computer 109 00:05:43,170 --> 00:05:47,070 so we can take a look at some examples of code. 110 00:05:47,070 --> 00:05:50,670 And we've included, again, some resources to check out in the slides 111 00:05:50,670 --> 00:05:53,440 that you can revisit later. 112 00:05:53,440 --> 00:05:58,640 So now at this point, we're going to do a little bit of coding. 113 00:05:58,640 --> 00:05:59,580 Awesome. 114 00:05:59,580 --> 00:06:02,500 115 00:06:02,500 --> 00:06:08,110 So when you get your React app up and running, the default 116 00:06:08,110 --> 00:06:16,930 commands that you can run to make the app packages appear in your VS Code 117 00:06:16,930 --> 00:06:20,450 are going to appear pretty much exactly as we'll see here. 118 00:06:20,450 --> 00:06:24,160 So it comes with a bunch of files, a bunch of folders. 119 00:06:24,160 --> 00:06:28,480 And we're going to take the important ones and bring them to your attention. 120 00:06:28,480 --> 00:06:30,620 And then we're going to take a look at the code. 121 00:06:30,620 --> 00:06:35,210 So the main thing that we'll be working with during this example 122 00:06:35,210 --> 00:06:37,390 is the App.js file. 123 00:06:37,390 --> 00:06:41,680 The dot js extension means that we're working in JavaScript. 124 00:06:41,680 --> 00:06:44,290 And we can take a look here and see that we're 125 00:06:44,290 --> 00:06:47,800 going to eventually find that the code that we want to deal with 126 00:06:47,800 --> 00:06:51,190 is in this section. 127 00:06:51,190 --> 00:06:54,640 We see a lot of very familiar things like the tags, 128 00:06:54,640 --> 00:06:56,470 only with slightly different keywords. 129 00:06:56,470 --> 00:06:58,570 But we'll get to that in just a little bit. 130 00:06:58,570 --> 00:07:03,740 And then we see some CSS, but only it's in the same file as the HTML. 131 00:07:03,740 --> 00:07:06,880 So for some, that may be a bit of a new adjustment. 132 00:07:06,880 --> 00:07:10,210 But we can see that things like margin and font size 133 00:07:10,210 --> 00:07:12,080 look pretty familiar to us. 134 00:07:12,080 --> 00:07:14,950 So that's something that we can check out. 135 00:07:14,950 --> 00:07:19,370 A few more things to bring to your attention will be the package file. 136 00:07:19,370 --> 00:07:23,230 So this file has a bunch of things that we, maybe, don't 137 00:07:23,230 --> 00:07:24,890 need to worry about as much in it. 138 00:07:24,890 --> 00:07:28,330 But we can see that there are some familiar words like React Native. 139 00:07:28,330 --> 00:07:31,450 And this talks about what version of React Native we're running 140 00:07:31,450 --> 00:07:34,960 and tells the compiler, when we're making this, what we need 141 00:07:34,960 --> 00:07:37,030 to make sure that we know that we have. 142 00:07:37,030 --> 00:07:42,430 We need to have React Native to run these apps and other dependencies, 143 00:07:42,430 --> 00:07:47,650 or things that we need to also have in our toolbox to build this project. 144 00:07:47,650 --> 00:07:51,850 We'll see that we can import other libraries 145 00:07:51,850 --> 00:07:55,750 to use external third-party functions within our React apps. 146 00:07:55,750 --> 00:07:58,310 And those will also appear in this file. 147 00:07:58,310 --> 00:08:01,030 So we've done one example already beforehand 148 00:08:01,030 --> 00:08:04,060 by importing React Native maps, which allows 149 00:08:04,060 --> 00:08:06,760 you to use maps within React Native. 150 00:08:06,760 --> 00:08:09,460 And we'll walk through that example, a little bit later. 151 00:08:09,460 --> 00:08:13,060 But we can see that we've imported a library here 152 00:08:13,060 --> 00:08:15,710 that we can then use later on. 153 00:08:15,710 --> 00:08:19,670 So that's the two most important files. 154 00:08:19,670 --> 00:08:21,590 The other thing that we'll see, in this case 155 00:08:21,590 --> 00:08:25,340 we're going to be developing on an iOS app. 156 00:08:25,340 --> 00:08:27,880 And so we can see in the iOS file these are 157 00:08:27,880 --> 00:08:30,400 all of the technical files that are needed to make 158 00:08:30,400 --> 00:08:33,580 React run on the iOS operating system. 159 00:08:33,580 --> 00:08:35,950 The most important of these will be the pod file, 160 00:08:35,950 --> 00:08:39,340 where we can see some other things that React Native needs 161 00:08:39,340 --> 00:08:45,800 to change the code from JavaScript to something that can run on your iPhone. 162 00:08:45,800 --> 00:08:48,430 But for the purpose of this example, we won't 163 00:08:48,430 --> 00:08:50,590 need to change too much about what's in this file. 164 00:08:50,590 --> 00:08:54,920 Just to bring it to your awareness that this is where the magic happens 165 00:08:54,920 --> 00:09:00,250 and what makes the app able to run on these different platforms. 166 00:09:00,250 --> 00:09:02,330 You can take a look in the Android file as well, 167 00:09:02,330 --> 00:09:04,663 and see that it's a little bit different because there's 168 00:09:04,663 --> 00:09:09,730 different setups that are required to develop on iOS versus Android. 169 00:09:09,730 --> 00:09:13,880 But anyways, back to the good stuff, which is all in the App.js file. 170 00:09:13,880 --> 00:09:17,690 So we'll take a look at this code once again. 171 00:09:17,690 --> 00:09:21,140 And we can see that we've got a lot to deal with here. 172 00:09:21,140 --> 00:09:23,150 But this is all in the distribution code. 173 00:09:23,150 --> 00:09:27,140 So if you're used to doing something like Git 50 to get an assignment, 174 00:09:27,140 --> 00:09:29,050 this is going to be a lot like doing Git 50. 175 00:09:29,050 --> 00:09:31,450 Only instead of getting a pset that we have to fill out, 176 00:09:31,450 --> 00:09:36,700 we get an already ready-to-build mobile application that can run on-- 177 00:09:36,700 --> 00:09:39,150 as long as we've done the environment set up properly, 178 00:09:39,150 --> 00:09:41,210 that can run on this device. 179 00:09:41,210 --> 00:09:43,810 So no to-dos to fill out here, yet, other than anything 180 00:09:43,810 --> 00:09:46,930 that you want your app to become. 181 00:09:46,930 --> 00:09:53,650 So what we'll do is we'll go into the terminal. 182 00:09:53,650 --> 00:09:59,080 And what we need to run is npm run iOS. 183 00:09:59,080 --> 00:10:01,930 This magical command will-- 184 00:10:01,930 --> 00:10:05,560 fingers crossed-- get our mobile app up and running. 185 00:10:05,560 --> 00:10:07,570 And we can take a look at the stuff that we'll 186 00:10:07,570 --> 00:10:09,740 have right from the very beginning. 187 00:10:09,740 --> 00:10:13,490 So we can see already that something pretty cool has happened. 188 00:10:13,490 --> 00:10:16,900 We have this iPhone that pops up on our screen, which 189 00:10:16,900 --> 00:10:22,120 is one of the setups that's necessary for getting these mobile apps to run. 190 00:10:22,120 --> 00:10:25,450 We need something to simulate the mobile device that we're running it on. 191 00:10:25,450 --> 00:10:30,910 We deployed our HTML like the home page on a web browser. 192 00:10:30,910 --> 00:10:32,830 But we don't want to simulate web pages. 193 00:10:32,830 --> 00:10:36,290 We want to simulate apps so that's why this extra step is necessary. 194 00:10:36,290 --> 00:10:40,640 And we have this really cool iPhone that we can now have at our disposal. 195 00:10:40,640 --> 00:10:48,460 So we're going to develop for this iPhone 13, and what we'll see is that-- 196 00:10:48,460 --> 00:10:50,470 like I warned you before, it will sometimes 197 00:10:50,470 --> 00:10:54,880 take a second for the app to get up and running from nothing. 198 00:10:54,880 --> 00:10:59,660 But we'll see that eventually our app will pop open and the magic will begin. 199 00:10:59,660 --> 00:11:03,700 So now let's take a look at what we've got to begin with. 200 00:11:03,700 --> 00:11:04,270 Awesome. 201 00:11:04,270 --> 00:11:09,640 So React Native gives us a really cool distribution code 202 00:11:09,640 --> 00:11:11,170 that we can take a look at. 203 00:11:11,170 --> 00:11:13,330 Already, a bunch of really cool things happening. 204 00:11:13,330 --> 00:11:17,930 This already looks a lot like an app, and the code is already given to us. 205 00:11:17,930 --> 00:11:23,980 So we can take a look at the code, side-by-side with what the app looks 206 00:11:23,980 --> 00:11:27,640 like, and pull apart the things that we know. 207 00:11:27,640 --> 00:11:32,140 And then learn, maybe, the things that we don't as much. 208 00:11:32,140 --> 00:11:34,960 PAUL SONG: And again, this is called React Native 209 00:11:34,960 --> 00:11:38,410 because if you look at the app on the iPhone, all 210 00:11:38,410 --> 00:11:43,000 of the different elements such as the text, the buttons, 211 00:11:43,000 --> 00:11:44,710 how the scroll view works-- 212 00:11:44,710 --> 00:11:46,960 everything looks native to iOS. 213 00:11:46,960 --> 00:11:49,960 And so again, that's where the name comes from 214 00:11:49,960 --> 00:11:52,840 and a special thing about React Native. 215 00:11:52,840 --> 00:11:55,450 CATHERINE DESKUR: So if you were to render a button on iOS, 216 00:11:55,450 --> 00:11:57,610 it would look like the Apple buttons. 217 00:11:57,610 --> 00:12:00,580 Whereas if you're under the same button on Android, 218 00:12:00,580 --> 00:12:04,200 it would look like Android buttons so super, super cool. 219 00:12:04,200 --> 00:12:07,060 Anyways, so back to taking a look at the code. 220 00:12:07,060 --> 00:12:08,647 Let's pull this apart a little bit. 221 00:12:08,647 --> 00:12:10,480 So we start with some import statements that 222 00:12:10,480 --> 00:12:12,970 are going to be vital to running React. 223 00:12:12,970 --> 00:12:15,130 We need React to run React so that's going 224 00:12:15,130 --> 00:12:17,770 to be line 9, that import statement. 225 00:12:17,770 --> 00:12:20,890 Then, we can see that we're importing from React Native. 226 00:12:20,890 --> 00:12:23,530 And the things that we're importing in these lines here 227 00:12:23,530 --> 00:12:26,210 are like the div's that we're going to use. 228 00:12:26,210 --> 00:12:30,100 They are these native elements that React has built in a way 229 00:12:30,100 --> 00:12:33,340 that they can render to the native operating system 230 00:12:33,340 --> 00:12:34,610 that they're working on. 231 00:12:34,610 --> 00:12:38,750 So we'll pull apart exactly what each of these means in a little bit. 232 00:12:38,750 --> 00:12:42,130 But for now, we can just keep going. 233 00:12:42,130 --> 00:12:46,870 And lines 20 through 26 are things that React Native 234 00:12:46,870 --> 00:12:51,250 is importing to specifically make this web page so things like 235 00:12:51,250 --> 00:12:53,920 the header and the Learn More links. 236 00:12:53,920 --> 00:12:56,320 These are just things that are specific to the default 237 00:12:56,320 --> 00:12:57,580 app that's rendering here. 238 00:12:57,580 --> 00:13:00,760 239 00:13:00,760 --> 00:13:03,183 We'll come back to section in a little second 240 00:13:03,183 --> 00:13:05,350 because we'll see that it's used a little bit later. 241 00:13:05,350 --> 00:13:10,280 But let's look at our main function, which is the app function. 242 00:13:10,280 --> 00:13:14,680 So we can see that this is an interesting setup 243 00:13:14,680 --> 00:13:18,700 because we have a function that we're declaring with the const keyword. 244 00:13:18,700 --> 00:13:20,320 It's not taking any parameters. 245 00:13:20,320 --> 00:13:22,900 But we see that we've now got some JavaScript 246 00:13:22,900 --> 00:13:26,200 code that happens in this section here. 247 00:13:26,200 --> 00:13:27,790 And then there's a return statement. 248 00:13:27,790 --> 00:13:29,582 And inside of the return statement is where 249 00:13:29,582 --> 00:13:32,230 we start to see things that look a lot like HTML. 250 00:13:32,230 --> 00:13:39,040 And that is one of the gems of why React Native is such a great platform 251 00:13:39,040 --> 00:13:45,010 to develop apps on because we can intertwine how we use JavaScript, HTML 252 00:13:45,010 --> 00:13:47,450 and CSS all into this one file. 253 00:13:47,450 --> 00:13:52,030 So now we're seeing examples of using pure JavaScript here. 254 00:13:52,030 --> 00:13:54,640 And then we're using more HTML. 255 00:13:54,640 --> 00:14:00,740 But we'll see that we can wrap where we're using each of those things. 256 00:14:00,740 --> 00:14:05,140 So what we'll want to now do is try to see 257 00:14:05,140 --> 00:14:10,030 where each of these components that are on the app come from in the file 258 00:14:10,030 --> 00:14:11,690 that we're taking to look at. 259 00:14:11,690 --> 00:14:16,090 So the first element that we see is the SafeAreaView, 260 00:14:16,090 --> 00:14:20,560 which is one of the special React Native components that 261 00:14:20,560 --> 00:14:23,470 allows us to make sure that everything that we're rendering 262 00:14:23,470 --> 00:14:26,860 will be within the view for the user. 263 00:14:26,860 --> 00:14:31,330 It's very important for the iPhones that have these divots in them 264 00:14:31,330 --> 00:14:33,940 for the camera because we don't want to render something 265 00:14:33,940 --> 00:14:35,680 that's going to appear behind that divot, 266 00:14:35,680 --> 00:14:37,910 even though there's screen up here. 267 00:14:37,910 --> 00:14:42,760 So that is what the first two div's are dealing with, 268 00:14:42,760 --> 00:14:45,100 making sure that the thing that we're rendering 269 00:14:45,100 --> 00:14:47,200 is within the view of the iPhone. 270 00:14:47,200 --> 00:14:52,330 So we have our SafeAreaView, which is essentially like a div. 271 00:14:52,330 --> 00:14:58,000 And then we can see that we have an attribute to this element, which 272 00:14:58,000 --> 00:14:58,780 is style. 273 00:14:58,780 --> 00:15:02,630 And this is how we're going to end up styling our components. 274 00:15:02,630 --> 00:15:05,620 So style is referring to the CSS that we're 275 00:15:05,620 --> 00:15:09,140 going to give this component, which we can then find later in the file. 276 00:15:09,140 --> 00:15:10,210 So let's go find it. 277 00:15:10,210 --> 00:15:13,420 We see that style is equal to background style. 278 00:15:13,420 --> 00:15:19,210 And I'm going to use my favorite handy-dandy VS Code hack, which you'll 279 00:15:19,210 --> 00:15:21,370 also be able to use on code spaces. 280 00:15:21,370 --> 00:15:24,040 And I'm going to do Control-F and look for background style. 281 00:15:24,040 --> 00:15:27,460 And just see if I can navigate to where in my file I see that. 282 00:15:27,460 --> 00:15:29,380 All right, so I see two places. 283 00:15:29,380 --> 00:15:32,020 And we're looking for the third and here it is. 284 00:15:32,020 --> 00:15:34,310 So we found background style. 285 00:15:34,310 --> 00:15:37,750 And we can see that background color maybe is an attribute 286 00:15:37,750 --> 00:15:39,040 that we're familiar with. 287 00:15:39,040 --> 00:15:42,670 The color of the background-- pretty great name for that variable, 288 00:15:42,670 --> 00:15:44,930 if I do say so myself. 289 00:15:44,930 --> 00:15:49,670 And now we see something that maybe you've seen in JavaScript before, 290 00:15:49,670 --> 00:15:50,470 but maybe not. 291 00:15:50,470 --> 00:15:52,720 And this is called a ternary operation. 292 00:15:52,720 --> 00:15:56,240 And it's saying if something, do this. 293 00:15:56,240 --> 00:15:58,390 Otherwise, do this other thing, if else. 294 00:15:58,390 --> 00:15:59,890 We're used to that. 295 00:15:59,890 --> 00:16:06,520 So we are now asking our if-statement in this first part is dark mode. 296 00:16:06,520 --> 00:16:09,690 So we're assuming that is dark mode is going to be some kind of Boolean 297 00:16:09,690 --> 00:16:13,710 because we're asking is this true or is it not true. 298 00:16:13,710 --> 00:16:17,460 PAUL SONG: That's like this question my div's asking is dark mode true. 299 00:16:17,460 --> 00:16:21,270 CATHERINE DESKUR: Exactly, and then if it is true, we return this. 300 00:16:21,270 --> 00:16:25,750 And if it's not true, we return what's on the other side of the colon. 301 00:16:25,750 --> 00:16:27,700 So now what we're saying is we want to set 302 00:16:27,700 --> 00:16:32,700 background color equal to either a dark color or a light color, 303 00:16:32,700 --> 00:16:35,980 depending on if the user has selected dark mode. 304 00:16:35,980 --> 00:16:39,480 So we can see how that would be super useful for developing apps. 305 00:16:39,480 --> 00:16:45,330 And we now also have an example of where we're using CSS and JavaScript in one, 306 00:16:45,330 --> 00:16:48,040 which is so cool that we have the ability to do that. 307 00:16:48,040 --> 00:16:52,380 So we can now go back to our SafeAreaView 308 00:16:52,380 --> 00:16:55,620 and see that what we're looking at is this view 309 00:16:55,620 --> 00:17:00,060 finder if the user has decided to set up their phone in dark mode. 310 00:17:00,060 --> 00:17:06,480 They're going to render this in the dark mode color using that CSS. 311 00:17:06,480 --> 00:17:09,700 And it's the same thing for the status bar that we see here as well. 312 00:17:09,700 --> 00:17:14,760 So these are good practice components to use in the app 313 00:17:14,760 --> 00:17:19,380 that you may or may not develop because again, it's developed specifically 314 00:17:19,380 --> 00:17:23,790 by React Native to accommodate the chances that the phone that you're 315 00:17:23,790 --> 00:17:28,500 developing for, or iPad, or something like that-- that whatever you're 316 00:17:28,500 --> 00:17:32,160 trying to display will be within the screen that's actually showing. 317 00:17:32,160 --> 00:17:36,010 So continuing on, now we have something called a scroll view. 318 00:17:36,010 --> 00:17:39,360 And so if we take a look at how this app works, 319 00:17:39,360 --> 00:17:42,660 maybe we could venture a guess as to what the scroll view does. 320 00:17:42,660 --> 00:17:47,770 And if you guessed it allows you to scroll, you'd be spot on. 321 00:17:47,770 --> 00:17:53,340 So it gives us a very safe and interactive scroll 322 00:17:53,340 --> 00:17:56,460 that looks a lot like scrolls that we're used to on iOS. 323 00:17:56,460 --> 00:18:03,600 So it feels very natural, and that was intended by React Native. 324 00:18:03,600 --> 00:18:07,230 So a scroll view is going to allow us to render 325 00:18:07,230 --> 00:18:11,070 pages that are just beyond the size or the height of the device 326 00:18:11,070 --> 00:18:12,280 that we're working with. 327 00:18:12,280 --> 00:18:16,350 And now we can see some more parameters we don't need to worry too much about. 328 00:18:16,350 --> 00:18:19,738 But rest assured, these are all described in detail 329 00:18:19,738 --> 00:18:21,780 on the documentation for React Native which we'll 330 00:18:21,780 --> 00:18:24,130 be taking a look at in a little bit. 331 00:18:24,130 --> 00:18:28,190 Then we see again that we're passing style, the attribute, the background 332 00:18:28,190 --> 00:18:28,690 style. 333 00:18:28,690 --> 00:18:31,590 So if we are in dark mode, like we went over before, 334 00:18:31,590 --> 00:18:35,880 that's what we're going to be rendering. 335 00:18:35,880 --> 00:18:36,480 Awesome. 336 00:18:36,480 --> 00:18:40,740 So now let's get to the real meat of the app, which is the stuff that we're 337 00:18:40,740 --> 00:18:42,070 displaying to the user. 338 00:18:42,070 --> 00:18:46,250 So we can see that we have a header, which we've imported from earlier. 339 00:18:46,250 --> 00:18:49,050 It's from the React Native default app. 340 00:18:49,050 --> 00:18:51,880 But now we can start to see some text that we're rendering. 341 00:18:51,880 --> 00:18:56,190 So let's find where we have this Welcome to React Native. 342 00:18:56,190 --> 00:19:02,010 And we'll see that is in the header that we've imported, which we 343 00:19:02,010 --> 00:19:06,180 found from here, the React Native app. 344 00:19:06,180 --> 00:19:09,550 And then now we see that we have some steps. 345 00:19:09,550 --> 00:19:11,658 So let's take a look and pull those apart. 346 00:19:11,658 --> 00:19:14,700 And I mentioned before that we were going to go back to it earlier and so 347 00:19:14,700 --> 00:19:18,000 here we are at the section tag. 348 00:19:18,000 --> 00:19:19,770 So we've used div. 349 00:19:19,770 --> 00:19:24,510 We've used View, which is going to be a lot like a div header. 350 00:19:24,510 --> 00:19:27,360 And now we're getting to something that maybe we 351 00:19:27,360 --> 00:19:31,590 can't think of exactly as being another component. 352 00:19:31,590 --> 00:19:36,160 And that's because we've defined it up here. 353 00:19:36,160 --> 00:19:43,770 So section is like a separate function that we have defined, 354 00:19:43,770 --> 00:19:46,650 almost in the same way that we defined app. 355 00:19:46,650 --> 00:19:49,650 And now we can see, again, that before the return statement, 356 00:19:49,650 --> 00:19:51,240 we have some JavaScript. 357 00:19:51,240 --> 00:19:56,010 And then in the return statement, we have stuff that looks a lot like HTML. 358 00:19:56,010 --> 00:19:59,170 And we've also passed section some parameters. 359 00:19:59,170 --> 00:20:02,470 So you see that we have two children and title. 360 00:20:02,470 --> 00:20:04,620 So now if we take a look in here what we'll see 361 00:20:04,620 --> 00:20:08,910 is some more views, which are going to be a lot like div's with styling 362 00:20:08,910 --> 00:20:11,620 that has been defined below. 363 00:20:11,620 --> 00:20:12,900 And then we have text. 364 00:20:12,900 --> 00:20:14,800 So finally, we're getting to the good stuff. 365 00:20:14,800 --> 00:20:17,130 We're seeing some text being rendered. 366 00:20:17,130 --> 00:20:20,850 And if we take a look at what appears in the inner HTML-- 367 00:20:20,850 --> 00:20:23,020 so between the two text tags-- 368 00:20:23,020 --> 00:20:25,380 you can see that it's rendering title. 369 00:20:25,380 --> 00:20:29,220 And then it's rendering it in between these curly braces so a lot like we 370 00:20:29,220 --> 00:20:33,810 used in Jinja with the curly braces allowing us to use Python. 371 00:20:33,810 --> 00:20:37,350 We can now put JavaScript in between these curly braces, 372 00:20:37,350 --> 00:20:40,950 even though we're rendering right now in what looks like HTML. 373 00:20:40,950 --> 00:20:43,680 So now we can see that the curly braces are allowing 374 00:20:43,680 --> 00:20:46,090 us to reference this title variable. 375 00:20:46,090 --> 00:20:49,770 So if we're taking a look now back at the app that we currently have, 376 00:20:49,770 --> 00:20:53,160 it would make sense maybe that for each of these sections 377 00:20:53,160 --> 00:20:56,790 our title is going to be rendered with a parameter 378 00:20:56,790 --> 00:20:59,610 that we're passing to this section function. 379 00:20:59,610 --> 00:21:04,440 And then the other text attribute that we have here is rendering children. 380 00:21:04,440 --> 00:21:08,400 So now we can maybe pull apart each of these, what looks like sections. 381 00:21:08,400 --> 00:21:11,270 We've got step one and then that seems to be the title. 382 00:21:11,270 --> 00:21:15,440 And then the description part is what the children is going to be. 383 00:21:15,440 --> 00:21:17,450 PAUL SONG: And the differences between the text 384 00:21:17,450 --> 00:21:21,290 is also described here, where you can see in styles 385 00:21:21,290 --> 00:21:24,000 there's different characteristics here. 386 00:21:24,000 --> 00:21:27,830 There's a section description, and then there's also a section title. 387 00:21:27,830 --> 00:21:32,420 So these dictate how the style shows up, similar to how 388 00:21:32,420 --> 00:21:37,788 you can do style equals in HTML also as an attribute for certain tags. 389 00:21:37,788 --> 00:21:40,580 CATHERINE DESKUR: Great, and since you mentioned it, Paul, let's go 390 00:21:40,580 --> 00:21:42,660 take a look at those styles now. 391 00:21:42,660 --> 00:21:46,830 So if we scroll down, we can take a look at the style sheet that we have here. 392 00:21:46,830 --> 00:21:49,620 So style sheet is a concept we're familiar with. 393 00:21:49,620 --> 00:21:52,910 And we can see-- 394 00:21:52,910 --> 00:21:56,780 I think we're in section, title, and description is what we were looking at. 395 00:21:56,780 --> 00:21:59,030 You can go up to just make sure. 396 00:21:59,030 --> 00:22:03,420 Section description and section title-- we also have a section container here. 397 00:22:03,420 --> 00:22:05,352 So let's pull these apart a little bit. 398 00:22:05,352 --> 00:22:07,310 And these are things that look pretty familiar. 399 00:22:07,310 --> 00:22:09,830 There may be a different styling. 400 00:22:09,830 --> 00:22:15,020 We're used to using the dashes in between words for our CSS. 401 00:22:15,020 --> 00:22:18,230 But now we can see that we're in camel case or instead of dashes, 402 00:22:18,230 --> 00:22:21,090 we just capitalize the next word. 403 00:22:21,090 --> 00:22:23,060 But margins we've used before. 404 00:22:23,060 --> 00:22:24,440 And so we have a margin. 405 00:22:24,440 --> 00:22:26,300 We have padding. 406 00:22:26,300 --> 00:22:27,470 We have a font size. 407 00:22:27,470 --> 00:22:28,670 We have a font weight. 408 00:22:28,670 --> 00:22:33,050 And we can now see that the difference between this title 409 00:22:33,050 --> 00:22:35,720 styling and the description styling-- 410 00:22:35,720 --> 00:22:36,733 we have a margin. 411 00:22:36,733 --> 00:22:39,650 We have different font sizes, and then we have different font weights. 412 00:22:39,650 --> 00:22:45,080 And we can see that that's evident from the app that we are taking a look at. 413 00:22:45,080 --> 00:22:45,830 Awesome. 414 00:22:45,830 --> 00:22:48,050 OK, so now we can see that we're rendering 415 00:22:48,050 --> 00:22:49,770 a bunch of different sections. 416 00:22:49,770 --> 00:22:53,120 We're passing these attributes, title. 417 00:22:53,120 --> 00:22:57,260 And title is step one, which we can see in the app first. 418 00:22:57,260 --> 00:23:00,050 And then we can see your changes, debug. 419 00:23:00,050 --> 00:23:03,860 So we can draw lines between the code that we're given 420 00:23:03,860 --> 00:23:05,540 and the code that we see rendered. 421 00:23:05,540 --> 00:23:11,180 Only what happened to the children parameter 422 00:23:11,180 --> 00:23:12,890 that we passed in section function? 423 00:23:12,890 --> 00:23:13,580 Where did it go? 424 00:23:13,580 --> 00:23:18,260 We didn't define it in our section. 425 00:23:18,260 --> 00:23:20,150 And what we'll actually see is that the stuff 426 00:23:20,150 --> 00:23:24,230 that we rendered in what we thought was the children parameter 427 00:23:24,230 --> 00:23:27,030 is what is contained in the inner HTML. 428 00:23:27,030 --> 00:23:36,240 So we can see that this edit and then we have more HTML within here. 429 00:23:36,240 --> 00:23:39,480 And we can see that reload instructions. 430 00:23:39,480 --> 00:23:42,660 So something else that was imported from the default React 431 00:23:42,660 --> 00:23:47,040 Native new app screen. 432 00:23:47,040 --> 00:23:51,540 So children was just referring to the content in between the tags. 433 00:23:51,540 --> 00:23:57,870 So that's something we can learn by pulling apart the React elements 434 00:23:57,870 --> 00:24:01,320 and taking a look at the app that it renders. 435 00:24:01,320 --> 00:24:05,880 So for the most part that is pretty much what this app is. 436 00:24:05,880 --> 00:24:10,110 We can see we've got some links here that will actually take you 437 00:24:10,110 --> 00:24:15,960 to web pages that can help you take a look at exactly what we 438 00:24:15,960 --> 00:24:16,890 do in React Native. 439 00:24:16,890 --> 00:24:18,750 So this is the documentation. 440 00:24:18,750 --> 00:24:23,370 And what we can take a look at now is how 441 00:24:23,370 --> 00:24:26,130 awesome the React Native documentation is. 442 00:24:26,130 --> 00:24:30,510 So if any of you have ever looked at documentation for languages like Python 443 00:24:30,510 --> 00:24:36,780 or maybe C++, those pages maybe aren't as user-friendly. 444 00:24:36,780 --> 00:24:40,620 But React Native is a very user-friendly documentation. 445 00:24:40,620 --> 00:24:44,700 So we can take a look at how to manipulate styling, 446 00:24:44,700 --> 00:24:46,630 and it's going to give us code examples. 447 00:24:46,630 --> 00:24:49,380 It's going to be very descriptive about what we can and cannot do. 448 00:24:49,380 --> 00:24:51,088 So these are going to be your best friend 449 00:24:51,088 --> 00:24:53,670 if you choose to develop your final project or a mobile app 450 00:24:53,670 --> 00:24:55,170 using React Native. 451 00:24:55,170 --> 00:24:59,040 So we can see a ton of examples of how to use width 452 00:24:59,040 --> 00:25:01,980 and height to give size parameters. 453 00:25:01,980 --> 00:25:05,700 We can look all into how we would import images, 454 00:25:05,700 --> 00:25:08,200 and it will give you examples of that as well. 455 00:25:08,200 --> 00:25:10,980 PAUL SONG: Again, the images tag here in JavaScript 456 00:25:10,980 --> 00:25:16,160 is also really, really similar to what you see in CS50, where it's image-- 457 00:25:16,160 --> 00:25:19,440 and we also have a source attribute. 458 00:25:19,440 --> 00:25:22,560 Again, it's really similar to how in CS50 459 00:25:22,560 --> 00:25:26,730 as we translate from C to Python to HTML-- 460 00:25:26,730 --> 00:25:30,930 a lot of coding is just translating and using the languages 461 00:25:30,930 --> 00:25:32,220 that you learn in CS50. 462 00:25:32,220 --> 00:25:35,070 It's really easy to translate and apply all those things 463 00:25:35,070 --> 00:25:36,990 that we learned into React Native. 464 00:25:36,990 --> 00:25:39,540 CATHERINE DESKUR: Exactly. 465 00:25:39,540 --> 00:25:43,020 Also, take a look at examples of how to use some of the components 466 00:25:43,020 --> 00:25:45,090 that we saw on the distribution app. 467 00:25:45,090 --> 00:25:48,570 Let's go to the components tab. 468 00:25:48,570 --> 00:25:51,420 And this is where you'll find most of the information 469 00:25:51,420 --> 00:26:00,090 about how to use the specific parts of React Native. 470 00:26:00,090 --> 00:26:01,950 So the basic components here are going to be 471 00:26:01,950 --> 00:26:05,160 the staple, the bread and butter of what you'll use to develop your apps. 472 00:26:05,160 --> 00:26:08,610 So we have view, which is most related to a div, text, 473 00:26:08,610 --> 00:26:13,650 which is just some kind of text element, image, an input, a scrollview, 474 00:26:13,650 --> 00:26:14,830 and a stylesheet. 475 00:26:14,830 --> 00:26:20,210 So let's take a look at maybe all that we could do with the text component. 476 00:26:20,210 --> 00:26:24,920 So we'll see a brief description of what the text component is. 477 00:26:24,920 --> 00:26:29,390 We'll see some examples of code that are written using the text component. 478 00:26:29,390 --> 00:26:33,230 And then we'll see examples of all the different attributes 479 00:26:33,230 --> 00:26:36,770 that you can give the text component or in this case, 480 00:26:36,770 --> 00:26:38,510 they referred to them as props. 481 00:26:38,510 --> 00:26:41,420 So we can see that there's a very, very long list of things 482 00:26:41,420 --> 00:26:44,640 that we could possibly give our text component. 483 00:26:44,640 --> 00:26:49,500 But let's take a look at maybe one of these examples. 484 00:26:49,500 --> 00:26:56,730 So let's take a look at the accessible attribute or prop. 485 00:26:56,730 --> 00:27:02,220 So if we're taking a look at this example, we'll see that what it says 486 00:27:02,220 --> 00:27:06,900 is we have the view as an accessibility element. 487 00:27:06,900 --> 00:27:09,690 And we can see examples of accessibility guides. 488 00:27:09,690 --> 00:27:15,630 So this is going to help to make maybe the mobile apps or websites 489 00:27:15,630 --> 00:27:18,660 that you're developing more accessible to a wider audience that 490 00:27:18,660 --> 00:27:24,998 maybe have restricted-- 491 00:27:24,998 --> 00:27:26,290 PAUL SONG: Accessibility needs. 492 00:27:26,290 --> 00:27:26,890 CATHERINE DESKUR: Exactly. 493 00:27:26,890 --> 00:27:28,690 So these are great things to look into if you're 494 00:27:28,690 --> 00:27:30,982 looking to develop an app that's going to be able to be 495 00:27:30,982 --> 00:27:33,830 used by a wide range of users. 496 00:27:33,830 --> 00:27:35,500 So great things to look into. 497 00:27:35,500 --> 00:27:38,598 And much like how we would use the alt property for images 498 00:27:38,598 --> 00:27:41,140 to describe the image, it can be helpful if the image doesn't 499 00:27:41,140 --> 00:27:43,780 render but also for people who maybe are visually impaired 500 00:27:43,780 --> 00:27:47,450 and wouldn't be able to experience the website in the same way. 501 00:27:47,450 --> 00:27:53,080 So great to look into the accessibility functionality if you're able to. 502 00:27:53,080 --> 00:27:55,460 And we can take a look at some more here. 503 00:27:55,460 --> 00:27:57,490 So let's take a look at onPress. 504 00:27:57,490 --> 00:28:03,430 So this allows us to add some kind of event to our text 505 00:28:03,430 --> 00:28:07,060 that if you press the element on the screen something will happen. 506 00:28:07,060 --> 00:28:10,580 So you can take a look at press events for more details about that. 507 00:28:10,580 --> 00:28:14,080 But we can see there's a description of every possible thing 508 00:28:14,080 --> 00:28:16,720 that you could do with this text on this website. 509 00:28:16,720 --> 00:28:20,570 And let's go take a look at maybe another component. 510 00:28:20,570 --> 00:28:23,950 Let's take a look at a button and see what we could do with this component. 511 00:28:23,950 --> 00:28:28,730 And then maybe we'll even implement this in a live coding example. 512 00:28:28,730 --> 00:28:31,780 So we can see that a button is going to be very similar to the button 513 00:28:31,780 --> 00:28:35,260 that you might have used in HTML. 514 00:28:35,260 --> 00:28:38,530 And we have many parameters that we can pass to this button. 515 00:28:38,530 --> 00:28:44,410 So we can again do something on press, where we activate some function when 516 00:28:44,410 --> 00:28:45,850 the user presses the button. 517 00:28:45,850 --> 00:28:49,720 We have a title, which will be the text that's contained within the button. 518 00:28:49,720 --> 00:28:52,373 We could have a color of the button and an accessibility label. 519 00:28:52,373 --> 00:28:55,540 Again, an important thing to consider if you want to make sure that your app 520 00:28:55,540 --> 00:28:58,690 is available to be used by a wide range of users. 521 00:28:58,690 --> 00:29:02,380 And we can take a look at some sample code here. 522 00:29:02,380 --> 00:29:05,630 And it shows you the rendering on this right side. 523 00:29:05,630 --> 00:29:09,490 And again, more examples of the props or the 524 00:29:09,490 --> 00:29:11,920 attributes that you can pass this function. 525 00:29:11,920 --> 00:29:14,140 Always important to note when those attributes 526 00:29:14,140 --> 00:29:18,860 are required as denoted by this red box here. 527 00:29:18,860 --> 00:29:22,670 But let's go back to the code and try to implement that. 528 00:29:22,670 --> 00:29:28,010 So what we'll do is we want to add something to our code. 529 00:29:28,010 --> 00:29:30,400 So let's add a button. 530 00:29:30,400 --> 00:29:32,650 And we can add it within this view. 531 00:29:32,650 --> 00:29:38,150 And what we'll do is add our button tag. 532 00:29:38,150 --> 00:29:43,580 So if we're referencing once again the styling that we see on React Native, 533 00:29:43,580 --> 00:29:47,960 we'll see that button is included with a capital B. 534 00:29:47,960 --> 00:29:52,220 And that then we need to pass it a title and an on press. 535 00:29:52,220 --> 00:29:54,290 So let's do that now. 536 00:29:54,290 --> 00:29:58,160 PAUL SONG: Also a really great feature of React Native is that-- 537 00:29:58,160 --> 00:30:03,290 as we saw on Flask and stuff like that, we have to use event listeners 538 00:30:03,290 --> 00:30:06,050 and that can get really complicated and confusing. 539 00:30:06,050 --> 00:30:08,870 Whereas in React Native, you can literally 540 00:30:08,870 --> 00:30:12,830 give the button an on press attribute that just specifies what it does. 541 00:30:12,830 --> 00:30:16,148 If you pass it a function that specifies what to do on press. 542 00:30:16,148 --> 00:30:18,440 CATHERINE DESKUR: So we're going to be able to interact 543 00:30:18,440 --> 00:30:20,120 with this button in just a second. 544 00:30:20,120 --> 00:30:23,040 But let's do-- and yet again I have to give it these parameters. 545 00:30:23,040 --> 00:30:24,320 So let's give it a title. 546 00:30:24,320 --> 00:30:30,450 And we'll say button with an exclamation point. 547 00:30:30,450 --> 00:30:32,640 And then we'll give it a function. 548 00:30:32,640 --> 00:30:43,140 So on press-- and we don't really want this button to do anything right now so 549 00:30:43,140 --> 00:30:45,190 we'll give it an empty function. 550 00:30:45,190 --> 00:30:50,100 So this is the outline of a function that does absolutely nothing. 551 00:30:50,100 --> 00:30:53,310 And we'll save this and see what happens with our app. 552 00:30:53,310 --> 00:30:59,980 Like Paul mentioned earlier, these apps are going to render as we're going. 553 00:30:59,980 --> 00:31:03,130 So we can just click Save on this and see what happens. 554 00:31:03,130 --> 00:31:04,890 And so let's do that now. 555 00:31:04,890 --> 00:31:05,797 PAUL SONG: Command-S. 556 00:31:05,797 --> 00:31:07,380 CATHERINE DESKUR: And we'll see that-- 557 00:31:07,380 --> 00:31:08,640 I think and I hope-- 558 00:31:08,640 --> 00:31:09,420 here we go. 559 00:31:09,420 --> 00:31:10,560 We have an error. 560 00:31:10,560 --> 00:31:12,070 Oh no, what do we do? 561 00:31:12,070 --> 00:31:13,830 Let's read the error message. 562 00:31:13,830 --> 00:31:17,890 And we can see that what happens is we can't find a variable button. 563 00:31:17,890 --> 00:31:19,930 So if we can't find something, Paul, do you 564 00:31:19,930 --> 00:31:21,930 have any instinct about what we should maybe do? 565 00:31:21,930 --> 00:31:25,110 PAUL SONG: Well, it seems as if the program doesn't really 566 00:31:25,110 --> 00:31:28,740 understand what a button is, a.k.a. 567 00:31:28,740 --> 00:31:32,880 we haven't really defined it or imported it. 568 00:31:32,880 --> 00:31:34,260 CATHERINE DESKUR: Yes, exactly. 569 00:31:34,260 --> 00:31:39,870 So we have a clue that the computer isn't recognizing what this button is. 570 00:31:39,870 --> 00:31:42,120 But it's recognizing things like view, which 571 00:31:42,120 --> 00:31:44,250 we saw were also from React Native. 572 00:31:44,250 --> 00:31:47,430 So one thing that we can do is if you're confused and looking for a way 573 00:31:47,430 --> 00:31:49,770 to debug, take a look at things that do work 574 00:31:49,770 --> 00:31:53,050 and see if we can learn things about those components. 575 00:31:53,050 --> 00:31:56,190 And so if we wanted to learn about the view component, 576 00:31:56,190 --> 00:32:00,300 we should be able to see that we've imported view here from React Native. 577 00:32:00,300 --> 00:32:04,140 So does this seem like maybe we need to import button? 578 00:32:04,140 --> 00:32:05,563 PAUL SONG: Exactly. 579 00:32:05,563 --> 00:32:07,480 CATHERINE DESKUR: So let's see what that does. 580 00:32:07,480 --> 00:32:10,930 And now Control-S to save, and it should rerender the function. 581 00:32:10,930 --> 00:32:14,970 And now we can see that we have a button that looks a lot like things 582 00:32:14,970 --> 00:32:18,160 that we've seen in Apple or in the iOS. 583 00:32:18,160 --> 00:32:21,280 584 00:32:21,280 --> 00:32:23,670 But I think this button looks kind of lame. 585 00:32:23,670 --> 00:32:25,350 So let's give it some styling. 586 00:32:25,350 --> 00:32:28,950 And so to do that we're going to follow examples of things 587 00:32:28,950 --> 00:32:31,210 we've already seen in the code before. 588 00:32:31,210 --> 00:32:32,950 So we want to give it some styling. 589 00:32:32,950 --> 00:32:36,420 And so let's add an example of the button styling. 590 00:32:36,420 --> 00:32:39,220 So maybe we'll give it-- 591 00:32:39,220 --> 00:32:41,910 what should we call this button? 592 00:32:41,910 --> 00:32:45,710 Button-- or we'll call it a cool button because it 593 00:32:45,710 --> 00:32:48,440 will be a cool button so cool button. 594 00:32:48,440 --> 00:32:51,020 And we're going to use the same syntax that we 595 00:32:51,020 --> 00:32:54,740 see the other style sheet using. 596 00:32:54,740 --> 00:33:01,440 And so let's give it a background color and background color of pink. 597 00:33:01,440 --> 00:33:03,850 And let's see what that ends up looking like. 598 00:33:03,850 --> 00:33:04,740 So we'll Save. 599 00:33:04,740 --> 00:33:06,990 And we'll see that-- oh nothing happened. 600 00:33:06,990 --> 00:33:12,700 So we need to take a look at things that already did work. 601 00:33:12,700 --> 00:33:14,430 So we've seen uses of style before. 602 00:33:14,430 --> 00:33:17,550 We can now see that we're defining this style 603 00:33:17,550 --> 00:33:21,550 and using it as a parameter or a prop in these tags that we have. 604 00:33:21,550 --> 00:33:23,170 So we forgot to do that. 605 00:33:23,170 --> 00:33:25,800 So let's add that in now. 606 00:33:25,800 --> 00:33:29,310 And if we're referencing style that's in the style sheet, 607 00:33:29,310 --> 00:33:32,610 we need to reference the style sheet, which was 608 00:33:32,610 --> 00:33:36,060 defined below using the keyword styles. 609 00:33:36,060 --> 00:33:44,980 And to access each of the different stylings, we'll use the dot operator. 610 00:33:44,980 --> 00:33:47,190 Now we can see that we should have cool button. 611 00:33:47,190 --> 00:33:52,900 So let's see what happens now when we Save this. 612 00:33:52,900 --> 00:33:55,610 All right, so again nothing happened. 613 00:33:55,610 --> 00:33:58,750 So what can we do about this now? 614 00:33:58,750 --> 00:34:00,430 Let's try debugging. 615 00:34:00,430 --> 00:34:02,800 And one of the things that I would take a look at 616 00:34:02,800 --> 00:34:06,010 are looking for examples of code that worked online. 617 00:34:06,010 --> 00:34:10,270 But in this case, I'm thinking maybe we should try a height and a width. 618 00:34:10,270 --> 00:34:11,880 So let's give it a height of-- 619 00:34:11,880 --> 00:34:13,859 let's say-- 10 pixels. 620 00:34:13,859 --> 00:34:16,850 621 00:34:16,850 --> 00:34:22,050 And let's give it a width of 20 pixels. 622 00:34:22,050 --> 00:34:23,435 And let's see what that does. 623 00:34:23,435 --> 00:34:30,219 624 00:34:30,219 --> 00:34:33,159 And can we highlight over what that error 625 00:34:33,159 --> 00:34:39,830 is and see if maybe we can figure out how to debug this error message? 626 00:34:39,830 --> 00:34:48,175 So it looks like we had an issue with this height and the comma specifically. 627 00:34:48,175 --> 00:34:49,960 So let's Save and see if this renders. 628 00:34:49,960 --> 00:34:53,170 629 00:34:53,170 --> 00:34:56,060 And still nothing, right? 630 00:34:56,060 --> 00:34:59,840 So this is very indicative of maybe what your experience is going 631 00:34:59,840 --> 00:35:02,090 to be when you're developing apps. 632 00:35:02,090 --> 00:35:05,040 It's always important to have patience because we'll maybe try 633 00:35:05,040 --> 00:35:06,540 a bunch of things and it won't work. 634 00:35:06,540 --> 00:35:07,850 And it won't work. 635 00:35:07,850 --> 00:35:11,990 But again, there are so many tools out there that we can use to take a look at 636 00:35:11,990 --> 00:35:14,730 and to learn from. 637 00:35:14,730 --> 00:35:20,600 So if we were to maybe go back to the page that we-- 638 00:35:20,600 --> 00:35:25,460 the documentation for the button component from the React, 639 00:35:25,460 --> 00:35:27,020 what we'd see-- 640 00:35:27,020 --> 00:35:28,340 so I'm frustrated. 641 00:35:28,340 --> 00:35:31,273 I can't figure out how to get this coloring to work for my button. 642 00:35:31,273 --> 00:35:32,690 And I've tried giving it a height. 643 00:35:32,690 --> 00:35:34,560 I've tried using a background color. 644 00:35:34,560 --> 00:35:36,290 Let's take a look at some example code. 645 00:35:36,290 --> 00:35:40,910 That's one of my favorite ways to debug code or to come up with inspiration. 646 00:35:40,910 --> 00:35:42,800 So we're going to take a look at some buttons 647 00:35:42,800 --> 00:35:46,640 and we can see a bunch of things. 648 00:35:46,640 --> 00:35:50,900 Maybe this color keyword is something so that I'm 649 00:35:50,900 --> 00:35:52,763 going to keep in my back pocket. 650 00:35:52,763 --> 00:35:54,680 And now from taking a look at the style sheet, 651 00:35:54,680 --> 00:35:59,510 I don't actually see any coloring of any of the buttons or any of the styling. 652 00:35:59,510 --> 00:36:03,710 So what I'm going to try now, instead of trying style, 653 00:36:03,710 --> 00:36:07,730 let's try just using the color attribute and adding it to the button 654 00:36:07,730 --> 00:36:10,280 that we are using. 655 00:36:10,280 --> 00:36:14,287 PAUL SONG: So go ahead and put that within the tag here. 656 00:36:14,287 --> 00:36:15,370 CATHERINE DESKUR: Exactly. 657 00:36:15,370 --> 00:36:18,093 And let's Save and see what happens. 658 00:36:18,093 --> 00:36:20,931 PAUL SONG: Click phone-- 659 00:36:20,931 --> 00:36:23,770 [INAUDIBLE] not screenshot, click Save. 660 00:36:23,770 --> 00:36:29,110 CATHERINE DESKUR: All right, so now we have a pink button, and I'm very happy. 661 00:36:29,110 --> 00:36:34,000 So with that in mind, let's go on to making 662 00:36:34,000 --> 00:36:37,000 our app a little more interactive. 663 00:36:37,000 --> 00:36:38,890 So we didn't end up using our button styling 664 00:36:38,890 --> 00:36:41,530 so we can get rid of this styling. 665 00:36:41,530 --> 00:36:47,930 But we've learned now how to add our own style for each of these components. 666 00:36:47,930 --> 00:36:50,590 So now what I want to do is show how these apps 667 00:36:50,590 --> 00:36:52,400 can be interactive with the user. 668 00:36:52,400 --> 00:36:55,720 So I want to add some functionality where maybe we 669 00:36:55,720 --> 00:36:57,700 can count some number of something or maybe 670 00:36:57,700 --> 00:37:00,200 the number of times the users click the button. 671 00:37:00,200 --> 00:37:04,300 So I want to be able to display the number of times users click the button. 672 00:37:04,300 --> 00:37:07,180 And then I want to be able to add to that number 673 00:37:07,180 --> 00:37:09,590 as the user interacts with my web page. 674 00:37:09,590 --> 00:37:13,840 So what we want our button to do instead is to count up. 675 00:37:13,840 --> 00:37:16,730 That's what the user is going to be doing. 676 00:37:16,730 --> 00:37:18,220 So we're going to change that text. 677 00:37:18,220 --> 00:37:20,590 And again, a really cool element of React 678 00:37:20,590 --> 00:37:24,190 that will become very, very helpful when you're working on developing your apps 679 00:37:24,190 --> 00:37:27,692 is that you can just save and it will render automatically on the app 680 00:37:27,692 --> 00:37:28,900 that you're taking a look at. 681 00:37:28,900 --> 00:37:31,090 So now we can see that count up has changed. 682 00:37:31,090 --> 00:37:38,050 And now let's add another button or let's add a text to output 683 00:37:38,050 --> 00:37:42,160 the number that the user has currently pressed. 684 00:37:42,160 --> 00:37:43,570 So we need a text. 685 00:37:43,570 --> 00:37:49,285 And then we need to put between it user has pushed the button. 686 00:37:49,285 --> 00:37:53,575 687 00:37:53,575 --> 00:37:56,780 And then we want to be able to say how many times. 688 00:37:56,780 --> 00:38:00,190 So right now it's zero times. 689 00:38:00,190 --> 00:38:02,450 So let's see what that looks like. 690 00:38:02,450 --> 00:38:06,250 All right, styling isn't great but we can fix that later. 691 00:38:06,250 --> 00:38:09,740 What we want to do now is get the function to work. 692 00:38:09,740 --> 00:38:12,730 So the thing that we want to make variable in this output 693 00:38:12,730 --> 00:38:13,942 is the number here. 694 00:38:13,942 --> 00:38:15,400 We don't want it to always be zero. 695 00:38:15,400 --> 00:38:19,520 We want it to add to that number as the user interacts with this. 696 00:38:19,520 --> 00:38:25,570 So great instincts that we want to add these curly 697 00:38:25,570 --> 00:38:29,650 braces to be able to access JavaScript because JavaScript is dynamic. 698 00:38:29,650 --> 00:38:31,510 So we can edit JavaScript. 699 00:38:31,510 --> 00:38:35,260 And we can interact with our JavaScript as the program is running. 700 00:38:35,260 --> 00:38:36,550 We can increment a variable. 701 00:38:36,550 --> 00:38:41,232 Whereas in HTML, there's not really a way to do that in pure HTML. 702 00:38:41,232 --> 00:38:41,940 PAUL SONG: Right. 703 00:38:41,940 --> 00:38:46,510 You would have to switch back and forth between Python, Jinja, JavaScript. 704 00:38:46,510 --> 00:38:48,550 Whereas here, you could do it all in one page. 705 00:38:48,550 --> 00:38:49,633 CATHERINE DESKUR: Exactly. 706 00:38:49,633 --> 00:38:52,730 So now what we're going to do is define a variable. 707 00:38:52,730 --> 00:38:55,660 So let's take a look at this variable. 708 00:38:55,660 --> 00:38:57,730 And we'll define it with the const keyword. 709 00:38:57,730 --> 00:39:03,970 And maybe we'll call it num presses so the number of presses. 710 00:39:03,970 --> 00:39:05,560 And we'll instantiate this. 711 00:39:05,560 --> 00:39:07,360 We'll initialize it at zero. 712 00:39:07,360 --> 00:39:13,450 So now instead of printing out zero here we can just print out num presses. 713 00:39:13,450 --> 00:39:17,560 And this will be the number of times the user has pressed the button. 714 00:39:17,560 --> 00:39:19,090 Or at least that's what I'm hoping. 715 00:39:19,090 --> 00:39:21,400 So let's go back to our app and-- 716 00:39:21,400 --> 00:39:28,900 a cool animation that the count up button will change colors. 717 00:39:28,900 --> 00:39:32,110 So that's pretty cool, but it doesn't work. 718 00:39:32,110 --> 00:39:33,940 My zero is still at zero. 719 00:39:33,940 --> 00:39:40,180 So we need to add some more slice to our code 720 00:39:40,180 --> 00:39:42,140 because this isn't going to work on its own. 721 00:39:42,140 --> 00:39:49,870 So to clue y'all in, what we need to do is use a component from React which 722 00:39:49,870 --> 00:39:53,810 allows us to have the user interact with the website. 723 00:39:53,810 --> 00:39:58,510 So what we're going to do is add something called a useState. 724 00:39:58,510 --> 00:40:01,180 What this allows us to do is have a variable 725 00:40:01,180 --> 00:40:04,070 that we know is going to change state during the program. 726 00:40:04,070 --> 00:40:07,450 So for example, our number of presses is going to change state hopefully 727 00:40:07,450 --> 00:40:11,860 from zero to maybe one, or two, or however many times the users press 728 00:40:11,860 --> 00:40:12,860 the button. 729 00:40:12,860 --> 00:40:17,810 So what we want to do is instead useState. 730 00:40:17,810 --> 00:40:23,070 And we pass useState the value that we want to start with. 731 00:40:23,070 --> 00:40:25,160 So we want to start with a value of zero. 732 00:40:25,160 --> 00:40:28,880 It's the same thing as instantiating num presses to this value of zero. 733 00:40:28,880 --> 00:40:31,190 But there's one more funky syntactical thing 734 00:40:31,190 --> 00:40:35,240 that we need to do with useState, which is define the variable that 735 00:40:35,240 --> 00:40:39,620 will represent the current state of that variable so the number of presses. 736 00:40:39,620 --> 00:40:41,570 But then we also need to define something 737 00:40:41,570 --> 00:40:44,580 that we will use when we want to update that number. 738 00:40:44,580 --> 00:40:46,290 So I know it sounds a little weird. 739 00:40:46,290 --> 00:40:48,650 We're used to just being able to reassign variables, 740 00:40:48,650 --> 00:40:52,800 but now we need something to help us to reassign that variable. 741 00:40:52,800 --> 00:40:58,430 So what I'm going to call this is change presses. 742 00:40:58,430 --> 00:41:02,420 So instead of just being able to reset num presses on its own, 743 00:41:02,420 --> 00:41:06,800 we now need to use change presses to update num presses. 744 00:41:06,800 --> 00:41:09,590 We know num presses will start at zero, but we 745 00:41:09,590 --> 00:41:13,280 want to be able to update num presses every time the button is pressed. 746 00:41:13,280 --> 00:41:17,910 And now is where the onPress function is going to become very, very useful. 747 00:41:17,910 --> 00:41:21,500 So what we want to do on press is use the change 748 00:41:21,500 --> 00:41:25,590 presses function to update the number. 749 00:41:25,590 --> 00:41:32,090 So what we'll do here is change presses, and we pass that function-- 750 00:41:32,090 --> 00:41:35,630 what we want to change the variable to. 751 00:41:35,630 --> 00:41:38,420 So in this case, we want to increment the variable by one. 752 00:41:38,420 --> 00:41:43,730 So what we'll change it to is the current value of num presses plus one. 753 00:41:43,730 --> 00:41:48,290 And now if we Save that, it should be easy as this. 754 00:41:48,290 --> 00:41:52,160 And we'll see that we now have a thing that the user can interact with, 755 00:41:52,160 --> 00:41:56,900 which will update something else on the web page as easy as pressing a button. 756 00:41:56,900 --> 00:42:01,550 So I could spend all day just sitting here watching this counter increment. 757 00:42:01,550 --> 00:42:03,770 But let's add a little more functionality. 758 00:42:03,770 --> 00:42:06,240 Maybe we want to be able to count down as well. 759 00:42:06,240 --> 00:42:10,080 So we want to just represent some kind of number that the user can change. 760 00:42:10,080 --> 00:42:12,890 So if we went past it by one, we'd have to restart the whole app. 761 00:42:12,890 --> 00:42:13,390 No! 762 00:42:13,390 --> 00:42:16,290 So let's make another button that allows us to count down. 763 00:42:16,290 --> 00:42:17,420 So we'll put a title. 764 00:42:17,420 --> 00:42:24,980 And count down, and now we want to press the button. 765 00:42:24,980 --> 00:42:28,100 And we want that to decrement our variable by one. 766 00:42:28,100 --> 00:42:33,170 So we're going to be able to use the same syntax that we did before, where 767 00:42:33,170 --> 00:42:37,790 we use the change presses function. 768 00:42:37,790 --> 00:42:42,500 And we pass it the value that we want to change it by so num presses minus one. 769 00:42:42,500 --> 00:42:44,450 We want to decrement that. 770 00:42:44,450 --> 00:42:48,680 And we want to give it the same color for styling purposes 771 00:42:48,680 --> 00:42:50,910 because love that shade of pink. 772 00:42:50,910 --> 00:42:55,040 So let's keep going with that, and our closing tag 773 00:42:55,040 --> 00:42:57,480 to make the button a real component. 774 00:42:57,480 --> 00:43:00,410 So now we can click Save, and hopefully we should see-- 775 00:43:00,410 --> 00:43:03,930 so we now have a countdown functionality as well. 776 00:43:03,930 --> 00:43:06,210 And we can see that this looks pretty good to me. 777 00:43:06,210 --> 00:43:09,620 So let's say that we wanted to add some limits to this function. 778 00:43:09,620 --> 00:43:11,600 There's a bunch of different ways that-- 779 00:43:11,600 --> 00:43:14,482 maybe we don't want to count down past zero. 780 00:43:14,482 --> 00:43:16,190 We don't want to get to negative numbers. 781 00:43:16,190 --> 00:43:19,550 There's a bunch of different ways to do that and make sure 782 00:43:19,550 --> 00:43:22,670 that the functionality doesn't allow for this. 783 00:43:22,670 --> 00:43:26,660 One of my favorites is going to be using one of the parameters, or the props, 784 00:43:26,660 --> 00:43:31,050 that we can use for this button tag, which is the disabled function. 785 00:43:31,050 --> 00:43:34,010 So we can add disabled here. 786 00:43:34,010 --> 00:43:38,330 And we're going to give it some parameters here 787 00:43:38,330 --> 00:43:41,510 that will allow us to disable the button when we reach 788 00:43:41,510 --> 00:43:44,660 a certain point or a certain condition. 789 00:43:44,660 --> 00:43:48,950 As we'll also learn, or as we've seen many times before, 790 00:43:48,950 --> 00:43:54,050 we can use different stylings on different operating 791 00:43:54,050 --> 00:43:57,560 systems as a built-in functionality of React Native. 792 00:43:57,560 --> 00:44:01,340 So a disabled button on iOS will look different from a disabled button 793 00:44:01,340 --> 00:44:04,050 on Android, which is exactly what we want. 794 00:44:04,050 --> 00:44:06,210 We want to be able to make our apps variable. 795 00:44:06,210 --> 00:44:12,660 So in this case, we're going to use an example of some Boolean logic here. 796 00:44:12,660 --> 00:44:14,120 So we want to disable the function. 797 00:44:14,120 --> 00:44:16,760 Maybe we don't want to count past 15. 798 00:44:16,760 --> 00:44:30,710 So if num presses is greater than 15, we want to disable the button. 799 00:44:30,710 --> 00:44:35,700 And then if we have-- oh no, that's not what I want. 800 00:44:35,700 --> 00:44:37,460 And then if we have num presses-- 801 00:44:37,460 --> 00:44:42,780 802 00:44:42,780 --> 00:44:45,030 oh man, slow typing day today-- 803 00:44:45,030 --> 00:44:48,010 less than zero, we want to disable the countdown button. 804 00:44:48,010 --> 00:44:51,750 PAUL SONG: So that's an example of JavaScript within the curly braces. 805 00:44:51,750 --> 00:44:54,180 And that expression is a Boolean expression, 806 00:44:54,180 --> 00:44:56,680 which will return true or false. 807 00:44:56,680 --> 00:44:59,715 Again disabling or un-disabling. 808 00:44:59,715 --> 00:45:02,010 I think we should have a D there. 809 00:45:02,010 --> 00:45:05,550 CATHERINE DESKUR: Yes, good catch. 810 00:45:05,550 --> 00:45:14,170 So now we should see that we can't count down-- oh no, but my bounds are wrong. 811 00:45:14,170 --> 00:45:16,980 So we can see that now we needed less than 812 00:45:16,980 --> 00:45:20,110 or equal to to keep it within the bounds. 813 00:45:20,110 --> 00:45:21,580 Oh, wrong side. 814 00:45:21,580 --> 00:45:27,100 Less than or equal to, or greater than or equal to. 815 00:45:27,100 --> 00:45:30,330 Now we should be able to see that our functionality is 816 00:45:30,330 --> 00:45:31,780 as we would have hoped. 817 00:45:31,780 --> 00:45:35,040 And we might need to refresh the app so that we-- all right, great. 818 00:45:35,040 --> 00:45:37,860 So we can see that now we can't use the countdown button. 819 00:45:37,860 --> 00:45:41,580 It's disabled, and so we can't go lower than zero. 820 00:45:41,580 --> 00:45:43,830 And now if we use the count up button, we 821 00:45:43,830 --> 00:45:47,130 should be able to see that we can't get past 15, 822 00:45:47,130 --> 00:45:51,390 which is exactly as we had hoped. 823 00:45:51,390 --> 00:45:55,800 So with that in mind, we can now already see a bunch of the possibilities. 824 00:45:55,800 --> 00:45:59,100 They are endless for what you can do with this React app. 825 00:45:59,100 --> 00:46:05,220 Anything you can imagine, you could do with React or with React Native 826 00:46:05,220 --> 00:46:06,090 specifically. 827 00:46:06,090 --> 00:46:08,130 But, Paul, dream big. 828 00:46:08,130 --> 00:46:11,910 Maybe we want to have some kind of food ordering service. 829 00:46:11,910 --> 00:46:13,830 We want to use a map to find things. 830 00:46:13,830 --> 00:46:18,390 Or maybe we want to have a carousel display of images. 831 00:46:18,390 --> 00:46:23,880 Or we want to get something that looks a lot like TikTok or display a calendar. 832 00:46:23,880 --> 00:46:25,240 The possibilities are endless. 833 00:46:25,240 --> 00:46:30,220 But I'm a beginning React Native user. 834 00:46:30,220 --> 00:46:33,240 So it might be a little bit hard for me to develop that all on my own. 835 00:46:33,240 --> 00:46:35,730 Luckily, like Paul mentioned earlier, there's 836 00:46:35,730 --> 00:46:38,490 such a big community of people that are working and developing 837 00:46:38,490 --> 00:46:43,450 with React Native that there's a ton of third-party libraries that we can use. 838 00:46:43,450 --> 00:46:48,000 So we'll take a look in what you would maybe be able to mess 839 00:46:48,000 --> 00:46:50,970 around with is taking a look at React Native. 840 00:46:50,970 --> 00:46:57,420 And then we wanted to do a map so React Native map. 841 00:46:57,420 --> 00:46:59,550 And we'll see that there are a bunch of libraries 842 00:46:59,550 --> 00:47:05,010 that we can install into our React Native application that 843 00:47:05,010 --> 00:47:08,760 will allow us to have this functionality without having 844 00:47:08,760 --> 00:47:13,650 to build it all on our own totally from scratch, a lot like in API. 845 00:47:13,650 --> 00:47:24,330 So what we'll see is that this directory can be included in your package folders 846 00:47:24,330 --> 00:47:26,880 that you can use React Native. 847 00:47:26,880 --> 00:47:29,500 And you can use this map functionality within it. 848 00:47:29,500 --> 00:47:32,160 So scrolling down-- so pretty popular. 849 00:47:32,160 --> 00:47:33,750 A lot of people are using maps. 850 00:47:33,750 --> 00:47:36,390 So that means that there's going to be a lot of example code 851 00:47:36,390 --> 00:47:38,970 that we can take a look at to learn from the other apps 852 00:47:38,970 --> 00:47:40,920 that people have developed in the past. 853 00:47:40,920 --> 00:47:45,150 And we can take a look at some sample that they give you on the documentation 854 00:47:45,150 --> 00:47:46,620 here of how to import. 855 00:47:46,620 --> 00:47:49,030 It even tells you how to install it. 856 00:47:49,030 --> 00:47:53,278 So we'll see the installation instructions are detailed here. 857 00:47:53,278 --> 00:47:56,070 And they'll give you a bunch of different installation instructions 858 00:47:56,070 --> 00:47:58,180 based off of how you're configuring it. 859 00:47:58,180 --> 00:48:03,750 So all of this good stuff has been imported here. 860 00:48:03,750 --> 00:48:06,050 But now with the last 10 minutes, we're going 861 00:48:06,050 --> 00:48:11,720 to talk about something that's the bread and butter of web development. 862 00:48:11,720 --> 00:48:15,350 No matter how good you get at coding, you'll always spend a lot of time 863 00:48:15,350 --> 00:48:16,760 debugging your code as well. 864 00:48:16,760 --> 00:48:20,330 Always important to be able to have tools 865 00:48:20,330 --> 00:48:23,150 that you can have at your disposal to prepare yourself 866 00:48:23,150 --> 00:48:25,520 for what would happen if you ran into an error 867 00:48:25,520 --> 00:48:28,140 you didn't know how to solve on your own. 868 00:48:28,140 --> 00:48:31,760 So with that in mind, we're going to go back to some slides. 869 00:48:31,760 --> 00:48:33,240 It was great looking at the code. 870 00:48:33,240 --> 00:48:39,350 But we're going to talk a little bit about how we can deal with debugging. 871 00:48:39,350 --> 00:48:43,620 So let me get my slides up. 872 00:48:43,620 --> 00:48:48,950 PAUL SONG: And also if you guys noticed earlier on the actual iPhone 873 00:48:48,950 --> 00:48:53,255 simulation, when there is an error, it displays the error message 874 00:48:53,255 --> 00:48:56,510 in a very, very easy-to-read way. 875 00:48:56,510 --> 00:49:00,830 Unlike simply giving you a bunch of red text in the terminal, 876 00:49:00,830 --> 00:49:03,140 it really digests the error messages, which 877 00:49:03,140 --> 00:49:07,130 is another really key feature of React Native that helps developers a lot. 878 00:49:07,130 --> 00:49:10,040 Again, making it really useful in the workplace, allowing development 879 00:49:10,040 --> 00:49:12,827 to be faster, et cetera, et cetera. 880 00:49:12,827 --> 00:49:13,910 CATHERINE DESKUR: Exactly. 881 00:49:13,910 --> 00:49:16,880 So that being said, there will be some error messages 882 00:49:16,880 --> 00:49:19,310 that might be a little bit hard to comprehend. 883 00:49:19,310 --> 00:49:22,040 But for the most part, React Native does a really great job 884 00:49:22,040 --> 00:49:24,600 of cluing you in as to what's going on. 885 00:49:24,600 --> 00:49:28,440 So what do we do when we hit step five, getting the inevitable error? 886 00:49:28,440 --> 00:49:35,400 So if you haven't been able to build and launch your app from the beginning-- 887 00:49:35,400 --> 00:49:39,080 so if you haven't changed anything about the code that's been given to you 888 00:49:39,080 --> 00:49:41,360 but you can't seem to get it up and running, 889 00:49:41,360 --> 00:49:43,220 you want to make sure that you're following 890 00:49:43,220 --> 00:49:45,200 the right tutorial for the operating system 891 00:49:45,200 --> 00:49:49,100 that you're developing on and the operating system you're developing for. 892 00:49:49,100 --> 00:49:50,630 There's tons of great resources. 893 00:49:50,630 --> 00:49:51,470 There's videos. 894 00:49:51,470 --> 00:49:52,940 There's text instructions. 895 00:49:52,940 --> 00:49:55,190 And there's also maybe some helpful TF's that might 896 00:49:55,190 --> 00:49:56,780 be able to help you get this setup. 897 00:49:56,780 --> 00:49:58,940 But if you haven't written any code, don't worry. 898 00:49:58,940 --> 00:50:01,610 It's not your fault. There's something about the setup process 899 00:50:01,610 --> 00:50:06,800 that you'll just need to take the time to figure out. 900 00:50:06,800 --> 00:50:10,760 Then, like we saw with the button component, 901 00:50:10,760 --> 00:50:13,670 sometimes components might be difficult to build-- 902 00:50:13,670 --> 00:50:17,400 or start like with the mouse component-- might be difficult to build on our own. 903 00:50:17,400 --> 00:50:21,590 There's tons of third-party libraries out there that we can take a look at. 904 00:50:21,590 --> 00:50:24,320 Then when you import the library or like we 905 00:50:24,320 --> 00:50:26,900 did with the button component, which is an import even 906 00:50:26,900 --> 00:50:29,270 though it's within React Native-- 907 00:50:29,270 --> 00:50:31,640 but if you're importing the button component 908 00:50:31,640 --> 00:50:35,120 and it doesn't seem to be recognized, you 909 00:50:35,120 --> 00:50:37,400 want to make sure that you've installed the library. 910 00:50:37,400 --> 00:50:42,620 And so you can follow the instructions on the documentation 911 00:50:42,620 --> 00:50:44,690 for those packages. 912 00:50:44,690 --> 00:50:47,330 Or also that you've imported the proper file. 913 00:50:47,330 --> 00:50:52,520 And then if you have CSS that you have maybe used in previous assignments 914 00:50:52,520 --> 00:50:56,000 or have found for CSS but it doesn't seem 915 00:50:56,000 --> 00:50:59,960 to work exactly the way that you want it to for React Native, 916 00:50:59,960 --> 00:51:02,030 make sure you're using the proper syntax. 917 00:51:02,030 --> 00:51:05,840 So instead of using the dashes, we'll mostly be using camel case. 918 00:51:05,840 --> 00:51:08,420 Or when in doubt, check the React Native documentation. 919 00:51:08,420 --> 00:51:12,470 For the most part, they're really great about giving user-friendly examples 920 00:51:12,470 --> 00:51:15,110 of how to use the syntax. 921 00:51:15,110 --> 00:51:17,810 And just to stress one more time, there's 922 00:51:17,810 --> 00:51:22,850 such a huge community of developers out there that have tons of resources. 923 00:51:22,850 --> 00:51:26,810 And if you have an error, chances are there have been tons of other people 924 00:51:26,810 --> 00:51:28,160 that have had the error as well. 925 00:51:28,160 --> 00:51:29,450 Use Stack Overflow. 926 00:51:29,450 --> 00:51:30,530 Use YouTube. 927 00:51:30,530 --> 00:51:32,960 And just get started developing. 928 00:51:32,960 --> 00:51:36,740 And then, of course, I had to include my favorite-- 929 00:51:36,740 --> 00:51:38,960 the poster that hangs right next to my computer 930 00:51:38,960 --> 00:51:41,810 when I do web development or app development. 931 00:51:41,810 --> 00:51:45,030 And that is just keep calm and debug code. 932 00:51:45,030 --> 00:51:48,150 So with that in mind, that's all we have. 933 00:51:48,150 --> 00:51:51,660 So if there are any questions, the chat is open. 934 00:51:51,660 --> 00:51:54,890 Otherwise, thank you so much for joining us today. 935 00:51:54,890 --> 00:51:58,093 And it was so fun coding with y'all. 936 00:51:58,093 --> 00:51:59,510 PAUL SONG: Thank you guys so much. 937 00:51:59,510 --> 00:52:00,110 Once again. 938 00:52:00,110 --> 00:52:02,930 React Native is an incredible programming language. 939 00:52:02,930 --> 00:52:06,560 You can really see why it's used by all the top companies today-- 940 00:52:06,560 --> 00:52:11,330 really fast, really simple, a lot of documentation online. 941 00:52:11,330 --> 00:52:13,130 Just a short and sweet program. 942 00:52:13,130 --> 00:52:16,440 And I wish you guys the best of luck using it. 943 00:52:16,440 --> 00:52:18,820 And thank you guys for coming. 944 00:52:18,820 --> 00:52:20,000