React Native Web Setup (P7D1) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with jesse uh it's good to be back it's been a long time so sorry i started a little bit later then 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 the it it may be bad uh so i had to force quit some applications uh right now i have very little running on my machine so today i'ma 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 uh i guess i'll just start so really quick uh 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 8am eastern time 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 my new job so i think it'll 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 uh can kind of like play off of each other so hey everybody there's a lot of people saying hi just say hello um so this stream is gonna be kind of like a short stream compared to some of my older ones so i'm going to keep it maybe like a half an hour [Music] maybe a little bit longer and for this stream i'm just going to set up a react native web project so really quickly react native so react is a javascript library that helps you to build progressive web apps react native is a javascript library that allows you to create mobile apps using react you can also create other things so essentially you have this base of 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 vr application right or in this case we're going to use react native and have it run as a website on the web it looks like my image is 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 and react native with some slight alterations depending on platform and run it on many platforms so we build for the web but at the same time we could very easily turn that into an ios app an android app and whatever else you know comes out that uh 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 and that's why i want to use it with this project so let's get to some code and if my image is frozen well let's do this i'm gonna get rid of the video for now okay so that should help 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 going to do i am on a mac so this may be slightly different on windows but i want to open visuals actually let's open first things first let's open a chrome window okay [Music] should be back now let me know uh how it is now it looks like on my end 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 macbook pro is a little bit old it doesn't have the 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 uh so we'll we'll see okay so the resolution is probably lower now so i'm going to try to make the the font as large as i possibly can and let's try to huh all right yeah if if the um if the video is 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 react app you can check this out more on your own if you'd like but basically we're going to do npx create react app and then we'll just name the app so let me open up a terminal i use i term remind me later okay so i'll make this as big as i can so 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 react app and now let's name it and for now um let's say uh fcc um react actually let's do let's do it like this it's going to be a weird name but for react native uh especially when you're going to try to do this your naming restrictions oh you can't contain capital letters okay let's just call it um it's gonna be all together oops what am i doing so there's an issue when you try to use this with mobile that you can't have hyphens in your name so that's why i was doing it all together like that alright so this is going to do its thing and it's probably gonna take a little while since we're streaming at the same time so i'm gonna check out the live chat a little bit uh okay so it looks like the frame rate's still really bad and that's probably since i started doing this hmm okay [Music] it's yeah you know at this point if i put the settings any lower i'll be streaming at 480 and that means the recording that will be available afterwards will still be at 480. so i really don't want that it's it's really hard to see the code so i may just have to try streaming from a different machine next time hopefully what i'm going to shoot for for this stream is let's just try to get this installed so i can at least show you the package json file and how we're going to set that up and also if anybody has any questions go ahead and put it in the live chat right now and at least i can answer some questions while we're waiting let's see i'm just going to scroll down through the chat a little bit to see if anybody had asked anything oh hey john hanson's here how's it going um okay all right giuliano says it's working at uh 360 dpi all right not ideal but that'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 uh 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 um my fault so wow this might take a little while hmm 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 is it actually done now 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 uh this project using create react app we're gonna actually go into the project so we're gonna cd fcc react native web now we're into 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 going to do almost everything from there so we don't even need this terminal anymore so i'm going to go ahead and shut that down and hopefully visual studio code will actually load up so for those of you that join maybe a little bit later we're starting a brand new project this is going to be like a side project for me so not would i what i've done in the other streams is no longer responding let's 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 gonna do a side project and i'm gonna try to use the same technology that i am using in my project uh for my my normal job let's see okay so we're in here and this is our package json file you can see right away it's very basic but it has it definitely has what we need okay so what we need to add in addition to this is we need to add react um react native and react native web i have to double check here maybe we don't need react native yeah we may just need react native web i'm actually not going to try to load this package here seeing as it took forever uh to get this working before so we'll add in react native web and at that point we'll need to add in some things so we need to add this into is this do we need to add this in our config clues built-in support okay you know what we don't need to add 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 aliasing um parts of react so you could see like if we were to do it manually we do it with webpack also babel but if we use create react app this should work right off the bat and basically allow us to write react native code with create react app which is very convenient alright so we would add that in and then in addition to our normal so 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 react project at the same time we could also use react native to bring up the project um as an ios app or an android app like in a simulator or in a connected device so for now for the project we're just going to stick with the web version because it obviously my my machine can't even really handle this but when you try to open up a simulator like ios simulator it takes a lot of resources so even if i had a really good computer it would still probably mess up the stream so we're just going to stick with the web if you'd like to do it for as as an app we can go over that but i can't really stream that successfully unless i get a really awesome computer so i think i'm going to start wrapping things up i'm going to answer a few questions that i see here and then we're going to 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 uh it's possible that i might be able to do some weekend streams too uh 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 infos below you can 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 can go to my youtube channel the links in the description to this video uh and i think we got a react question so john hanson 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 hmm 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 for those of you who aren't familiar with what we're talking about this might help to show something if it'll come up so like when we're 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 use ternaries inside the return and that 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 what i have done before is used a ternary like out here and the ternary 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 let's just call it route um we would say right this state this state route and then i would say like equals and let's just say home okay let's say we have a string of home and now we're going to say um and and then we'd put a component here and then what that would do is say okay if the route equals home we're going to 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 has anybody else tried to work with switch statements in um in the return all right uh neymar asks what's this for uh we're working with react native um it's just a live stream to show like what is the process is like to code without rehearsing and there's there's a lot of mistakes that happen and like we we just go through them together um we have a question about suggesting a good es6 through 8 course um