Getting Started with React Native & Expo in 2024 (Typescript, Unit Tests, Styling, Expo Router, etc)

hey everybody it's 2024 I'm Charlie this is the dev environment and this is the first video that will come out every Wednesday of this year uh where we're going to do just kind of learnings about react native app development and all this stuff if you're new to app development and react native and Expo that's totally okay that's what we're here for um and we're here to just kind of get you going for those of you who don't know Expo is kind of like imagine it like nextjs with react uh it's a framework it's an SDK um it's an application um that helps you build react native apps very quickly um it has its own router so it's kind of getting more robust as the years go on um and it's actually had a lot of changes this year and so I just want to start again just with another quick getting started uh with react native and Expo for 2024 because things are a little different um and to make it even easier for you as well um I've created did a repository on GitHub uh for the dev environment I'll post it in the description below um and I updated it regularly including 27 minutes ago um and so if you just clone this repository and pull it into your IDE then you'll have something that looks a lot like this and this is our um just just kind of basic application it's only got two screens so if I just quickly I'll just clear out of this this and um I'm just going to run npm run setup first and that's going to install all the necessary dependencies to get you going I've even cleaned up all the vulnerabilities so as of the time of this recording there's zero vulnerabilities I I keep regularly updating it um but then you can run npm runev and if you run npm runev it's going to give you this little menu and so this is how cool Expo is is that number one we have kind of this uh QR code which I can open my phone and scan and then it's going to take me to just a little um Expo router and I can just click on Expo go and then what's going to happen is it's going to open the application on my phone and then I'll be able to as you can see it's loading right here and as soon as it loads then there's the application just a super basic app with two screens really easy um and then also if I press s and make sure it says using Expo go so you have to press s because by default Expo now uh switches to the development build um which is a compiled APK for Android or app file for iOS and then I press I and it's going to open up on the iOS simulator over here I just have to press sorry I got to open my iPhone first uh and then it's going to open up uh on the iOS simulator here which is really nice um so here's the app as well and then really cool I can press W and it's also going to open up the app on the web browser so now I'm running the same app on all three so this is how easy it is to get up and running um and then it's as simple as if I go into let's say I go to the second screen here um and I just want to change the uh the title there I'm just going to make get that and I'm going to set it to 200 pixels and now I have just kind of the second screen and the home screen and then it's really cool because in real time it's going to update on the web and then if I tap here now I can see it's updated on the mobile app as well in real time so it's really great for development um some really cool changes this year um is that Expo is now a wonderful web framework as well um it always was pretty good with web but now um not only do we have an an option to edit all the metat tags and your SEO um but when you static uh like render the site um statically then it's actually going to create routes for each screen of the application and then now when you deploy it then it'll really help because um before it compiled down to a single index. uh HTML file so if I go to Pac which is is um site that I have and I go to pick character the really cool part is you can see here oh I can't zoom in there you can see here in the uh route that now actually there's a unique route for everything so how to play so now I can actually reload the app right into that route um which is really cool or I can go to character select and now I can go directly to each page which is really amazing also it has good SEO so as you can see here like you know have all the metat tags OG like you know if I go into social then we have all the open graph um uh like images and everything like for sharing uh through Twitter and all that stuff so it's it's really amazing it's really great for SEO if you're doing static rendering um on the app side uh right now we're still on Expo 2 Expo Rudder 2 um but it'll be uh releasing Expo red V3 very soon so we're going to do a video on that um as well as the SDK version 50 is coming out very soon it's in beta right now um so that's very exciting um if I just kind of go through just kind of the app uh structure here in our package Json uh we have a bunch of really nice scripts um all of these are using the Els CLI but I'm using it locally so um for Android and iOS for example for Android you need to make sure you have the Java SDK installed to build it there on iOS you need to make sure you have xcode and xcode tools um to do a build if you remove this local flag then you can do it through um the El CLI um but you have resource limits and and you can't do it all the all the same so I I did it locally so you can just build it on your local machine um on the web uh we have a web build that's all done locally and that'll like export it out into a web build folder um where you can actually just upload that directly to for sale Firebase whatever you like to use um um we have a Dev script that's just mpm run start and then that's the same as this Expo start command it's really straightforward um prettier is included so we have a prettier RC file if you want to change any of the preferences that I've set go for it um linting so es lint once again there's an es lint file if you want to edit any of the rules go for it totally up to you um we have offline support so this is like if you're on a somewhere without Wi-Fi uh you can still run this uh normally Expo needs to connect to their servers but if you don't have Wi-Fi you can run it offline um publishing uh to the Expo and web and later on this year we're going to be talking about publishing to App Stores um I currently have uh an like applications deployed to the Google Play Store and doing iOS like app store right now um to serve your apps like once they're built uh we can EXO start on the dev client so this is what I was talking about earlier where um you build down to an AP K or an app file and then um you can run it here on your simulators or on your physical device um and to serve the web the built web file to see what it looks like in a production build um you can do it here um this setup script is what you want to run first it's going to install Expo and then it's going to Expo install so when you're installing dependencies in Expo you want to Expo install not mpm install not yarn um you just want to make sure you use Expo um because that is going to um sometimes the latest version of mpm packages don't work with Expo by default Expo kind of keeps its own record of which version of an mpm package to use um we have an expo start script uh just testing is included if you run mpm run test um and I have them all here in the files so you can see uh just how to test a react native component just as an example we'll do a video on that as well um Expo upgrade just helps you upgrade the SDK when version 50 is ready I will keep updating this repo but just in case you wanted to jump the gun um and web uh when I can run it as Local Host on Port 3000 I just a little bit of a custom configuration for the web build so if you run mpm run web um then it'll kind of um yeah it'll it'll run on a a more custom server than just running through the dev um so yeah the the project structure I've moved uh before I had uh the screens and layouts and they own um uh folders here in the source directory um but I've just put them directly into the app directory now as it seems like it's kind of best practice at this point um so the index. DSX is your just index route obviously um and so that's here on this home screen so you can just kind of like do a little bit of of uh editing with that um and then the second route is kind of our second screen and much like how nextjs Works uh you can have this underscore layout. TSX and this uh this is going to wrap every um every component in the app directory um that is a child of this so like the at the root level this layout. TSX is going to is going to uh wrap everything so for example we have like a theme provider if you wanted to add Redux if you wanted to add Zoo stand or any State Management libraries um if you wanted to put context uh um at the top level of your application this is where to do it just in theor layout. TSX this is the very first um file that is loaded um when you run your application it's kind of the and so you're probably wondering well uh you have this hook for loading cach ass sets uh this used to be here um but there's a problem and the problem is is that um the way that Expo router works where this is like think of slot as like your router right um this uh if you have it loaded here and you load a loading spinner then it kind of messes up the routing um because especially if you're doing static output um you want to make sure that your route loads to load all the metadata and everything first and then you can kind of go and uh and and load the content onto the page so I moved it out of the app layout and I put it into this screen layout component which you'll notice each individual route is loaded with the screen layout so the screen layout um basically is just really simple it loads either a spinner if uh the assets are not uh loaded in and cached um else it uh will just load the children right so here um everything inside of this will load uh when the assets are already ready to go um and if they're not it'll show a loading spinner so if you want to see how that looks like in the used cach assets um I just have basic fonts right now you can add any logic you want here you just want to return a Boolean so like if you want to preload images if you want to pre-load audio um if you want to inject some HTML or whatever on web build um you can do that here and we'll talk about all these things um and how to make the web and Native play well together uh we I've had some a lot of fun kind of like with Firebase because Firebase has a JS web APK and then it also has native react native Firebase um and they don't play well together so I've actually had to kind of like Implement a solution that works for web and Native um for analytics and everything but if I just set this to false then what you're going to know is that you're going to see a spinner here right and so this font's loaded it uh resolves to True when the fonts are ready to go and so they're ready here and we're good to go so yeah so uh typings I've put some typings in uh just for a default theme um just with typescript just kind of like loading PNG and all that stuff um there's a Dimensions Library here so if you want to use Dynamic uh sizing um you can do that um Dynamic sizing is uh a little bit different in uh react native if you're coming from the react World or web development world at all um normally you would have done kind of like media queries when you want things to adjust in size but basically we've I've created this uh this size function that attaches to the theme so if you go into config and you go to theme um and you see in the app Theme here uh we have the size and it's using this Dimensions method which is loaded from the utils and so uh essentially what this does is it gets the size of the window and then returns um uh a more specific um kind of result so let me show you so here like on the web it's the easiest way to show you um so if I shrink the screen and then I reload you'll see that it appropriately resizes based on the viewport um and so this is really nice because it uh is it's it's you can't use media queries you can't do all those things that you normally do on the web with react native um and so this is just like a really easy kind of fix uh to make that work and so what that means is that when you're using sizing um you just kind of dynamically load it now I'm using style components I know some people dislike style components um I know some people like uh maybe Tailwind or there's people who are like pure CSS um or SAS um people and so whatever you want to use it's totally okay to do um if in the situation where you didn't want to use um you maybe just want to use style sheets or something basic um then you can still use this size you just would import uh the dimensions um uh where are we Dimensions yeah from the utils and then and then like You' just do it in a style uh prop um in line so it'd be like width and just make it dimensions and then like 12 pixels or whatever and then so that way you can like dynamically set all these things um so it still works with whatever you want I just um I really encourage you to try style components I know a lot of people hate it but like with react native I found that it gives you as you can see here it gives you kind of the same structure you would have with style sheets um but it also gives you a lot more flexibility um in terms of uh using theming which is super nice um so if you wanted to go dark mode light mode you'll see that that's an option in the config here like for the nav uh we have dark mode and light mode options um but on top of that it just kind of gives you a little bit more of like a CSS feel like where I can use background color transparent instead of doing that in like camo case or whatever it gives you like full access to um CSS properties but also it just kind of is really nice that you can like do some switching um based on logic right like if if uh I don't know if I have any here um but we'll do some examples a bit later on where um you can do like you know um if something is selected change the color and make a dynamic like that and it's really easy to do with stuff components as well as media queries as well as affecting children this kind of stuff it's it's all given to you there whereas you would have a little bit more of an issue um if you're doing it kind of using just traditional style sheets um yeah that's pretty much it um I'm really glad you stopped by and uh yeah keep an eye out every Wednesday Today is Wednesday January the 3 um but I will keep doing these videos every Wednesday and uh hopefully pretty soon you'll be an expert at react native and you can uh feel comfortable building your own apps because it is a lot of fun and Expo is a wonderful tool so I will see you next time thank you so much all the best

Channel: The Dev Environment

Views: 5,727

Keywords:

Id: Xb-HxFGayfY

Length: 16min 41sec (1001 seconds)

Published: Wed Jan 03 2024