and okay. Okay. Let me know by Sherry. I will post all of this so you can also watch it. Um, yeah. Okay. 23 viewers but Happy late. Father's a happy juneteenth. Everybody. Happy is a memorial Day, next weekend or something. Next next weekend. Wild. So many long weekends. Fathers what? Oh, 4th of July. Yeah. I don't know. I'm from Canada. Guys. Don't make fun of me. Okay. I don't know. I don't know your holidays. Okay. So everybody's hanging out in here. So if I save this file over here, um, pops over to here. Um, Founding Fathers Day. Okay. Um, oh, we have a damn now. There's so many chats to take care of. Okay. Um, this is cool. So in the future, just as a heads up in the future, um, there's a chance we might actually use code cast instead of zoom for a couple of these, especially when Being able to access the code is like 90% of the thing. It might just make more sense to use it, but for now we got both. Everybody has to deal with two separate things. Okay, so that was whole lot of work and a whole lot of hassle. I apologize. If you're looking at your snack, your, your expo snack, um, you'll be greeted by maybe somewhat familiar kind of screen. It looks a lot sort of like a javascript file. It looks a lot sort of like an html file. Um, for now we're not really going to worry about these imports at the top basically as your app gets larger. You'll want to store things in separate files and keep them organized and then you'll want to bring them in kind of as needed but we won't worry about those for now. Um here we have a function called app and this is actually the go to syntax for a component so what this actually is that I'm highlighting is a component um and you can make a whole bunch of them, you can just use the same syntax and if you put down another one and you rename it do all of a sudden have a new component, don't do that but anyway, um this is a component and so this function is going to be called by the react native magic so you don't have to worry about it. Um all you have to know is in this snack. The one that's called app is the one that is rendered on the right here and so on the right here kind of down this dividing line, we actually have a simulator. So this is simulating live whatever is on the left side here. Um you can check that by in this line if you change this to anything. If you just delete stuff um you'll actually see it update their, change your core and watch it. Um and so you can go in, you can delete, you can edit in this thing and you'll see it kind of change up here um we'll get back to this in a second when we actually start trying some stuff um but down here real quick is a style sheet um in the past we just made a CSS file, but since we're not actually working on the web, there isn't really CSS. So what they sort of did, what react native implemented was this thing called a style sheet, um which then essentially just acts as CSS Um so 90% of what you do in CSS you'll be able to do in here and it won't even feel like anything is really changing. So, as I mentioned on the right here is a simulator in the future, if you ever want to like simulate on specific devices, you can um if you want to actually you can download their app on your phone and scan a QR code when you go to my device and then it'll actually live update on your phone through wifi, which is super cool, super awesome. Um Not really what we're focusing on today, but anyway, just thought I would mention that. Okay, so in, on the code cast page, um it'll look a little bit different than my file here. However, um basically all you'll really need to know is that this export function default app right here is the exact same as export default function app right here. Um so if I make any changes in here, um we would expect open up my simulator and I'll show you guys how to do this through the s code at a later one. Um it'll take a second to open it, but if I change this code, it'll change on my simulator. And then if you guys want to just copy paste it, you can copy it from the code cast browser and then paste it wherever in here. I'm actually working on it just in case you are falling behind it all. Okay, I will put this simulator over here and let it load. It takes a minute the first time. Okay, so welcome to the world of react native. Yeah, so exciting. Okay, so um right out the gate, you'll notice that in react native it looks a lot like html. It talks of allegation all but it is not html. So here we have these things View, text and status bar. I think you guys have something other than asset example and card like what, what are these things? These are not like dibs and P tags and stuff. And so in react native the kind of route base components. So these are all actually components and just like how this app is a component. All of these will have some logic inside of them that spits something out. Um but so view and text specifically Are two provided by react native. Um and they're sort of like the baseline components, you can kind of imagine whatever I say component in that scenario. It's basically like saying like html tank. You give it some stuff and you expect it to spit out some stuff um but so a view and a text you can kind of think of view as like a div. So if you ever want to render something that isn't text but it's kind of like a shape. Um let's see, I think the simulator in the browser that you guys have has a good example, which is this sort of white square here. If you want to make a white square, you would usually use a div And then in react native you're going to use a view. Um I don't know why they named it a view but it's called a view and then likewise whenever you want to render text, you can kind of treat it as if it's like a P tag or a paragraph tag in html and that's just any time you want to put actual text on the page and those are sort of like the backbone. There's really not much else that you end up doing and when you do need something else, there is components for there's components for buttons and text inputs and stuff and like little calendar things but for all we care about for right now we got views and we got texts. Now the card and asset example in here these are actually made by um this one is just automatically made and this one is made by react native paper. Those aren't made by react native. So if you want you can kind of delete them and then if you see on the right it'll get rid of that thing. Um You can keep it if you really want. Um But okay let's see. So why don't we start um where every app starts? Which is we can come in here, we can replace the text um with Hello World and then if you save it and then if you look in your simulator and so you can have a copy paste this, I'll get rid of status so you can put this text. Oh and he raised their hands. Yes. Um Are you are you using the snack the cli okay. Um So in order to do that, when you're in some instance of terminal in the folder you'll just run expo start and then it'll kind of go through this whole boot up process and compile everything and then once it's actually running um in the actual terminal you just hit eye and it opens an IOS simulator, android. Oh coaches. Yeah. Um um Yeah I think I think the code cast is mostly just to get my code and then go into your folder. Um Yeah. Do you guys actually Yeah, I guess you guys don't see. Oh no you don't um Cool. Okay let me know if you run into any problem with that, Just hit I one since running. Mhm. Okay. Um So hopefully everybody, I mean you might not have written Hello world but hopefully everybody um maybe some thumbs up and stuff. How do I see ha participants school? Okay um Either thumbs up or in the chat say awesome um That you were able to change something on the page. Um like the text and then it actually updated on the right side. Um Let me know if that worked for you guys or if it didn't work for you guys and then we can figure out there's anything wrong. Cool. Got a thumbs up work for me. Woo hoo Yay. Okay. Um Honestly it's so it's almost frustrating how easy the expo made writing this stuff. I remember when I first learned react native before this existed and it took me weeks just to even get to the point where I could change something and it would change. It was so annoying and these people were just like oh yeah just come to the website and it works. Oh I love it. And I and anyway okay so back in our code so we have text which obviously is a text. Um And when you are um basically adding style to things instead of using classes and I. D. S. And stuff like that. They basically use an javascript object essentially. And the tag style. And so what we might want to do is let's say we wanted to add like under under Hello World we wanted to add a red square so we would come in here and since it's not text then it's just an object, we would say okay, well we want to view um and then in this view we're going to give it style because obviously right now if I don't have that and I come here it reloads, but obviously nothing exists there because there's nothing about this that does anything. So we want to add some style to it. Um Well say style is equal to and then curly brackets, sort of like in javascript when you're doing classes and stuff like that. So we're gonna have this as our syntax. Don't mind all the red down here, I just keep saving so that it updates for you guys. Um Okay, so in this style we can do multiple things um to keep it nice and easy. What I'm actually going to do is add another object inside of here. Don't worry about the syntax for now. I I don't really want to come down here and mess with the style sheet because we might get into random issues, like I'll even push it down so it's just a little bit out of our way and then up here inside of this curly bracket is essentially the inside of this down here. So whatever sort of CSS or styles we want to add, we can just add it in here instead. And so let's say I wanted a width and then again, typescript love typescript. You can see it tells you exactly what it wants. It's either a string, a number or undefined, lovely for whenever you're like, oh damn, I don't want to have to google that. So with let's say 50. And so that's going to be in the value of pixels. Um don't ask me how big a pixel is. I have no idea. I just kind of do it until I get a size that I like. In reality when you're making apps like this, you're not going to be using pixels, You're going to be using like ratios. So that as someone uses bigger phone, it doesn't look weird. So for now we're just going to say 50 pixels and then let's say height And the height is going to be 50 pixels. Um and feel free to copy paste this if you're like, Oh, you're moving too fast. So we have our width is 50. We have our height is 50. Um If we save and we look at it again, nothing is on the page. That's because our view is essentially transparent. So what we will do is they'll actually just, no, that's gross. Okay, what we'll do is we'll just come here and we will add a background color, let's say so we have back ground color and let's say. And so the background color has to be in a string. Um which as we get used to objects and stuff. It will make a bit more sense. Um but it has to be in a string, let's say this one is going to be red. You can make yours whatever height, whatever with whatever color, but hopefully when you look at your simulator to a red square. Oh my God, facebook hired me. Okay. So totally innovative. We made this beautiful app that says hello World or whatever and has some sort of shape underneath it. Um this is in a sense, kind of the essence of making apps. And so like from here you would be able to grind away at the styles and grind away at what's on the page and you could totally make tons of different things. You could make like a whole bunch of different squares, you can set them up in a grid pattern. Um You could, instead of having this like background color, I think you can make like a a picture instead um of a cat. Um Obviously it would be a cat. And yeah, and so that's sort of like the baseline baseline of working in react native. Um Also I'm gonna always accidentally call react and react native. The other one in my brain, they're just equivalent and it's it's not right, but it's my brain, I'm sorry. Um Okay, let's get a little wacky. So let's try and make a component. Okay, so we can make our component, I believe above or below this function depending on what language you've ever written in before. Um You might have very strong opinions about which one is right and which one is wrong, I'm gonna put it below, I'm sorry. So our syntax is going to be similar to appear except we're not going to export it. This sort of purple part here, don't worry about that, that's that's sort of how you let it be used by other files. Um This one we're just working in one file, so we're going to define a cost um and I'm gonna call it um I'm gonna call it cat component. I don't want to get your hopes up, I'm not going to put a cat in it or it's not going to be related to a cat. Um but um we're gonna basically define a function and I'm gonna not pay much attention. Okay, so we're going to define a function um if you prefer defining functions sort of with this syntax you can um feel free to just copy paste this. Um And so what's going to happen is this component is going to do a return value. So just like this app component up here, it has returned and inside of that return there's this view tag and within it it has other stuff. And so basically when you're working with functional components which are what these ones are called because their functions um each one is gonna have a return value and that return value is going to be whatever is rendered on the page. So in here I'm going to just like up there, we're going to have return and so you can see it's basically the same thing um as up there and then in this return let's put down a view. Okay I apologize. The snack is not auto completed, your auto completing tags, like it does for mine. I know that's very annoying when you're following along but okay, so we have a view and then basically if we save and we look at our app, nothing will change. And that's because all we did was define a component and then we did nothing with it. We could define infinite components that do infinitely cool things but unless we actually render that component on the page, it's nothing is gonna happen. So the way that you do this is going to feel real weird but similar to how we have text and how we have view underneath here, we are going to put just like an html tag, we're going to put a less than carrot um and then we're going to say cat kind of opponent and we're gonna close it like that and then this is just if you haven't seen this, it's just a fancy way to say there's not going to be anything inside of it, sort of like how this view just ends right away. This just sort of shortcuts that but so we're going to say this, we're gonna have our cat component as if it were a html tag kind of um and then if you save and you look in your thing again, nothing changes. Oh my God, so boring, Okay, so we want this to actually do something. So let's for now, just to make sure that everything is working. Well, let's add a text tag inside of this view, inside of this cap component that is then getting rendered by this thing wild. Okay, so in this text, let's just say I'm cat, Okay, and then we're going to save and we're going to look at our simulator, rejoice something actually rendered on the page. Okay, so if you have followed me up till now, um let me know if anybody's running into anything weird um if something is going wild, um there's absolutely no shame in being like, mine's not working what the hell is going on um in the future when we're in person and not just online. Um Well, just like you can totally just like raise your hand and someone will come by and help you and you don't need to feel like, you know, everybody looks at you, but for now, no, no shame in being like broken or if it's not broken, you can give a thumbs up or something, you can say whatever you want. Um But yeah, how are we feeling up to here? So we have this component, it's getting rendered on the page and it has this stuff that it returns, and so basically it's just a whole lot of javascript um to do something super simple, which is put I'm a cat on the page. Okay, how are we feeling up till here? We have a thumbs up from Andy, I hope that means that your simulator is working as well, which is very exciting. Um Okay, so let's get at the second, what is it? 6 46. Okay, we have 14 minutes. Let's get it. The second thing I talked about. So if we remember back here we did we just did a component. So it's a modular block of code, totally forgot. Okay, this is where it gets way more fun. So obviously this component is very simple but let's assume it did some cool school last stuff in here, like someone, someone other than me had a great idea for what would go in this component. It does a whole lot of stuff and it renders more than just a handicapped. So let's say that our job is to actually add five things onto this page instead of having to write whatever the cat component does five times you can come here, you can copy and paste it twice. And so now we just have a cat component and we have another cat component. And if you go back to your simulator, there's just two of them and so you might get a sense from that that like, oh wait a minute. This actually could save you a lot of time because I didn't have to do any stuff in here. Right, like this could be like a million lines long of a whole bunch of stuff, but all I have to do is put one extra little line here, I do all of that. All I have to do is put one little extra line and whatever's inside this component just spits out on the page another time or however many times you could do it three times. I'm gonna delete these in a second but it just keeps going forever, which is beautiful. Okay, so here we are, we have our modular blocks of code so they can be duplicated, they can be reused as many times as we want. Um They're self contained and dumb. Um that isn't really on display here except for the fact that this component isn't doing anything, which technically, I mean it's not a very nice word, programmers use annoying mean words sometimes but it's quote unquote, but I love it all. Okay. Oops, Where is this google? Come? Okay, now let's get into state. Okay, so in the state we have these values that update and then change components. Um what the hell is going on here? What does this mean? So what we're going to try and implement In the next 11 minutes we're gonna speed run and if we don't get through it we'll pick it up next time we're going to do a speed run of adding a counter to this. So wild. Okay, let's come in here and on our view, we're going to add a whole other property. Um other than style. So over here, in between the carrot and the curly, we're going to add another one, We're going to call it on, click on on, let's see if it has any suggestions on touch. Um Let's do on touch and okay, so we're gonna do on touch and um it's always a shot in the dark which one it actually is, There's tons of different ones. Um and in here we're gonna set it equal to something in in these curly brackets. Um And this is something where you can totally just copy paste is from me. Um but we're going to define a function here above the return value. So this is basically just a function, right? So above the return of the function, we're going to define another function and we're going to call it clicked, let's say. Um and it's just gonna be like that and then in here on this on touch event we're going to actually pass clicked. Um My thing did some fancy removing of everything. Don't mind that um Maybe I'll move it back. It might try and fight me on it, but okay, so we're going to have this function up here, it's going to be clicked and we're going to have on touch and equals to click over here. Um basically what this means is whenever you are in the simulator on the right side and you click on the square, it's going to actually run this function um specifically when your click ends so when your finger kind of comes off the screen um so to test this we could add um a console dot log and we can just have it say like I got clicked Okay, let's see if this works and if I am a sham Okay, cool, I clicked, I clicked it and down here you can see in my console it says I got clicked um and then in yours I'm just double checking to see where your thing might be, I'm gonna copy, paste this in so that I can actually um double check um Okay, and then so this should hopefully look similar to what you guys have here um Okay, this should look somewhat similar to what you guys have uh and then where might be our console, that is the real question, preview devices. No editor, Consul, anybody have a consul. Okay, come on, this is okay, logs. No I got so close darn diggity Okay, yes, went sad. Okay, let me know if anyone else is seeing the button that I'm obviously missing, I've definitely done this before in the pilot um don't make me Mhm Okay, um apparently this stop everybody technical difficulties as per usual with doing any sort of programming, everything goes wrong when somebody's looking and I have too many people looking um Thank you, miss um Unfortunately I definitely think, I know Andy's is probably working because he's using the same thing that I am um This is annoying. Okay, you know what, let's assume it's working. Everybody. I believe in all of your code. We're going to assume that if it looks like this and it has on touch event and it's not kind of complaining to you, let's assume that this is working and it's console logging, we're not actually going to use console logs anyway, um we're gonna add in a state here in the last couple of minutes. I'm not going to get into the syntax, I'm just going to sort of write it down and then you guys are gonna be like, oh what the hell is happening, don't worry about how it looks. It's more about the sort of like the feeling of, of how you can use these in the future and to kind of get your brain moving so up in the top of our app component, we are going to right like this. Um so what we want to do is we want to make it so that whenever I click on this red square, there's a counter and the counter goes up so I'm going to define a state and that state is going to be called count here on the left here. Um I'll say so you've got to copy paste this ongoing um so the way it's gonna work is this count is gonna basically change as that button goes up and then this count is going to tell whatever is rendering it. Hey, the count changed time to reload this part of the app. And so it's sort of like this life cycle of states where the state of the app changes and then whoever cares about that state changes. So um the way we are going to do this is with news state, okay? Which we don't have in here. Um So what everybody's going to have to do um is up top in this react native area. We're gonna put used state. Um Wait a minute. Is your statement coming from who's react native? Oh, it's not right. You state comes from react. Okay, so this line right here, I'll even put it in the in here, but you can copy and paste it from up here on the second line of mine, maybe I'll move it down. So it's kind of on its own area. This line is going to let us actually use this function that's made by react again? We will dive super deep into these later and they will make so much sense to you. And for now it's going to be like, what the hell is going on? And so what we're going to have here is in use state. We're going to pass in an initial value, which is going to be zero. And so this is just where sort of like what is the initial value? Um and then in here in your text um we're going to put count in these curly brackets. Um which is basically a way to just spit out some sort of string or number into a text. So wherever you had your text that said Hello World or whatever you had to say, um just right after that Hello World, we're going to add curly brackets with count. Okay? So if we look at our app now we get an error but I'm going to dismiss them and hope that it's just because I need to reload. Okay, let me try and reload and see if it's actually breaking. Okay, so if it broke on you or went weird, I'm sure there's a button um you can either reload the page or like close this and reopen it, but hopefully this is working for you in here, let me know if it isn't but okay, we have Hello World and we have zero, right? Which is which is super cool because we have a variable count. That is going to be set equal to zero and we're just spitting it out onto the page And there it is just add zero. Now, this is where in the last one minute we're going to go a little wild um whenever we want to update the state inside of a component um this is maybe through getting new information from a server or the user did something like click to square, what we're gonna do is we're gonna say set count and in here we can set it to whatever we want. So this is arbitrarily named, this is just sort of a naming convention so that it makes sense that we're going to set the account. Um and what we're going to set the count equal to is the current count, right? And then we're going to say plus one let's say. And so you could do this math however you want, you can set it to just 100 if you wanted to but I'm gonna set it to the current count plus one and then if you come to the simulator, Hello World with zero. And then I click it and it goes to one and I click it again and it goes to two and again and again and again and I can click endlessly a million times. I play a lot of cookie clicker in my day, I click real fast but basically you can see that this number is updating every time I click this square and the app itself isn't updating only this little text right here is changing. And so that's sort of the beauty of react and how it works. Um It did just ding to seven o'clock so you guys are totally free to skedaddle and run out of here um I will hang out for a couple of minutes because we got pretty fast there and if anyone has any questions or if there isn't working and they want to get it working, feel free. But um thank you so much for coming. Thank you Andy have a good one. Hopefully I will see many people at the next one next week and we're going to do it in person which we will um definitely put out on the discord and the email of where that's gonna be but definitely on campus. Um Same time, thank you so much everybody. No problem with cheating. Thank you Julia. Thank you Brendan. Thank you for coming. Have a wonderful night. Um wear a mask. Everybody. This COVID is not one. Yeah I will stop the recording. Thank you Julia. How do I stop recording? Stop her. I actually feel pretty good. I I'm like my my throat's a little I mean it hasn't had to talk this much in a while so it's a good it's a good little like test. Um But it actually wasn't wasn't too bad. Just one sip of water to kind of reset. Like one day basically, basically, laura, laura's been working. Oh I need to how do I stop my cat, turn off the court