PAUL SONG: All right, hello, everybody. Welcome to the mobile development seminar for React Native with Paul and Catherine. Today we'll just be talking about React Native-- how we use it to develop mobile apps and some of the facts, pros and cons, history behind it-- stuff like that. 

CATHERINE DESKUR: Awesome. We'll get started with just some quick introductions. I'm Catherine. I'm a sophomore. I'm living in Currier House, and I'm a CS concentrator. And, Paul? 

PAUL SONG: My name is Paul. I'm also a sophomore living in Mather House. And I'm also studying CS, probably secondary in economics. 

CATHERINE DESKUR: Great. So let's get started and talk about how you can maybe use React in one of your final projects. 

PAUL SONG: So React Native is, as I said, it's a programming language to develop mobile apps. And it's been used by companies like Facebook, Discord, Instagram, Pinterest, et cetera. 

CATHERINE DESKUR: So if you choose to develop your final project using React Native, you'll be joining a full force of engineers from these awesome and famous companies that are also using the same thing to develop their apps. So, Paul, what exactly is React Native? 

PAUL SONG: That's a great question. So React Native is a programming language born in 2013 from a Facebook hackathon. And it's derived from React, which was Facebook's open source library for creating web and mobile application interfaces. So essentially it's a JavaScript framework for writing natively rendering mobile applications. And there are two other really popular mobile development frameworks, like Xamarin and Flutter. However today, obviously, we'll be focusing more on React Native. 

So why is React Native called React Native? Well, it was based, again as I said, off of React by JavaScript Library for developing normal websites and web applications. And it also has native in its name because it develops mobile applications that feel native to the mobile device and that integrate well with native iOS or Android on mobile devices. 

So essentially, when you break it down to its core, React Native is essentially just JavaScript but with stronger development tools, error messages, libraries, et cetera. And some other pros are that you actually don't need to rebuild your application every time to see updated changes. You could just hit Command-R and refresh. And you can see changes in real time without having to recompile. It also has a really large community, which is good for debugging, finding third party libraries. There's a lot of support in the React Native community. 

And probably most importantly, it's really easy to learn. And it's really similar to HTML and JavaScript. It uses a Document Object Model. And for example, the tags in React Native are really similar to the tags that you'd see in HTML that we learned from CS50. For example, you'd see tags like text and view instead of div and paragraph. 

CATHERINE DESKUR: Awesome. So that means you don't have to do too much more work to be able to develop a mobile application. You already know JavaScript and HTML and CSS. And those are the main elements of React Native. So we're going to go into showing you how much you already know of React Native. And then fill in the gaps for how to finish up a project. So let's get started. 

So the first thing-- and the little bit more complicated part of React Native-- is the setup. But that's awesome because once you get it up and running then you're good to go. So setting up your environment to run and develop a mobile application will take a couple of steps. And we won't go through each of them step-by-step during this seminar because it's very specific to the operating system that you're working on. So if you're working on a MacBook, which would be the Mac OS, or if you're working on a Windows or Linux operating system, there will be slightly different setup steps for those operating systems and depending on which kind of app you would like to develop for so either iOS or Android. Again, there will be slightly different steps that will go into setting up the environment. 

But luckily enough, there's really great documentation for how to go through all of these steps on the React Native website so we've included the link here. And you can revisit these slides later to get started up on your own. But after you've done that environment set up, you can create a project using this command. And again, you can revisit this once you've gotten your own setup started. But all of these things are walked through step-by-step in the React Native documentation. And there's tons of other great resources for helping walk you through the setup process. 

So then once you've created your app, you can launch it and get started on working on development, which is the step that we're going to pick up on. And then we'll show you how to develop the app. As a word of warning, these steps often take a little bit of time-- downloading the correct software to set up the environment, building the app, running it. So we've taken a few shortcuts and gotten something set up already beforehand. So what we're going to do is switch over to Paul's computer so we can take a look at some examples of code. And we've included, again, some resources to check out in the slides that you can revisit later. So now at this point, we're going to do a little bit of coding. 

Awesome. So when you get your React app up and running, the default commands that you can run to make the app packages appear in your VS Code are going to appear pretty much exactly as we'll see here. So it comes with a bunch of files, a bunch of folders. And we're going to take the important ones and bring them to your attention. And then we're going to take a look at the code. 

So the main thing that we'll be working with during this example is the App.js file. The dot js extension means that we're working in JavaScript. And we can take a look here and see that we're going to eventually find that the code that we want to deal with is in this section. We see a lot of very familiar things like the tags, only with slightly different keywords. But we'll get to that in just a little bit. 

And then we see some CSS, but only it's in the same file as the HTML. So for some, that may be a bit of a new adjustment. But we can see that things like margin and font size look pretty familiar to us. So that's something that we can check out. A few more things to bring to your attention will be the package file. 

So this file has a bunch of things that we, maybe, don't need to worry about as much in it. But we can see that there are some familiar words like React Native. And this talks about what version of React Native we're running and tells the compiler, when we're making this, what we need to make sure that we know that we have. We need to have React Native to run these apps and other dependencies, or things that we need to also have in our toolbox to build this project. We'll see that we can import other libraries to use external third-party functions within our React apps. And those will also appear in this file. 

So we've done one example already beforehand by importing React Native maps, which allows you to use maps within React Native. And we'll walk through that example, a little bit later. But we can see that we've imported a library here that we can then use later on. So that's the two most important files. 

The other thing that we'll see, in this case we're going to be developing on an iOS app. And so we can see in the iOS file these are all of the technical files that are needed to make React run on the iOS operating system. The most important of these will be the pod file, where we can see some other things that React Native needs to change the code from JavaScript to something that can run on your iPhone. 

But for the purpose of this example, we won't need to change too much about what's in this file. Just to bring it to your awareness that this is where the magic happens and what makes the app able to run on these different platforms. You can take a look in the Android file as well, and see that it's a little bit different because there's different setups that are required to develop on iOS versus Android. But anyways, back to the good stuff, which is all in the App.js file. 

So we'll take a look at this code once again. And we can see that we've got a lot to deal with here. But this is all in the distribution code. So if you're used to doing something like Git 50 to get an assignment, this is going to be a lot like doing Git 50. Only instead of getting a pset that we have to fill out, we get an already ready-to-build mobile application that can run on-- as long as we've done the environment set up properly, that can run on this device. So no to-dos to fill out here, yet, other than anything that you want your app to become. 

So what we'll do is we'll go into the terminal. And what we need to run is npm run iOS. This magical command will-- fingers crossed-- get our mobile app up and running. And we can take a look at the stuff that we'll have right from the very beginning. 

So we can see already that something pretty cool has happened. We have this iPhone that pops up on our screen, which is one of the setups that's necessary for getting these mobile apps to run. We need something to simulate the mobile device that we're running it on. We deployed our HTML like the home page on a web browser. But we don't want to simulate web pages. We want to simulate apps so that's why this extra step is necessary. And we have this really cool iPhone that we can now have at our disposal. 

So we're going to develop for this iPhone 13, and what we'll see is that-- like I warned you before, it will sometimes take a second for the app to get up and running from nothing. But we'll see that eventually our app will pop open and the magic will begin. So now let's take a look at what we've got to begin with. 

Awesome. So React Native gives us a really cool distribution code that we can take a look at. Already, a bunch of really cool things happening. This already looks a lot like an app, and the code is already given to us. So we can take a look at the code, side-by-side with what the app looks like, and pull apart the things that we know. And then learn, maybe, the things that we don't as much. 

PAUL SONG: And again, this is called React Native because if you look at the app on the iPhone, all of the different elements such as the text, the buttons, how the scroll view works-- everything looks native to iOS. And so again, that's where the name comes from and a special thing about React Native. 

CATHERINE DESKUR: So if you were to render a button on iOS, it would look like the Apple buttons. Whereas if you're under the same button on Android, it would look like Android buttons so super, super cool. Anyways, so back to taking a look at the code. 

Let's pull this apart a little bit. So we start with some import statements that are going to be vital to running React. We need React to run React so that's going to be line 9, that import statement. Then, we can see that we're importing from React Native. And the things that we're importing in these lines here are like the div's that we're going to use. They are these native elements that React has built in a way that they can render to the native operating system that they're working on. 

So we'll pull apart exactly what each of these means in a little bit. But for now, we can just keep going. And lines 20 through 26 are things that React Native is importing to specifically make this web page so things like the header and the Learn More links. These are just things that are specific to the default app that's rendering here. 

We'll come back to section in a little second because we'll see that it's used a little bit later. But let's look at our main function, which is the app function. So we can see that this is an interesting setup because we have a function that we're declaring with the const keyword. It's not taking any parameters. But we see that we've now got some JavaScript code that happens in this section here. 

And then there's a return statement. And inside of the return statement is where we start to see things that look a lot like HTML. And that is one of the gems of why React Native is such a great platform to develop apps on because we can intertwine how we use JavaScript, HTML and CSS all into this one file. So now we're seeing examples of using pure JavaScript here. And then we're using more HTML. But we'll see that we can wrap where we're using each of those things. 

So what we'll want to now do is try to see where each of these components that are on the app come from in the file that we're taking to look at. So the first element that we see is the SafeAreaView, which is one of the special React Native components that allows us to make sure that everything that we're rendering will be within the view for the user. It's very important for the iPhones that have these divots in them for the camera because we don't want to render something that's going to appear behind that divot, even though there's screen up here. So that is what the first two div's are dealing with, making sure that the thing that we're rendering is within the view of the iPhone. So we have our SafeAreaView, which is essentially like a div. 

And then we can see that we have an attribute to this element, which is style. And this is how we're going to end up styling our components. So style is referring to the CSS that we're going to give this component, which we can then find later in the file. So let's go find it. 

We see that style is equal to background style. And I'm going to use my favorite handy-dandy VS Code hack, which you'll also be able to use on code spaces. And I'm going to do Control-F and look for background style. And just see if I can navigate to where in my file I see that. 

All right, so I see two places. And we're looking for the third and here it is. So we found background style. And we can see that background color maybe is an attribute that we're familiar with. The color of the background-- pretty great name for that variable, if I do say so myself. 

And now we see something that maybe you've seen in JavaScript before, but maybe not. And this is called a ternary operation. And it's saying if something, do this. Otherwise, do this other thing, if else. We're used to that. So we are now asking our if-statement in this first part is dark mode. So we're assuming that is dark mode is going to be some kind of Boolean because we're asking is this true or is it not true. 

PAUL SONG: That's like this question my div's asking is dark mode true. 

CATHERINE DESKUR: Exactly, and then if it is true, we return this. And if it's not true, we return what's on the other side of the colon. So now what we're saying is we want to set background color equal to either a dark color or a light color, depending on if the user has selected dark mode. 

So we can see how that would be super useful for developing apps. And we now also have an example of where we're using CSS and JavaScript in one, which is so cool that we have the ability to do that. So we can now go back to our SafeAreaView and see that what we're looking at is this view finder if the user has decided to set up their phone in dark mode. They're going to render this in the dark mode color using that CSS. And it's the same thing for the status bar that we see here as well. 

So these are good practice components to use in the app that you may or may not develop because again, it's developed specifically by React Native to accommodate the chances that the phone that you're developing for, or iPad, or something like that-- that whatever you're trying to display will be within the screen that's actually showing. 

So continuing on, now we have something called a scroll view. And so if we take a look at how this app works, maybe we could venture a guess as to what the scroll view does. And if you guessed it allows you to scroll, you'd be spot on. So it gives us a very safe and interactive scroll that looks a lot like scrolls that we're used to on iOS. So it feels very natural, and that was intended by React Native. 

So a scroll view is going to allow us to render pages that are just beyond the size or the height of the device that we're working with. And now we can see some more parameters we don't need to worry too much about. But rest assured, these are all described in detail on the documentation for React Native which we'll be taking a look at in a little bit. Then we see again that we're passing style, the attribute, the background style. So if we are in dark mode, like we went over before, that's what we're going to be rendering. 

Awesome. So now let's get to the real meat of the app, which is the stuff that we're displaying to the user. So we can see that we have a header, which we've imported from earlier. It's from the React Native default app. But now we can start to see some text that we're rendering. So let's find where we have this Welcome to React Native. 

And we'll see that is in the header that we've imported, which we found from here, the React Native app. And then now we see that we have some steps. So let's take a look and pull those apart. And I mentioned before that we were going to go back to it earlier and so here we are at the section tag. 

So we've used div. We've used View, which is going to be a lot like a div header. And now we're getting to something that maybe we can't think of exactly as being another component. And that's because we've defined it up here. 

So section is like a separate function that we have defined, almost in the same way that we defined app. And now we can see, again, that before the return statement, we have some JavaScript. And then in the return statement, we have stuff that looks a lot like HTML. And we've also passed section some parameters. So you see that we have two children and title. So now if we take a look in here what we'll see is some more views, which are going to be a lot like div's with styling that has been defined below. 

And then we have text. So finally, we're getting to the good stuff. We're seeing some text being rendered. And if we take a look at what appears in the inner HTML-- so between the two text tags-- you can see that it's rendering title. And then it's rendering it in between these curly braces so a lot like we used in Jinja with the curly braces allowing us to use Python. We can now put JavaScript in between these curly braces, even though we're rendering right now in what looks like HTML. 

So now we can see that the curly braces are allowing us to reference this title variable. So if we're taking a look now back at the app that we currently have, it would make sense maybe that for each of these sections our title is going to be rendered with a parameter that we're passing to this section function. And then the other text attribute that we have here is rendering children. 

So now we can maybe pull apart each of these, what looks like sections. We've got step one and then that seems to be the title. And then the description part is what the children is going to be. 

PAUL SONG: And the differences between the text is also described here, where you can see in styles there's different characteristics here. There's a section description, and then there's also a section title. So these dictate how the style shows up, similar to how you can do style equals in HTML also as an attribute for certain tags. 

CATHERINE DESKUR: Great, and since you mentioned it, Paul, let's go take a look at those styles now. So if we scroll down, we can take a look at the style sheet that we have here. So style sheet is a concept we're familiar with. And we can see-- I think we're in section, title, and description is what we were looking at. You can go up to just make sure. Section description and section title-- we also have a section container here. 

So let's pull these apart a little bit. And these are things that look pretty familiar. There may be a different styling. We're used to using the dashes in between words for our CSS. But now we can see that we're in camel case or instead of dashes, we just capitalize the next word. 

But margins we've used before. And so we have a margin. We have padding. We have a font size. We have a font weight. And we can now see that the difference between this title styling and the description styling-- we have a margin. We have different font sizes, and then we have different font weights. And we can see that that's evident from the app that we are taking a look at. Awesome. 

OK, so now we can see that we're rendering a bunch of different sections. We're passing these attributes, title. And title is step one, which we can see in the app first. And then we can see your changes, debug. So we can draw lines between the code that we're given and the code that we see rendered. Only what happened to the children parameter that we passed in section function? Where did it go? We didn't define it in our section. 

And what we'll actually see is that the stuff that we rendered in what we thought was the children parameter is what is contained in the inner HTML. So we can see that this edit and then we have more HTML within here. And we can see that reload instructions. So something else that was imported from the default React Native new app screen. So children was just referring to the content in between the tags. So that's something we can learn by pulling apart the React elements and taking a look at the app that it renders. 

So for the most part that is pretty much what this app is. We can see we've got some links here that will actually take you to web pages that can help you take a look at exactly what we do in React Native. So this is the documentation. And what we can take a look at now is how awesome the React Native documentation is. 

So if any of you have ever looked at documentation for languages like Python or maybe C++, those pages maybe aren't as user-friendly. But React Native is a very user-friendly documentation. So we can take a look at how to manipulate styling, and it's going to give us code examples. It's going to be very descriptive about what we can and cannot do. So these are going to be your best friend if you choose to develop your final project or a mobile app using React Native. 

So we can see a ton of examples of how to use width and height to give size parameters. We can look all into how we would import images, and it will give you examples of that as well. 

PAUL SONG: Again, the images tag here in JavaScript is also really, really similar to what you see in CS50, where it's image-- and we also have a source attribute. Again, it's really similar to how in CS50 as we translate from C to Python to HTML-- a lot of coding is just translating and using the languages that you learn in CS50. It's really easy to translate and apply all those things that we learned into React Native. 

CATHERINE DESKUR: Exactly. Also, take a look at examples of how to use some of the components that we saw on the distribution app. Let's go to the components tab. 

And this is where you'll find most of the information about how to use the specific parts of React Native. So the basic components here are going to be the staple, the bread and butter of what you'll use to develop your apps. So we have view, which is most related to a div, text, which is just some kind of text element, image, an input, a scrollview, and a stylesheet. 

So let's take a look at maybe all that we could do with the text component. So we'll see a brief description of what the text component is. We'll see some examples of code that are written using the text component. And then we'll see examples of all the different attributes that you can give the text component or in this case, they referred to them as props. So we can see that there's a very, very long list of things that we could possibly give our text component. But let's take a look at maybe one of these examples. 

So let's take a look at the accessible attribute or prop. So if we're taking a look at this example, we'll see that what it says is we have the view as an accessibility element. And we can see examples of accessibility guides. So this is going to help to make maybe the mobile apps or websites that you're developing more accessible to a wider audience that maybe have restricted-- 

PAUL SONG: Accessibility needs. 

CATHERINE DESKUR: Exactly. So these are great things to look into if you're looking to develop an app that's going to be able to be used by a wide range of users. So great things to look into. And much like how we would use the alt property for images to describe the image, it can be helpful if the image doesn't render but also for people who maybe are visually impaired and wouldn't be able to experience the website in the same way. So great to look into the accessibility functionality if you're able to. 

And we can take a look at some more here. So let's take a look at onPress. So this allows us to add some kind of event to our text that if you press the element on the screen something will happen. So you can take a look at press events for more details about that. But we can see there's a description of every possible thing that you could do with this text on this website. And let's go take a look at maybe another component. 

Let's take a look at a button and see what we could do with this component. And then maybe we'll even implement this in a live coding example. So we can see that a button is going to be very similar to the button that you might have used in HTML. And we have many parameters that we can pass to this button. So we can again do something on press, where we activate some function when the user presses the button. We have a title, which will be the text that's contained within the button. We could have a color of the button and an accessibility label. Again, an important thing to consider if you want to make sure that your app is available to be used by a wide range of users. 

And we can take a look at some sample code here. And it shows you the rendering on this right side. And again, more examples of the props or the attributes that you can pass this function. Always important to note when those attributes are required as denoted by this red box here. But let's go back to the code and try to implement that. 

So what we'll do is we want to add something to our code. So let's add a button. And we can add it within this view. And what we'll do is add our button tag. So if we're referencing once again the styling that we see on React Native, we'll see that button is included with a capital B. And that then we need to pass it a title and an on press. So let's do that now. 

PAUL SONG: Also a really great feature of React Native is that-- as we saw on Flask and stuff like that, we have to use event listeners and that can get really complicated and confusing. Whereas in React Native, you can literally give the button an on press attribute that just specifies what it does. If you pass it a function that specifies what to do on press. 

CATHERINE DESKUR: So we're going to be able to interact with this button in just a second. But let's do-- and yet again I have to give it these parameters. So let's give it a title. And we'll say button with an exclamation point. And then we'll give it a function. So on press-- and we don't really want this button to do anything right now so we'll give it an empty function. So this is the outline of a function that does absolutely nothing. And we'll save this and see what happens with our app. 

Like Paul mentioned earlier, these apps are going to render as we're going. So we can just click Save on this and see what happens. And so let's do that now. 

PAUL SONG: Command-S. 

CATHERINE DESKUR: And we'll see that-- I think and I hope-- here we go. We have an error. Oh no, what do we do? Let's read the error message. And we can see that what happens is we can't find a variable button. So if we can't find something, Paul, do you have any instinct about what we should maybe do? 

PAUL SONG: Well, it seems as if the program doesn't really understand what a button is, a.k.a. we haven't really defined it or imported it. 

CATHERINE DESKUR: Yes, exactly. So we have a clue that the computer isn't recognizing what this button is. But it's recognizing things like view, which we saw were also from React Native. So one thing that we can do is if you're confused and looking for a way to debug, take a look at things that do work and see if we can learn things about those components. 

And so if we wanted to learn about the view component, we should be able to see that we've imported view here from React Native. So does this seem like maybe we need to import button? 

PAUL SONG: Exactly. 

CATHERINE DESKUR: So let's see what that does. And now Control-S to save, and it should rerender the function. And now we can see that we have a button that looks a lot like things that we've seen in Apple or in the iOS. But I think this button looks kind of lame. So let's give it some styling. 

And so to do that we're going to follow examples of things we've already seen in the code before. So we want to give it some styling. And so let's add an example of the button styling. So maybe we'll give it-- what should we call this button? Button-- or we'll call it a cool button because it will be a cool button so cool button. And we're going to use the same syntax that we see the other style sheet using. And so let's give it a background color and background color of pink. And let's see what that ends up looking like. So we'll Save. And we'll see that-- oh nothing happened. 

So we need to take a look at things that already did work. So we've seen uses of style before. We can now see that we're defining this style and using it as a parameter or a prop in these tags that we have. So we forgot to do that. So let's add that in now. 

And if we're referencing style that's in the style sheet, we need to reference the style sheet, which was defined below using the keyword styles. And to access each of the different stylings, we'll use the dot operator. Now we can see that we should have cool button. So let's see what happens now when we Save this. 

All right, so again nothing happened. So what can we do about this now? Let's try debugging. And one of the things that I would take a look at are looking for examples of code that worked online. But in this case, I'm thinking maybe we should try a height and a width. So let's give it a height of-- let's say-- 10 pixels. And let's give it a width of 20 pixels. And let's see what that does. And can we highlight over what that error is and see if maybe we can figure out how to debug this error message? So it looks like we had an issue with this height and the comma specifically. So let's Save and see if this renders. And still nothing, right? 

So this is very indicative of maybe what your experience is going to be when you're developing apps. It's always important to have patience because we'll maybe try a bunch of things and it won't work. And it won't work. But again, there are so many tools out there that we can use to take a look at and to learn from. 

So if we were to maybe go back to the page that we-- the documentation for the button component from the React, what we'd see-- so I'm frustrated. I can't figure out how to get this coloring to work for my button. And I've tried giving it a height. I've tried using a background color. Let's take a look at some example code. That's one of my favorite ways to debug code or to come up with inspiration. 

So we're going to take a look at some buttons and we can see a bunch of things. Maybe this color keyword is something so that I'm going to keep in my back pocket. And now from taking a look at the style sheet, I don't actually see any coloring of any of the buttons or any of the styling. So what I'm going to try now, instead of trying style, let's try just using the color attribute and adding it to the button that we are using. 

PAUL SONG: So go ahead and put that within the tag here. 

CATHERINE DESKUR: Exactly. And let's Save and see what happens. 

PAUL SONG: Click phone-- [INAUDIBLE] not screenshot, click Save. 

CATHERINE DESKUR: All right, so now we have a pink button, and I'm very happy. So with that in mind, let's go on to making our app a little more interactive. So we didn't end up using our button styling so we can get rid of this styling. But we've learned now how to add our own style for each of these components. 

So now what I want to do is show how these apps can be interactive with the user. So I want to add some functionality where maybe we can count some number of something or maybe the number of times the users click the button. So I want to be able to display the number of times users click the button. And then I want to be able to add to that number as the user interacts with my web page. 

So what we want our button to do instead is to count up. That's what the user is going to be doing. So we're going to change that text. And again, a really cool element of React that will become very, very helpful when you're working on developing your apps is that you can just save and it will render automatically on the app that you're taking a look at. So now we can see that count up has changed. 

And now let's add another button or let's add a text to output the number that the user has currently pressed. So we need a text. And then we need to put between it user has pushed the button. And then we want to be able to say how many times. So right now it's zero times. So let's see what that looks like. 

All right, styling isn't great but we can fix that later. What we want to do now is get the function to work. So the thing that we want to make variable in this output is the number here. We don't want it to always be zero. We want it to add to that number as the user interacts with this. 

So great instincts that we want to add these curly braces to be able to access JavaScript because JavaScript is dynamic. So we can edit JavaScript. And we can interact with our JavaScript as the program is running. We can increment a variable. Whereas in HTML, there's not really a way to do that in pure HTML. 

PAUL SONG: Right. You would have to switch back and forth between Python, Jinja, JavaScript. Whereas here, you could do it all in one page. 

CATHERINE DESKUR: Exactly. So now what we're going to do is define a variable. So let's take a look at this variable. And we'll define it with the const keyword. And maybe we'll call it num presses so the number of presses. And we'll instantiate this. We'll initialize it at zero. So now instead of printing out zero here we can just print out num presses. And this will be the number of times the user has pressed the button. Or at least that's what I'm hoping. 

So let's go back to our app and-- a cool animation that the count up button will change colors. So that's pretty cool, but it doesn't work. My zero is still at zero. So we need to add some more slice to our code because this isn't going to work on its own. So to clue y'all in, what we need to do is use a component from React which allows us to have the user interact with the website. 

So what we're going to do is add something called a useState. What this allows us to do is have a variable that we know is going to change state during the program. So for example, our number of presses is going to change state hopefully from zero to maybe one, or two, or however many times the users press the button. 

So what we want to do is instead useState. And we pass useState the value that we want to start with. So we want to start with a value of zero. It's the same thing as instantiating num presses to this value of zero. But there's one more funky syntactical thing that we need to do with useState, which is define the variable that will represent the current state of that variable so the number of presses. But then we also need to define something that we will use when we want to update that number. 

So I know it sounds a little weird. We're used to just being able to reassign variables, but now we need something to help us to reassign that variable. So what I'm going to call this is change presses. So instead of just being able to reset num presses on its own, we now need to use change presses to update num presses. 

We know num presses will start at zero, but we want to be able to update num presses every time the button is pressed. And now is where the onPress function is going to become very, very useful. So what we want to do on press is use the change presses function to update the number. So what we'll do here is change presses, and we pass that function-- what we want to change the variable to. So in this case, we want to increment the variable by one. So what we'll change it to is the current value of num presses plus one. And now if we Save that, it should be easy as this. 

And we'll see that we now have a thing that the user can interact with, which will update something else on the web page as easy as pressing a button. So I could spend all day just sitting here watching this counter increment. But let's add a little more functionality. Maybe we want to be able to count down as well. 

So we want to just represent some kind of number that the user can change. So if we went past it by one, we'd have to restart the whole app. No! So let's make another button that allows us to count down. So we'll put a title. And count down, and now we want to press the button. And we want that to decrement our variable by one. So we're going to be able to use the same syntax that we did before, where we use the change presses function. And we pass it the value that we want to change it by so num presses minus one. We want to decrement that. 

And we want to give it the same color for styling purposes because love that shade of pink. So let's keep going with that, and our closing tag to make the button a real component. So now we can click Save, and hopefully we should see-- so we now have a countdown functionality as well. And we can see that this looks pretty good to me. 

So let's say that we wanted to add some limits to this function. There's a bunch of different ways that-- maybe we don't want to count down past zero. We don't want to get to negative numbers. There's a bunch of different ways to do that and make sure that the functionality doesn't allow for this. 

One of my favorites is going to be using one of the parameters, or the props, that we can use for this button tag, which is the disabled function. So we can add disabled here. And we're going to give it some parameters here that will allow us to disable the button when we reach a certain point or a certain condition. 

As we'll also learn, or as we've seen many times before, we can use different stylings on different operating systems as a built-in functionality of React Native. So a disabled button on iOS will look different from a disabled button on Android, which is exactly what we want. We want to be able to make our apps variable. 

So in this case, we're going to use an example of some Boolean logic here. So we want to disable the function. Maybe we don't want to count past 15. So if num presses is greater than 15, we want to disable the button. And then if we have-- oh no, that's not what I want. 

And then if we have num presses-- oh man, slow typing day today-- less than zero, we want to disable the countdown button. 

PAUL SONG: So that's an example of JavaScript within the curly braces. And that expression is a Boolean expression, which will return true or false. Again disabling or un-disabling. I think we should have a D there. 

CATHERINE DESKUR: Yes, good catch. So now we should see that we can't count down-- oh no, but my bounds are wrong. So we can see that now we needed less than or equal to to keep it within the bounds. Oh, wrong side. Less than or equal to, or greater than or equal to. Now we should be able to see that our functionality is as we would have hoped. And we might need to refresh the app so that we-- all right, great. 

So we can see that now we can't use the countdown button. It's disabled, and so we can't go lower than zero. And now if we use the count up button, we should be able to see that we can't get past 15, which is exactly as we had hoped. 

So with that in mind, we can now already see a bunch of the possibilities. They are endless for what you can do with this React app. Anything you can imagine, you could do with React or with React Native specifically. 

But, Paul, dream big. Maybe we want to have some kind of food ordering service. We want to use a map to find things. Or maybe we want to have a carousel display of images. Or we want to get something that looks a lot like TikTok or display a calendar. The possibilities are endless. 

But I'm a beginning React Native user. So it might be a little bit hard for me to develop that all on my own. Luckily, like Paul mentioned earlier, there's such a big community of people that are working and developing with React Native that there's a ton of third-party libraries that we can use. 

So we'll take a look in what you would maybe be able to mess around with is taking a look at React Native. And then we wanted to do a map so React Native map. And we'll see that there are a bunch of libraries that we can install into our React Native application that will allow us to have this functionality without having to build it all on our own totally from scratch, a lot like in API. 

So what we'll see is that this directory can be included in your package folders that you can use React Native. And you can use this map functionality within it. So scrolling down-- so pretty popular. A lot of people are using maps. So that means that there's going to be a lot of example code that we can take a look at to learn from the other apps that people have developed in the past. 

And we can take a look at some sample that they give you on the documentation here of how to import. It even tells you how to install it. So we'll see the installation instructions are detailed here. And they'll give you a bunch of different installation instructions based off of how you're configuring it. So all of this good stuff has been imported here. 

But now with the last 10 minutes, we're going to talk about something that's the bread and butter of web development. No matter how good you get at coding, you'll always spend a lot of time debugging your code as well. Always important to be able to have tools that you can have at your disposal to prepare yourself for what would happen if you ran into an error you didn't know how to solve on your own. 

So with that in mind, we're going to go back to some slides. It was great looking at the code. But we're going to talk a little bit about how we can deal with debugging. So let me get my slides up. 

PAUL SONG: And also if you guys noticed earlier on the actual iPhone simulation, when there is an error, it displays the error message in a very, very easy-to-read way. Unlike simply giving you a bunch of red text in the terminal, it really digests the error messages, which is another really key feature of React Native that helps developers a lot. Again, making it really useful in the workplace, allowing development to be faster, et cetera, et cetera. 

CATHERINE DESKUR: Exactly. So that being said, there will be some error messages that might be a little bit hard to comprehend. But for the most part, React Native does a really great job of cluing you in as to what's going on. 

So what do we do when we hit step five, getting the inevitable error? So if you haven't been able to build and launch your app from the beginning-- so if you haven't changed anything about the code that's been given to you but you can't seem to get it up and running, you want to make sure that you're following the right tutorial for the operating system that you're developing on and the operating system you're developing for. 

There's tons of great resources. There's videos. There's text instructions. And there's also maybe some helpful TF's that might be able to help you get this setup. But if you haven't written any code, don't worry. It's not your fault. There's something about the setup process that you'll just need to take the time to figure out. Then, like we saw with the button component, sometimes components might be difficult to build-- or start like with the mouse component-- might be difficult to build on our own. 

There's tons of third-party libraries out there that we can take a look at. Then when you import the library or like we did with the button component, which is an import even though it's within React Native-- but if you're importing the button component and it doesn't seem to be recognized, you want to make sure that you've installed the library. And so you can follow the instructions on the documentation for those packages. Or also that you've imported the proper file. 

And then if you have CSS that you have maybe used in previous assignments or have found for CSS but it doesn't seem to work exactly the way that you want it to for React Native, make sure you're using the proper syntax. So instead of using the dashes, we'll mostly be using camel case. 

Or when in doubt, check the React Native documentation. For the most part, they're really great about giving user-friendly examples of how to use the syntax. And just to stress one more time, there's such a huge community of developers out there that have tons of resources. And if you have an error, chances are there have been tons of other people that have had the error as well. Use Stack Overflow. Use YouTube. And just get started developing. 

And then, of course, I had to include my favorite-- the poster that hangs right next to my computer when I do web development or app development. And that is just keep calm and debug code. So with that in mind, that's all we have. So if there are any questions, the chat is open. Otherwise, thank you so much for joining us today. And it was so fun coding with y'all. 

PAUL SONG: Thank you guys so much. Once again. React Native is an incredible programming language. You can really see why it's used by all the top companies today-- really fast, really simple, a lot of documentation online. Just a short and sweet program. And I wish you guys the best of luck using it. And thank you guys for coming.