字幕表 動画を再生する
Hey, everybody, welcome to live coating with Jesse.
It's good to be back.
It's been Ah, long time.
So sorry.
I started a little bit later than scheduled.
Uh, I'm having some issues with, um with the stream.
So let me know if you can hear me.
If you can see me, um, it it may be that s o I had to force quit some applications.
Ah, Right now I have very little running on my machine.
So today, I'm gonna wait to hear back and see if you can hear me and see me before I go into this.
So let me know.
All right.
Well, nobody's saying there's something wrong.
Usually that happens quickly if something is wrong.
So Ah, I guess I'll just start so really quick.
Ah, here's why I haven't been streaming.
Um, I got a new job, and before my old job, I could live stream while I was at work at my new job.
I can't Also, I have a longer commute for my new job.
So it's been tough to find a time where I can I can actually stream.
So the plan now is I think I could consistently stream around 8 a.m. Eastern time, Um, on Wednesdays and Fridays.
So I'm gonna try to do that.
And I'd like to do a project with react Native Web.
That's what I'm working with for my new job.
Eso I think it will be better if I if I stick with that.
That way I'll know what's going on.
And the stream and the project at work keep coming like play off of each other.
So hey, everybody, there's a lot of people saying hi, so just say hello.
Um, so this dream is gonna be kind of like a short stream compared to some my older ones.
So I'm gonna keep it maybe, like, 1/2 an hour, Um, maybe a little bit longer.
And for this stream, I'm just going to set up a react Native Web project.
Eso really quickly react in a did.
So react is a Java script library that helps you to build progressive Web APS React Natives is a job, a script library that allows you to create mobile APS using react.
You can also create other things, so essentially you have this base of react that you can code and then it can be turned into other applications, right, that can run natively on different devices.
So not just android and IOS or, you know, Windows Machine.
But also, you could there there are other things.
So, like, a V R application, right?
Or, um, in this case, we're going to use react native and have it run as a website on the web.
It looks like my images frozen.
So right now, I guess as long as you can hear me, I'm okay with that.
So why would we want to do this?
This sounds crazy.
Why not just use react?
Well, the reason being you can write most of your code and in react native with some slight alterations, depending on platform and running on many platforms.
So we build for the web.
But at the same time, we could very easily turn that into and IOS up an android.
Abb, Um, and whatever else you know comes out that ah react native can kind of compile into.
I guess so.
That's why I'm using react native at work so that we could very easily be cross platform.
Ah, and that's why I want to use it with this project.
So let's get to some code.
And if my images frozen No, let's do this.
Um, I'm gonna get rid of the video for now.
Okay?
So that should help.
Maybe maybe a little bit with, like, frame rate and stuff or with the freezing.
Um, the video seems to be a little bit more resource intensive.
So first thing we're gonna do, I am on a Mac.
So this may be slightly different on Windows, but I want to open visuals.
Actually, that's open.
First things first.
Let's open a chrome window, okay?
It should be back.
Now, let me know how it is.
Now.
It looks like on my ended, it looks like it's better, so hopefully it is a bit better.
Um, let me know.
I'm gonna You know what?
It's not the internet connection for me.
It's, um it's my machine.
So I just think that my microprose a little bit older doesn't have the specs to handle streaming like this, so I'll try to figure out something else.
This may be a great excuse for me to get a new computer s so we'll see tear.
So the resolution is probably lower now, so I'm gonna try to make the font as large as I possibly can, and we'll try to Uh huh.
All right, Yeah.
If If the, um if the video's too bad, then maybe check out the recording.
That should be available a little later.
Hopefully, it'll be better.
But anyway, this is create wrecked up.
You can check this out more on your own if you'd like.
Um, but basically, we're gonna do n p x create react app, and then we just name the app.
So let me open up a terminal.
I use I term.
Mmm.
Remind me later.
Okay.
So I'll make this as Bigas.
I can You can see it.
All right.
So this is just, you know, regular terminal.
Um, I've gone into my projects folder We're gonna do create wrecked app.
And now let's name it.
And for now, um, let's say ah, FCC, um reacts.
Actions do.
Let's do it like this.
It's gonna be a weird name, but for react, native, uh, especially when you're going to try to do this.
Maybe restrictions coming.
Oh, you can't get in capital letters.
Okay, let's just call it, um, the It's gonna be all together.
Oops.
What am I doing?
So there's an issue when you try to use this with mobile, Um, that you can't have hyphens in your name.
So that's why I was doing it all together like that.
All right, so this is going to do its thing, and it's probably gonna take a little while since where?
Streaming at the same time.
So I'm gonna check out the live chat a little bit.
Ah, position.
Okay, so it looks like the frame rates still really bad, and that's probably since I started doing this.
Okay?
Yeah.
Yeah.
You know, at this point, if I put the settings any lower, I'll be streaming at 4 80 And that means the recording that will be available afterwards will still be at for 80.
So I really don't want that.
It's really hard to see the code, so I may just have to try streaming from a different machine next time.
Uh, hopefully what I'm going to shoot for for this dream is let's just try to get this installed so I can only show you the package Jason file and how we're going to set that up.
And also, if anybody has any questions.
Go and put it in the live chat right now.
And at least I can answer some questions while we're waiting.
See, I'm just gonna stroll down through the chat a little bit to see if anybody had asked anything.
Oh, hey, John.
Anson's here.
I wasn't going.
Okay.
Oh, hi.
Giuliano says it's working at a 360 dp I not ideal, but it's working.
Yeah.
Sorry for the really bad quality of the stream.
This is way worse than it was the last time I tried to stream on this computer, so I'm not sure what what changed.
Ah, but it seems like something has changed to make it even worse.
So next time I stream, I am definitely going to change things up.
Um, kid, brave.
It's definitely not you.
The video is freezing a lot.
It's it's entirely my fault.
So wow.
Just may take a little Mmm.
Yeah.
And this is making this take forever.
Okay, So I'm probably not going to make you all suffer through that much more of this, but is it actually done?
Uh um, So this stream will just basically be an introduction to the project, then.
Hey, Wonderful.
it did stop.
All right, so now that we've created this project using, create, react app when actually go into the project So we're going to see the FCC react Native Web.
Now we're end of the project, and now we can go.
We can open that up in visual studio code, which is my code editor of choice.
And basically, we're gonna do almost everything from there.
So we don't even need this terminal anymore.
Someone good.
And shut that down.
And hopefully there's your studio.
Goto actually load up.
So for those of you that joined, maybe a little bit later, um, we're starting a brand new project.
This is gonna be like a side project for me.
Ah, so not what I, um what I've done in the other streams is no longer responding.
I was just keep waiting a little bit longer, so I can't stream my actual, like work projects anymore, my full time job.
But I'm going to do a side project, and I'm gonna try to use the same technology that I am using in my project for my normal job.
Let's see.
Okay, so we're in here, and this is our package Jason file.
You could see right away.
It's very basic.
Um, but it has.
It definitely has what we need.
Okay, So what we need to add in addition to this is we need add reacts.
Um, react.
Native in react.
Native web after double check here.
Maybe you don't need really native.
Yeah, We may just need react.
Native Web.
I'm actually not going to try to load this package here.
Seeing is it took forever to get this working before, so we'll add in react, native web and at that point will need to add in som