React Native (Expo) Dev Environment Setup + First Project (Windows 10 )

well hey everyone this is dr. Dan I am an associate professor at Azusa Pacific University in the Department of Engineering and computer science in this video tutorial I'm basically going to show you how to set up a react native development environment specifically with the expo react native toolkit so the things that we're gonna cover in this video are basically installing some of the prerequisites such as node NPM and get installing an emulator specifically genymotion is the one that we're going to use we'll also install an IDE integrated development environment we'll do visual studio code we will install react native through Expo and then we'll go ahead and create just an initial kind of dummy project and then I'll kind of do a quick overview of some of the files that you'll see what's in them as well as a poke around at the expo toolkit to just kind of show you how to use it at a very basic level this tutorial is going to be done on Windows 10 machine but everything that you see here should be pretty well translatable to Mac or Linux I believe all the software that's being used has versions for Windows Linux and Mac so let's get started we're pretty much gonna jump we're gonna follow the expo installation instructions which is is actually one of the easier installations that I think you'll find out there so literally just go to the expo web page and then you can scroll down you'll see start your project so we're gonna follow this more or less I'm gonna insert one or two things that I think is basically just good to have and to have on your machine ready for you but we're gonna kind of use this as a guide so the first thing that we will need to do is go ahead and down no js' and this is gonna come with MPM as well I believe you'll notice that there's two versions you'll see a LTS version the long-term support which is a little bit probably a more stable version and then a higher number which is going to be the current latest features to be honest I've had successes and failures with both of these on different projects you know concerning different packages and things like that so I currently actually have the kind of the more stable version installed and working fine so I'm going to go ahead and download that right now while we're waiting for that to download I'm also gonna go ahead and download kit so it isn't necessary necessarily needed for installation but I've just found that many I've run into packages that as I'm trying to install them common packages it sometimes was looking forget so it's good to go ahead and just install it if you have not yet so just go to kits web page and you'll find a download link about halfway down and then just click on whatever operating system you are on in my case it's windows so it'll go ahead and start that download all right so I will go ahead and run the installation for node okay and again this is going to install node as well as NPM node package manager which allows me to add all kinds of packages to my project essentially adding functionality if you've ever done language like Java or C++ it's kind of the equivalent to the pound imports or I'm sorry pound include or imports that you might see in those those particular languages except you're really bringing in different packages from the internet just kind of bringing them directly into your project so know it is installed i'm going to go ahead and install git as well I've already installed it so it's just gonna let me override it but what you'll find is that it has a ton of menu options and I pretty much just go with the basic so just go ahead and you can for most of you guys you can just click Next all the way through and you shouldn't have any problems okay so while that's getting up installed I'm gonna go ahead and download an emulator and I want to preface this step with an asterisks before we go any further you don't actually need an emulator to do react native development that's one of the absolute best features of react native development specifically with the expo toolkit that we're using and the reason that is you can actually use your phone directly we'll see later on that when you basically compile your project you run your project it'll actually give you a QR code and you can actually load an app up on your phone take a picture of that QR code and it will actually load the app to your phone directly and so that's a great way to do it I would highly encourage you to run your apps on your phone natively because one is just a lot faster than an emulator is going to be I I have a pretty fast brand new computer has 16 gigs of ram i seven processor and it can run an emulator pretty pretty nicely I also have an older computer a few years old eight gigs ram also an i7 and it it just simply cannot run the emulator at all and so for that so if you basically if you have a really great computer emulators are great it's nice to kind of have it on your screen but if you don't please use the phone whether you have an iPhone or an Android you get a great experience and also some things run on directly on your phone that may not run on an emulator I've had some issues with Google Maps for instance where it just won't run on the emulator without maybe tweaking the emulator a little bit more but it will run just directly on on your phone so anyway I'm gonna go ahead and download genymotion but make sure you type in free after that and it's going to take you to this fun zone basically for personal use okay so genymotion is a paid service but if you're just doing this and as a personal project or a school project and you can get the free version so you'll go ahead and click on to download the personal edition in it it will require you to have a username and password so if you don't then go ahead and sign up I assume that I guess you can do a create an account right here so I already have an account so I'll go ahead and sign in and that's going to take me to essentially a download page for my particular operating system and genymotion should work on Mac and Linux okay so anyway what you'll see over here is there's two different versions of the download there is a version with VirtualBox and a version without VirtualBox essentially what we're going to do essentially how genymotion works is it uses VirtualBox which is just like a virtual machine software to create an emulator of either well in our case an emulator of Android so I've actually had issues when I've downloaded genymotion with VirtualBox so I'm gonna download it without VirtualBox and save that now I actually do have VirtualBox already installed I have a number of other virtual machines on me on my laptop so I didn't want to uninstall that for the sake of this demo but what you would want to do is simply open up a browser type in VirtualBox go to Oracle's VirtualBox website downloads and then go and find your particular host for me oh it's windows I would go ahead and save that install VirtualBox first and then install genymotion so if you have a Mac you would just click this link okay so here I have genymotion so I'll go ahead and install that and again this step is not absolutely necessary you can if as long as you have a somewhat decent phone you should be able to run your projects directly on your phone simply by taking an image of a QR code okay so I'll go ahead and finish that all right so there's one more thing I want to download before we really install react native and that is a code editor so I like vs code a lot it's a great little lightweight integrated development environment they have versions for Mac and Linux as well so we'll go ahead and download down and install it okay all right so what I want to do now is essentially kind of confirm that some of these other pieces of software installed properly so I'm gonna go ahead and open up command prompt or waiting for that looks like it's finalized so go ahead and finish that so open up a command prompt and I just want to make sure one that node is installed so I'll type in no - - version and I'll see indeed 10.15 was installed I also want to ensure that NPM was installed so check the version on that and I see six point four point one and then finally I want to make sure that git is working and I should see here I have get version 2.20 okay so that's good news all right so kind of backtracking to where we started on the expo page we're essentially here we've kind of jumped around on these steps but the next thing we need to do is actually install the expo command line interface tool okay so I'm gonna do that just in a command prompt doesn't matter what folder you are in you will type in NPM install Expo CLI - - global okay and this - - global tag will basically make sure that you can execute the expo command from any folder on your computer not just a single folder if you don't do the - - global it'll basically install NPM for me in this users degress employer so I'll go ahead and execute that command and I think this is going to take a little bit so I'm gonna go ahead and put a quick pause on this video while we wait okay so took about 50 seconds so now I should be able to type in something like this expo - - version and i should see that expo is a need installed on my machine okay so we are now ready to create a project so let's go ahead I'm just gonna go ahead and make a new folder here in my C Drive you can have a folder any we're just gonna call it repose for repositories okay so I'm gonna go ahead and navigate to that folder okay so here I am in the repost folder you can see there's nothing in it as we can see over here and the actual Windows Explorer okay so this is where I create my react native project pretty simple unfortunately there's no longer a kind of a GUI tool so you do have to do this through the command line interface but it's only one or two commands you really need to know so basically we just need to type in expo anit and then some project name so I'm just gonna call this demo project for instance and what you will see is it's gonna ask me whether I want a blank project or a project with a few tabs on it I typically choose blank I don't particularly like the way that they set up their tabs I think it's a little bit more confusing and then it really needs to be essentially so go ahead with a blank one now it I apparently have yarn installed on my machine so it's asking me if I want to use yarn instead of NPM to install dependencies I'm gonna go ahead and say no just because you may may not have yarn installed on your machine that when I kind of go through what you should expect so again this is this is basically going you can see it created that demo project folder it's going to download a ton of resources and the biggest thing is this node modules folder only has one thing in it but it'll have literally tens maybe even hundreds of folders in here with different react native packages and and just pieces of the the platform that are needed to actually run a react native project so it's gonna take a little bit of time maybe a minute or two so I'm gonna go ahead and pause one more time okay so we're back only took about a minute I think you can actually see that it kind of tells you what to do from here we're gonna modify that just a little bit but you can see all the the folders that it did create although you know different stuff it created in the node modules folder okay so what we're gonna do is we're basically going to change directory CD into demo project okay and from there now that I'm in the folder of the particular react native project this is the last step I'm going to type in Expo start instead of NPM start okay and what this is gonna do is it's gonna kick open a web browser and this is kind of the GUI tool for what we see or the yeah the GUI tool for Expo I should say okay so what's happening right now is this basically the Metro bundler is what's kind of packaging up your code into a nice package that can actually actually be executed on your phone okay so at this point we want to actually see this thing running so what I'm gonna do now is I'm gonna actually load up an emulator now again you could actually use the phone app and I'll show you how to do that in just a second but for the sake of getting you a little bit more visual feedback upfront I'm gonna do it on the emulator first so the first thing I need to do is I want to actually just minimize this page and I'm gonna go and open up genymotion and from there you'll basically see once it boots a ton of different phones and tablets that I can choose as the emulator that I want to run so I'm gonna go ahead and try something maybe modern so I'll search for like a pixel 3 okay so go ahead and just install pixel 3 by double clicking it you can see some options for processors and memory size and whatnot so I'm gonna go ahead install you might want to reduce some of these things if you don't have a very powerful version or a very powerful laptop you can also reduce the version of Android if you want as well to an older version but I'm gonna keep everything as it is and just click install see it's gonna go ahead and downloads a few hundred megabytes so might take a minute or two okay so I'll go ahead and just pause this for just a second okay so we're back and as you see of the pixel three did download and is ready to to roll so let's go ahead and just double click it and this will load open a new emulator if you are curious I can actually open up VirtualBox and I believe we should see yeah there we go so I have another virtual machine which you'll see basically it's just created a virtual machine in VirtualBox for the pixel 3 so that's why a virtual box is needed because it's running it's running it's actually what's running in the emulator ok so this will take a second to load and once it does we'll have basically a vanilla version of android on a pixel 3 ok so I should now be able to go back to my my expo kind of a GUI here in the web page and at this point I'm ready to click run on Android device emulator and you again you just need to make sure that your emulator is actually running if you are on a Mac and trying to do iPhone simulation then you would of course need to install iPhone simulator through Xcode I believe Xcode has a nice interface that you can just kind of look through and you'll find you'll find that simulator pretty easily if you search for it you'll click the run on iOS simulator so obviously I'm gonna click run on Android device emulator you'll see it's attempting to open it if I click on my my link here it's basically the first time it's gonna need to actually install Expo on the device it actually has to download the Expo app and it's always going to ask you this one little thing if you want to permit drawing over other apps takes you to this little screen you'll just check the button and then you'll go back now I typically after that first time I typically just click it one more time and now that everything's kind of set up and installed it should go ahead and you can see it's building the bundle you can see the same thing over here on the left side that you can see on the right side and this is gonna basically the the starter dummy projects for react native through Expo it's just a white screen with a little bit of text let me kind of while this is building to walk you through what you see over here you see a connection you'll see some options for a tunnel LAN and local so LAN is actually a kind of a new default setting it used to be tunnel I believe basically what happens is most of the time like I mentioned I'm running this on an emulator but a lot of times you may be building this file on your computer and then running it on your phone okay so there we go we get to open up a pas to start working but anyway most of the time you may be running you know your code on your phone which is a separate physical device from your actual laptop so basically you have to send that package your program over to the phone so if possible doing it directly over your land is the best right so essentially it's gonna send it over your router your Wi-Fi router as long as you don't have any weird firewall or Network configurations it should be the safest most reliable way to communicate that data in the fastest however if you are maybe a corporate network maybe you're on a your school's network or something like that there might be a lot more kind of weird firewall settings and so tunnel tends to be a little bit safer in that environment Tunnel basically what it does there is it's it's sending your package to some other server on the internet and then it's basically sending that to your phone so it's kind of tunneling through the internet so to speak that said I have had issues on our own schools servers in the past they actually had to open up some ports and things like that because they were actually blocking the specific traffic that X was using to do that task so anyway land is working for me if flan doesn't work again you might just retry a few times and try to handle as well okay so what I want to do now is jump to the code a little bit okay so let's go ahead and now open up visual studio code basically want to find the page that is showing this text so I already have let's see go ahead and click open folder and you'll basically want to navigate you can see I was doing some other work you'll basically want to navigate to wherever your code is so for me it was C repos and then demo project and then just click select folder okay so it's gonna kind of open up a welcome screen and from there you'll see the expo folder has an assets folder with a few images the node modules folder which has all that stuff again all the react native folders you can come down here and you'll see a bunch of react native stuff and then finally the things are really interested in some of these files specifically app J s app dot JSON impact not package that lock but package dot JSON okay so you can see app jason is actually where that text is let me kind of show you again this is the view and Windows Explorer assets is basically just those two images that you see kind of like the splash screen so you could actually just put new images in there if you want the kind of quick and dirty change the splash splash screen or the loading icon that says probably not the best way to do it but again kind of quick and dirty if you want to just see something change really quickly when you're loading your app anyway let's jump back to our code over here okay so then I kind of try to get my emulator up over here and then I'll have my code right here so I'll show you a few of the features that we have alright so the first thing I'm going to do is I'm gonna get rid of get rid of the keyboard on the phone so open up app just to start working okay so I'll go ahead just change this text to something else so welcome to my first react native app okay I'm simply gonna save by hitting typing ctrl s my keyboard and you'll see that it actually automatically reloads so welcome to my first app so that's one really nice feature about the setup here with Expo genymotion that we haven't really shouldn't an expo thing as soon as I save my code it's going to basically reload it okay how is it doing that it's actually a setting over in the expo app so I can actually on the emulator I just hit control M I forget what it is on the iPhone simulator it's something similar it might be like with the control D or something I can't remember on a phone if you're just using a phone directly instead of an emulator you literally shake the phone and that will bring up this menu now see a number of different items on here I'm not going to go into most of them I'll just look specifically at the live reload and the hop reload okay so the the live reload is what's making this happen okay if I disable live reload what you'll see is now when I change it to something else and save basically it's it's not reloading I would actually have to maybe pull down the top and hit reload directly and that will get me an updated version my third okay so it's usually a good idea in control-m to leave live reloading on okay there is another option okay so we saw not only live reload but hot reloading so what's the difference so the way that live reloading works is essentially let's say that you're actually a few pages in navigation wise so you you start your app you click a few things you're maybe four or five pages deep into your app and then you save you make some changes in your code and you save it what's going to happen is it's actually going to kick you back to that home maybe it's your home screen or your login screen whatever happens to be the first screen that's going to load and then you'll have to navigate back you have to navigate back to that page to see the change what hot reloading does is it instead it lets say again your four or five pages deep into your app and you make some styling changes for instance or really just any changes but styling changes is what you typically do it for and if you have hot reloading enabled and then disabled live reloading it'll actually refresh that page without going back to your original page okay so it essentially keeps the state of your app when you have live reload it basically kind of just wipes out your state and starts fresh from the beginning with hot reloading and it keeps the state and it basically just tries to take those changes and apply them so again that's that's especially useful if you're on a page a few pages deep and you're really just are at the point where you're doing some styling you want to make a ton of changes but you don't want to have to keep reloading things from the database and keep navigating through your app so super useful okay so that's the app dot J it's the main page where things kind of branch off from you really don't want to have too much code in this to be honest maybe just some navigation stuff but you really shouldn't be doing too much logic everything should be nested in screens which is a completely different topic beyond the scope of this project beyond the scope of this tutorial what are the other pages app dot JSON that just kind of has some basic properties for your project and so it's just something to kind of be aware of typically I don't need to change it too much but it is there and know that it's there kind of holds the version of Expo for instance and things like that packages that JSON is really important with package JSON you'll see this is basically what keeps track of all the packages that you've installed into your project and basically this keeps track of that so that basically this kind of represents all of these node modules okay so if I install some new functionality to my project it's going to add another folder or multiple folders into node modules this is actually a few hundred megabytes of stuff so I don't want to put that in my repository I just basically put the notes of what I installed and as long as everything's marked in here then I can basically just download this file and I can reinstall all of those things using NPM and I'll actually show that right now so if I go into app dot J's for instance let's say that I want to install or add like a button okay so react native doesn't have great buttons by default they have these opacity things it's just really complicated way to create a button react native elements is a really popular set of components that you can use they have all kinds of things buttons cards badges avatars all kind of stuff so we're basically going to use one of their buttons okay so how do I do that how do I use this new stuff from the internet and bring it into my project okay well the way that I do that is I need to import it okay but before I import it actually need to add it to my project let me just kind of show you what happens if I don't do that so if I import I'm going to import a button from react native elements okay I'm gonna save this now I'm totally doing this in the wrong way on purpose and what you'll see is as soon as I save it the emulator tries to do a live reload and you'll basically see this kind of painful air that's a little bit overwhelming if you've never looked at stuff your airs before but these are almost always if you see this you'll kind of you'll get used to recognizing this you'll see known modules and that kind of tells you hey something's probably not installed properly me maybe need to go and reinstall some things so you'll kind of look through here and again you'll just see real native stuff modules node modules again that almost always and tells me tells me that I probably forgot to install something in here here's really the the final clue description unable to resolve module react native elements again the more that you work with the stuff the more that you'll be able to just really cut right through all this junk and see kind of where what the air really is and the relevant material so what I'm gonna do is just I want to get rid of that air and you can try and it's always good to just try it to reload a few times and sometimes it just goes away but in this case it definitely shouldn't that would be bothered if it did go away it's really thinking a lot more than I expected it to okay so you can see here the air shows up as well unable to resolve so I don't know what it's doing right now or why it's even thinking this hard should just come up at the air again I'll maybe try refresh it one more time oh looks like it maybe died on me so what I'll do is I'll go ahead and just click run on androids this is a good way to kind of just refresh the emulator it's in a weird state appears to be stuck in that state so anyway we'll go ahead and just continue so what what we need to do is I'm actually just going to go ahead and kind of stop the the package or the server in the background ctrl C on my where I had done the expo start go ahead and just kind of close things up there it's always a good idea to really stop the packager before you install anything because you really need to kind of refresh the environment so what I'm gonna do making sure that I'm in the demo project folder I'm gonna run npm install and then react native elements and then make sure you also type in - - save okay so again this is what its gonna do is it's actually gonna add a line right here in the package.json for - - save as long as i am sorry for react native elements as long as i put that - - save in there so we should be able to see that in real time so I'm gonna go ahead and hit enter so again I did not do - - global so this is only installing react native elements for this particular project and then it's annotating this package JSON with react native elements because I put the - - save in there okay so you okay so you can see that it just added that react native elements 0.19 so everything looks good there looks like it installed just fine so I'm gonna come back and do expose start just kind of get things rerunning go ahead and close this in the background just don't need that anymore okay so successfully ran tunnel ready okay so again I'll go ahead and run on Android device and hopefully it'll just show me the page let me just go ahead seems to be in a weird state there we go so it looked like I just needed to physically kind of force close the app on the emulator and kind of just restart it to kind of clear things out so hopefully every so welcome to my fourth react native app so perfect so I will go ahead now and actually add a button in there so again that is a react native elements is in there so I will go ahead and actually add a button just below it I'm not gonna style it or anything but I would just add button and then perhaps I will add a title to it my first button and then maybe I'll give it like an icon and then I'll go ahead and close that time so I should be able to save now and hopefully I get a button perfect okay so so that's you know basically how you it's just one of the most common things that you're gonna do is and installing new packages and then importing code from those packages so I just kind of wanted to in this tutorial show you that basic functionality there's one more thing I want to show you in regards to how Expo works and one of the best features of Expo so what I'm gonna do is I'm going to add a simple console dot log hello console world okay so one of the one of the things you'll undoubtedly want to do is do some console dot log one of the things you want to do is debug now there are some great debugging tools I'm not going to jump into that too much you saw when I opened up the menu here there's a debug JavaScript remotely I think you can actually click that and it will come up yeah this this page right here is basically watching what happens so it looks like if I do I think it's f12 right to bring up the menu this is actually my code kind of running I can bring up a console right here and you can see that hello console world and again you can you can really kind of look at some styling and elements and things like that but a lot of times I don't really want to bring up all that I don't really want to be looking at all the styling I really just want to kind of do some quick debug prints so I can actually use this main Expo page to do that notice on the top you'll actually see a an icon on top right corner kind of has two boxes if you click on that you will basically see some details from the emulator you can see the up at the top we can scroll back up the Google pixel 3 okay so over here on the left side is the Metro bundler so this is just things to know about the bundler and when it's building and things like that but on the right side it'll give you details about your actual emulation device so Google pixel 3 so here's a low concentrate is this will work on your phone as well okay so I'll go ahead and actually run this on my phone now if you want to run it on your phone I'm gonna go back to that original page that we were looking at Expo dot IO you'll see if you want a preview your project literally you just need to go ahead and download the expo app for either your iPhone or for Android so I do have that on my phone so I'm gonna go ahead and now you're not gonna be able to see this but you will see that it's working okay so I have basically right when you open up the app there's a scan QR code button you just press it and it'll pop up with your phone camera phone and I just took a basically a picture of the QR code although I think it missed because it takes it very very quickly so you kind of have to my experience have to try this I usually have to try a few times because it once the think that it scanned it so quickly that it oftentimes only like scans half of it so still giving this a try okay let me try one more time not wanting to work for me okay okay so it's actually it's not working but one thing I do want to try before I move on and a good recommendation is I'm gonna actually switch to tunnel okay so I'm gonna switch the tunnel I'm gonna scan that QR code one more time and hopefully yes there we go okay so for some reason this just wasn't working for me over the land but when I switched the tunnel it did indeed work and I am seeing basically this exact same thing on my phone so what's really neat is I can actually scroll up to this page and you'll see there's actually a new button and you'll see here so I have a physical pixel 3xl and you can basically see the console output there right so literally I'm gonna go ahead and just refresh the app on my actual phone and you'll see over here that it's going to go ahead and rerun a few things it'll print out hello console world again okay all right so that is the gist of how you set up react native via Expo some of the prerequisites emulator integrated development environment and just kind of how you navigate around and use the console so I hope that this tutorial was useful and helping you get your first react native project up and running Thanks

Channel: Daniel Grissom

Views: 180,794

Keywords:

Id: WnS7dcY5Hys

Length: 39min 37sec (2377 seconds)

Published: Wed Jan 09 2019