Getting Started With React Native & Expo in 2023

hello and uh welcome to the dev environment I'm Charlie I haven't posted in a week or two uh and I just want to apologize for that it's been the holiday um and it's been kind of a busy time a lot of fun a lot of cheer some drinks good times uh with friends and everything and so I'm happy to be back into a normal routine and kind of getting things going again but um yeah I uh over the break I had a wonderful opportunity to actually start building uh an app that I had started about a year ago with a friend um and it's been really amazing uh I started building it in react native um I'm a big fan of the card game pazek um and so I kind of went ahead and started working on kind of building a a native app uh with pezack where you can kind of like play it online with your friends and uh and it's just been wonderful and I was sitting here and I was gonna do a video on chaining methods in JavaScript like just some technical nerdy things that I love about JavaScript but I realized you know I'm a huge fan of react native um react native is getting more powerful every day um there's react native web so you can actually build web applications in react native why would you do that because you can build a single code base for a native app for Android iOS and for web and hopefully soon Apple watch as well so if you're interested um I just was going to do this video just as a quick introduction just to kind of explain how to get started uh with Expo and react native um and yeah depending on you know if we get some positive feedback I might do one or two more videos of this um and if people are really interested and they want to learn how to build native apps as react developers I am super Keen to keep doing it as well so um what is Expo good question uh so Expo is it's kind of like a wrapper around react native so Expo is command line tools um it's like a library for running these apps on web and uh Native um as well as it's a community and it's its own Standalone application that is kind of like the same as iOS test flight um or if you know you have a you don't have to have a Google Play developer account you don't have to have an apple developer account you can just start building for free in Expo test your app natively test it on your physical device test it on your simulators test it on the web and get it to a place that you're really happy with and then go ahead and purchase accounts for those developer tools that cost somewhere between 25 to 99 a year so yeah so I thought it'd be really cool just kind of talk about it so I've started up a really simple next Expo app and how do you start an expo app well that's a good question um basically what you want to do well I'm just like doing things through my command line here but you want to run npx and then you want to run uh create Expo app um and create Expo apps that like create react app or create next app it's just kind of like a quick template starter and then doing the T flag here that allows you to pass in um the type of template you want to use so for me I'm just going to go a blank template and then do typescript as well and then when you press it um it's going to start asking you some questions like what do you want to name your app um just little things like that um so I've already done this so I'm just going to skip all that but then you'll end up with something that's like this this is just like the basic layout of what the app's going to be so pretty much just has a single file it's the app.tsx um file here and you'll see that the styles for anyone who's watching any of my other videos um you'll see that these styles are in the stylesheet that create objects that kind of like live at the bottom and then it looks a lot like CSS modules but it's actually CSS in JS which is a lot like style components it's a lot like jss um so it's it's kind of a unique styling object notation um object literal notation for laying out the Styles and you can use style components with this as well but you'll notice that it's a little bit different um the thing that threw me off initially about it was that in CSS whereas it would be like background Dash color we've replaced it and put it as camel case so anything like a line Dash items becomes a line capital I items um so that's how you do the styling but that's just how you do the basic styling of the style sheet from react native I will show you ways to do much cooler much more Advanced Styling um which is nice um you have this app.json app.j sounds kind of like a config for your app and then in the package Json you'll see that we have some like core dependencies that are needed um and then they give us some scripts and so we have just a general start script Android iOS and web so why don't we run npm start so this will kick off Expo and then you're going to see that we have some options here so uh on the command line now we have the option to press a to open Android I to open iOS and W to open web we also have a debugger we can reload the app and then we can also toggle the menu so um I'm going to press I and then what's going to happen is you'll see right here it's going to open the simulator on iOS now Expo Works across all platforms if you're not on a Mac you're going to need Android Studio if you are on a Mac you're going to need xcode and you're going to need the simulator so the xcode command line tools once you install Expo an expo app so go to docs.expo.dev if you want to learn how to get started and once you install it it'll automatically prompt you to install xcode and everything so you might have to do that the first time you're setting up if you're on Windows Linux or Chrome OS which I know is still Linux but um you can install Android studio and then you just press a and it would open the Android simulator um a lot of docs on the web too I've done this before on Chrome OS ironically uh I did because the Chrome OS now has like built-in Ubuntu support um I've done it on Windows Linux subsystem um and then just on on Linux itself so uh if you can get an IDE and you can run a terminal and you can install you don't even have to have the ability to do a simulator because the thing that's really cool about Expo now is I can press W here and when I press W it's going to open my web browser and you're going to see that I have my native app and the web all running at the same time and so how do I prove that it's the same well let's say hello from the dev environment I could spell there we go and so you'll see it's here hello from the dev environment and then on the web hello from the Denver so real time hot module reloading you want to see something really really cool that I absolutely love about this and this is a reason why this is so interesting to me is that if I go onto my phone now and I open my camera then what I can do is that I can scan the QR code and open it up and then it's going to open up Expo on my phone on the physical device sorry it's a little bright so it's kind of hard to see I'm like tripping out the colors on my computer um but hello from the dev environment on my phone and on my Mac and on the web so this is so cool because I have built all kinds of apps remember that pazek online I can go visit online.com and there we go it's a web app as well so this is so cool I absolutely love this um I was gonna sorry for just this is just an intro video but uh coming next week um I'll start showing you how to build some cool things how to put in some styling how routing Works in react native with Expo and then um working with some libraries working with animations how to make it a really cool app I'm really looking forward to it um very excited so I hope you are too if you are interested in keep learning Expo please give this video a like uh and if you want to subscribe that's awesome too um but yeah I'm really excited to uh start teaching you guys react native and Expo 2023 thanks so much

Channel: The Dev Environment

Views: 30,817

Keywords:

Id: VHZDqwr_AKs

Length: 9min 45sec (585 seconds)

Published: Sat Jan 14 2023