Placeholder Image

字幕表 動画を再生する

  • 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 some things.

  • So we need to add this into Is this do we need Addison are confessing clues built in support.

  • Okay, You know what we don't need at this?

  • I had to use it on a A project at work, but we should be all right.

  • Basically react.

  • Native Web works by, like alias ng.

  • Um, parts of react she could see, like if we were to do it manually.

  • We do it with web pack.

  • Um, also babble.

  • But if we use great rack app that should work right off the bat and basically allow us to write react.

  • Native code with create reacts at which is very convenient, eh?

  • So we would add that in and then, in addition to our normal to basically, instead of our normal react script start, we would have a start for, like, react, native web, and that would bring up a react native code in a Web browser, and we'd be able to work on it like a normal rack project at the same time.

  • We could also use react native two bring up the project.

  • Um, as an ill s up for an android app, like in a simulator.

  • We're in a connected device.

  • So for now for the project, we're just going to stick with the web version because it obviously might.

  • My machine can't even really handle this.

  • But when you try to open up ah, simulator like IOS simulator, it takes a lot of resource is.

  • So even if I had a really good computer, it would still probably mess up the stream.

  • So we're just gonna stick with the Web.

  • If you'd like two, do it for as an app.

  • We can go over that, but I can't really stream stream that successfully unless I get a really awesome computer.

  • So I think I'm gonna start wrapping things up.

  • I'm gonna answer a few questions that I see here, and then we're gonna wrap things up for today.

  • I'll try to stream again.

  • At the very least, I'll try to stream like Wednesday morning with a better setup.

  • It's possible that I might be able to do some weekend streams too.

  • Ah, if you want to get notified about that, subscribe to this channel Free code Camp channel.

  • Turn on your notifications.

  • You can follow me on Twitter.

  • Info is below.

  • You could follow me on Instagram.

  • I notify everyone on instagram and Twitter when I'm about to stream.

  • Um, I have a lot of pre recorded videos.

  • If you want to see those, you could go to my YouTube channel, the links in the description to this video.

  • Ah, and I think we gotta react.

  • Question.

  • So Jon Hansen says, what's the best place to use a switch statement as a function inside render or in the return, the switch will load different Children components based on a state change.

  • Okay, that's interesting.

  • Mmm.

  • If I were doing it, I don't know that I've tried to use a switch statement inside the render or not, but it seems like inside the render function would be better.

  • Ah, for those of you who aren't familiar with what we're talking about, it might help to show something if it'll come up.

  • So, like, we were talking about the the render function.

  • I'm sorry, the return.

  • So if it allows it which I'm not sure if if it would allow it or not to put a switch statement in the return I've never tried it.

  • It would make sense to put it in the return and just have different things come up.

  • You usually I just used turn Aires inside through the return, and that usually works, But it could get complicated if you had a lot of options.

  • Um, let's see.

  • Yeah.

  • John, if you end up trying that and it works, let me know.

  • I'd really like to see that because I've never attempted it before.

  • Um, what I have done before is used Ah, turn Eri like out here and the turn Eri would change the state right then, depending on the value of state, it would render things in here so there would be something like for this component, it would say something like, I don't know, route.

  • This is call it route.

  • Um, we would say, right, this state, this state route, and then I would say, like, equals.

  • Let's just say home, Okay, let's say we have a shrink of home, and now we're going to say, um and And then we put a component here, and then what that would do is say, Okay, if the route equals home, we're gonna render this home component, and then you'd wrap each component in something like this, but the value of this state route would be different for each one.

  • Then you have your switch statement up here.

  • That changes state.

  • So that would essentially achieve the same thing.

  • You would add a bit more code.

  • Um, but then you wouldn't put a switch statement in the return, which I know this works.

  • I'm not sure if a switch statement works.

  • That makes sense.

  • Is anybody else tried to work with Swiss statements in, um in the return.

  • All right.

  • Ah, Neymar asked, What's this four we'