I'm Jesse.

And today we're gonna work on the react native Web app that we started to a couple weeks ago.

I don't remember.

We started it.

Um, let me know what thestreet quality is like, um, last time, we had really good quality, but the time before that, it was terrible.

So hoping we have good quality again.

All right?

And YouTube's telling me that the quality is okay, so I hope that's the case.

Um all right, cool.

So looks like it's looking good.

Hey, everybody in the chat.

All right.

So I'm gonna go ahead and get started, and then I'll go back to the chat.

If you've never joined in before, this is how it works.

Uh, I will do.

Ah, Pomodoro sessions.

So let me get a Pomodoro timer running.

Um, let's go.

It's just fun.

Harry, get tomatoes.

Hammer will work.

So we're gonna start this Pomodoro timer.

It's 25 minutes.

Well, 25 minutes is up.

I'm gonna stop coding and I'm gonna answer some questions.

They were going to try to get through to Pomodoro cycles, see how that goes on.

And then at the end of both Pomodoro cycles.

If there any questions left, I'll answer those.

Andi.

If it starts to go really long, I will have to cut it off.

And, um so I may not be able to answer all the questions, depending on how many questions we have, because I'll have to go to my normal day job as a software engineer.

All right, so let's check out what we have so far.

Here's the actual app.

So this is as faras we got last time.

Ah, we just have a an input, a button and a title on the page.

But the cool thing was, we did all this intrigue at Native and it's showing up.

Ah, in in like Dom Primitives.

Basically.

So these air Dave's right.

Um, so that's that's the idea.

Behind React.

Native Web.

You can write a react native and render it as a Web app, and you'd be able to render it.

Not only is a Web app, but since it's in react native, you can render that same code.

Uh, you can I don't know of renders the right word when we're talking about mobile, but, uh, basically, that same code could be used to make an IOS app and on android app and potentially other things as well.

Um, so let's go to the code.

All right?

Hopefully that's all big enough for you.

The only thing is blocked out by my face right now is just the ah, the terminal that it actually is running the local server.

So not really anything there that ah would be useful to see.

Let's give ourselves a little bit more space for code.

All right?

You could see a pack of Jason at this point is very, very basic.

We have react.

Um react Dom and react Native Web React Native Web includes react native So that's why we don't actually have react native here in our main dependencies.

This package Jason will grow as we continue.

And eventually if we would like to turn this into a mobile APA's well, so it it'll get a lot more complex.

But right now it's It's a pretty simple and we only really have one component.

And that's app dot Js and it's also very, very basic.

Okay, so this will get broken out in a separate components.

But for now, I'd like to just work on building out the u I a little bit, and we This is gonna be a game, like, basically a math game.

So I used to play this math game with, uh, with my oldest son when he was just learning basic math.

And, uh, I think we de mode it last week.

But the whole idea is you have to get math problems, correct.

Toe win the game, right?

S o.

We wanna build out of basic you.

I I'm not gonna worry about graphics at this point, so we're probably just gonna use, like, color dibs to represent the characters in the game for right now.

Ah, and then, later on, I'm not really a graphics person, so self to figure out what I'm going to use for the characters.

But we just need to get something on the screen visually so that we can test out the logic.

All right, so for right now, the the input is there.

That's that's what we need.

Ah, Let's get some, I guess.

Let me explain first.

What?

What I'm thinking at first is just a basic thing.

So let me make this bigger.

All right?

So this before I just be at the top is our title.

We're gonna center this on the page.

The input.

All right.

So above the input, there'll be a math problem, right?

Just for now, it'll just be a simple addition.

Problem?

Do you type your answer in here and you hit?

Submit, right.

That's basic.

But then above that, or even on the sides, depending on the screen size Ah, we'll have the hero character on one side and the enemies on the other side.

Right?

And if you get the math problem right, an enemy will disappear.

If you get it wrong, an enemy will appear right.

So the way to win the game is to get so many questions right consecutively so that all the enemies disappear.

Right?

Um, so that's the very basic idea.

Level one, simple, um, the simplest version of this game.

All right.

And then we could think about adding in some more complex things later, maybe like having high scores being able to save, um, your your data's things like that.

Um, but for today, I'd like to just get that basic you.

I build out and I see sedition action in the chat so Hey, everybody.

That's Ah is joining us.

Um, if you're Ah, If you didn't catch the beginning and you're wondering why I'm not checking the chat, just hang in there.

I have a timer going.

When the timer goes off, I'm gonna check the chat and answer all your questions.

All right, So in react, native, we don't have the concept of dibs, uh, or spans or, you know, p tags and things like that.

We have these other perimeters which are based.

The very basic is the view and the text.

All right, so we're gonna be using mostly views here.

Okay, so this main view is gonna stay are our route view.

Right?

Um, but then we're also going to make what?

Let's call this our who's actually ever dividend so used to that.

Okay, So this view is gonna be our here of you feel for now, we're just going to give it, like a class.

Basically a style of hero later on will probably break these out into their own components, but it's a lot easier to work with him in one place when we're starting out.

So we're gonna say style hero, and that's all we're gonna have in that view books you, and this one is gonna be enemy.

Okay, um so for now, since I know there's we're gonna start out with multiple enemies, I'm gonna make three.

Okay?

Where?

Obviously not going to keep copy and pasting these, you know, But for now, we're just gonna kind of hard code, Um, a demo of the layout.

So down here, where we have our styles and react natives, the react native comes with this the style sheet, um dot create.

And you could put styles in there Basically the styles or a javascript object.

So instead of normal CSS you have these camel case versions of CSS.

Um, not all of CSS is available here, so it's It's a subset you could normally use on a on a website.

So, uh, it'll you're at probably won't break, but you'll get a little error in the console letting you know, um, if you're using something that's not supported by react native.

So for now, we're gonna add, So this is the objects objects intact.

So we're gonna add Atacama, and then we're gonna add a hero, okay?

And let's just give him a haIf within a height and in react native.

The units, uh, are just plain numbers.

Right.

So we don't say pixels or e m or whatever is just just flat out.

Ah, number.

Right.

So for now, let's keep things small.

It's just say 40 and height 40.

Okay, so we're gonna keep him at this point.

Just squares just really basic.

And then let's give it a color.

So we're gonna say background color and I don't really know, Axl, you for off the top of my head.

Um, I'm just gonna put in.

I wonder if you know, I've never tried this, but I wonder if I could say just like Blue.

I know you can do this on the web, but I don't know if you do it react native, So I'd like to know if you can do it, so I'm just gonna try it.

All right.

So I just copied and pasted Oops, area I just copied and pasted hero, and we're gonna call this enemy.

And let's just say red for the enemy.

And it saved that.

See what we get.

Hey, here we go.

So it actually works, Although I don't know about you, but to me this blue looks purple.

Maybe just because it's up against the red.

It's like messing with my eyes here.

But anyway, so here's a hero.

And here's our three enemies great s.

So I definitely learned something that you can just put, uh, names of colors in There s so that's useful, especially.

We're trying to just mock things up really quickly.

All right, so the positionings an issue right now, like we just put him on the page, but they're not at all where we want him to be.

So let's try to get in position properly.

So first thing we can do is moving down below the title and let's add ah, use.

And I'm thinking, probably should add a container for hero in a container for our enemies s.

Oh, let's do that now.

Basically, are we're gonna have ah view.

And, uh, sounds that, um I'm gonna say container for now, because I I suspect that these containers are gonna be very similar s O.

That we'll just have this container class and oops.

We don't want to self clothes that we want to actually close this view around the hero and then we're gonna have another container around all of these.

And you know what I don't have?

Oops.

There we go.

I don't have like my auto.

There we go.

The auto format wasn't working.

I was worried for a second and had it set up.

Okay, so now we have containers around here.

We haven't given the containers any styles, though, yet.

Ah, so let's let's do that.

Right now.

Everything inside the route is getting this justified content a line item center.

Let's let's take the route and make it.

Um, hate, Um, I think we can do We can do percentage to see if this will work on.

We need to put that.

All right, So we're gonna try height 100% on that route.

I'm not sure if it'll work or not.

I can't even really tell.

No, no, I didn't work, so Oh, actually, you know what we should do?

Um, let's go with, um flags.

One.

Is this it?

Let me see.

There's some property on flex that will make it take up the entire, um, the entire container.

No, that's not it.

I may have to look that up now.

So are our actual.

This is I d route.

But that's not really our route.

Um, let's just mess around in depth tools for a minute to try to get this right.

So this should have our flex.

Yeah.

Reflects, grow one.

See what?

This one this, um, so that's not owning.

And are even our bodies on this to creationists on this too, huh?

Let's just look this up.

I had to look this up for a project that I'm working on now.

But it was, like, two months ago, and I've already for gotten, so let's say Ah, full height.

Uh huh.

You react.

Native.

There we go.

Ah, it's a possible make you 100% and react.

Natives.

Yep.

This looks good.

All right.

So, Flex one is suggested here, which we tried, uh, take up the full screen position.