Name: React Native Web UI構建（P7D3）--與Jesse一起現場編碼 (React Native Web UI Building (P7D3) - Live Coding with Jesse)
Uploaded: 2021-01-14T10:33:05.000Z
Duration: 1 h 16 min 26 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。

everybody welcome alive coating with Jesse.

過去簡單式

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

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.

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

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.

So we're gonna start this Pomodoro timer.

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.

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.

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.

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.

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.

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

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.

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.

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

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

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

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

Do you type your answer in here and you hit?

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.

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.

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

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.

字幕列表影片播放

React Native Web UI構建（P7D3）--與Jesse一起現場編碼 (React Native Web UI Building (P7D3) - Live Coding with Jesse)

content

basically

native

position