React Native Tutorial #2 - Creating a React Native App

Key Takeaways

okay they're my friends so now we want to create a new react native app so we can start coded and we can do that in a couple of different ways first we could use the Xbox CLI or we could use the react native CLI and CLI just stands for command-line interface just a bunch of tools that we can use in the command line that's all is so what's the difference between these two different ways well first of all Xbox your line Expo abstracts away from the native code and it makes it much simpler to get Apple run with react native especially if you're new to it it basically acts as like a wrapper around our app which is going to provide us with a simplified app development workflow if you like and a lot of utility features as well to do common tasks like working with the camera or on the device features now because of the abstraction of Expo it does offer a little less flexibility because we're limited to what Expo exposes to us but it does make making these apps much simpler especially if you are a new react native developer now the react native CLI doesn't abstract away from the native code and it requires a bit more effort and configuration to get up and running now if you create a react native app this way it's considered to be a pure reactive app because it contains no additional utility features or configuration and it consists only that the bare essentials and that means you're going to have to import all the libraries to achieve different things like working with the camera and you wouldn't have to do that if you were using expo so this way offers more fine-grained control but it is more complex to get going so for that reason because this is kind of like a beginner series to react native if you like I'm not assuming you've used it before we're going to be using the x-bow CLI and then at some point in the future if you ever wanted to switch from Expo to have the bare-bones approach you can do that by simply ejecting the project at any point so I think it makes sense to start learning using Expo and then when you reach a point where you're more comfortable with react native you could make the jump okay so now let's see the expo website unless of a look at the different steps that we need to take to create a react native app so if we just scroll down a bit you can see the first thing we need to do right here is download node.js we've already done that hopefully the second thing we need to do is get the command-line tool so what we're doing here is using this NPM and that's why we installed node to get this NPM node package manager over here so that we can install other things we need to take this line of code and we just need to copy it and paste it inside a terminal or command prompt and then press ENTER and what this does is install Expo CLI globally on your computer so if you hit Enter now it's going to install it for you and that's going to give you access to the Xbox CLI now I've already done that hence why I've just deleted it right there and now we can move on to the next step which is actually creating our first react native project so you can see down here now we've installed expose CLI we have access to this thing right here expo in the terminal now to create a new project we say Expo in it for initialize and then the name of your project so let us do that now and you need to navigate to the directory in your terminal where you want to create this project so navigate around just use CD for change directory and then the name of the directory for example if you want to go to a folder inside the apps directory called test you say CD test and it would take you into that folder once you press ENTER and if you want to go up a level you'd say CD dot and it takes you up a level as you can see it's taking me to documents to get back into Apps I'd say CD space apps the name of the folder and now I'm there so this is where I want to create the project so I'm going to say Expo in it and I'm going to call this my project and press ENTER so it's going to give you a few different options right here we can use a blank workflow in the manage workflow or we can use tabs or minimal I don't want to talk too much about this for now we're just going to go for a blank project in a managed workflow so press ENTER there and it's going to create this new project for us first of all though it's going to ask us for a name if you just start to type your name now for example my project or whatever you want to call it and press Enter it's gonna update it right here press ENTER again and then it's gonna create this project for us okay so once it's done that you can see to get started you can type cd' my project to go into that directory and then NPM starts so I'm gonna say CD my project first of all to go into the directory and then before I say NPM starts what I'm going to do is actually open this up now this directory inside vs code now to do that from the terminal I can just type code and then dot to save this current directory and press enter or you could just open vs code separately then open the project from up here file and then open folder or something like that now you can see that I've got all of these different folders and files down here we'll talk about those in a minute but before we do that I'm gonna go back to the command prompt and I'm gonna do this second part NPM starts and PM start like so and press ENTER and then hopefully once it does this it's gonna run expo start under the hood and yep it's opened up a new tab in my browser which looks something like this okay so this thing right here this is a bit like expose debug tools for the application that we're going to make and we are going to use this as we go forward now we could also use this QR code down here to test our app directly on our device now to do that you'll need to install an app on your physical device your phone first called Expo clients and you can get that for free and then once you've done that you can just scan this QR code right here with your camera or a QR code reader and it should allow you to open up your native app inside the x-bow client so that you can preview it and that's how you can preview your app as you go forward on a physical device now I just wanted to quickly show you how to install xbox on your phone and also then how to preview the app so what I'm going to do is just run you through this this is just a quick recording from my iPhone so first of all you want to open up App Store and then you want to search for Expo clients that's the app that's going to kind of wrap our app when we preview in it if you like so select Expo client mine says open because I've already installed it but your should stay install instead and then once you've installed it you can open it and sign up if you want so you don't have to actually sign up but if you signed up then it's going to give you your profile page etc now once this is installed you can then open up your camera on the iPhone or a QR code reader on Android and then you want to scan that QR code right there that we just saw a minute ago and then that's going to open up that project inside expo client so basically what's happening here behind the scenes is expo servers are hosting our app and then this right here is connecting to those servers so that we can preview that app on our own device and it's going to take just probably 30 seconds or so the first time you run this for it to download the javascript bundle but once it's done that you should see a preview of the app on your device and there we can see it right here so at the minute this is just the dummy app that we get when we first create a react native application using Expo remember we said Expo in it and then whatever our app was called this is the dummy application that we get to begin with and we're going to see the code that makes this up inside the code editor in a few minutes but first I also want to show you now how to preview this on an Android virtual device as well which is what I'm going to be using for the majority of this course so I don't have to keep recording on my phone so I'm going to show you how to do that first of all then we'll start to look at the code which makes up this dummy app that we have right here so in order to preview this on an Android virtual device first of all you'll need Android studio installed on your computer we talked about that in the first video and the link to download that is going to be down below in the video description once you've downloaded and installed Android studio you can crack it open and you're going to see this window right here what you want to do is go to configure then select a VD manager AV d stands for Android virtual devices they're basically Android emulators that look like phones on our computer so we can things on them you can see right here I've already created an Android virtual device it's a Nexus 6 with the API level of 28 and I can just click on this plate thing right here to start that Android emulator or that virtual device now if this is the first time if you're doing this you're not going to see that and instead you'll have to create a new virtual device you'll click on this button down here to do that you want to select your phone or device I went for the Nexus I think it was the six other 6p and then you can click on next then you want to choose the API level I went for PI which is 28 now if you've not used this before then you're going to see a little download link right here you need to click on that first of all otherwise you won't be able to go to next it will look something like this what's grayed out so click on download next to PI first of all then once it's downloaded and installed you can select that and click on next you can rename the device if you want to or just keep it as this default value and then click on finish now I don't need to do that because I've already created one it's right here and I can just press on the play button to launch this device it's just going to take a few seconds then it's going to open it up now this right here this app this is the end product this is the one I've already created so what I'm going to do is actually press this square button right here and that gets me all of the current processes I can swipe that up to end it and now we have this blank virtual device ok so once we have this up and running I can cross off these two background things over here and if I want to preview the project on this virtual device now I can just go over here and click run on Android device or emulator so press on that it's going to attempt to open up a simulator you have to have open this thing for this to work now the first time you do this it is going to ask you to install Expo or rather it's going to do it for you installing Expo on the device and it's going to show on this over here in a second now he says please enable permit drawing over all the apps just click on OK to do that and then press on this button once you've done that or rather allow it here first of all press on this button again and swipe it up and again although they seem stupid we go over here and click on this again run on Android device or emulator it's gonna open up this again and this time we should see the download screen where it's downloading the JavaScript bundle or building it and then when this gets to 100% we should see the dummy app again on this device right here and I'm also going to make this a bit bigger so we can see this properly on the screen going forward like so okay so now we can see exactly the same app right here as we did on the iPhone so we can either preview on our own physical device by using the x-bow client on that and then scanning this QR code to open it up or you can use a virtual Android device like this alright then so back in the text editor I just wanted to quickly run through all of the files that were generated when we started this new react native project so you can see this is the project I opened before my project and these are all of the different folders and files generated by X boat when we start a new react project so first of all at the top we have a couple of folders Expo and Expo shared these are just for expo configuration and settings files we don't need to go in there then we have an assets folder and that's going to contain any kind of images that we want to use in our app later on there's already two in there at the moment down here we have two node modules folder and that folder contains all of the different dependencies and packages that we need in this project for it to work so if we install any third-party packages in the future those are going to be installed into this node modules folder so that we can dip into those and use them when we need them now you don't have to directly go into this folder and change anything I would strongly advise against doing that just know that this is where we keep all of those libraries when we install them now down here we have a git ignore file and this file is used by gate to help decide which files to track or rather not to track so this is for version control then we have the app dot JS file now the app dot J's file is the actual file with all of our project code in it awesome of the project code in it this is the file that kick-starts the app and it's the stuff will actually be editing to make our up in the now we can already see we have a functional component right here called up and that contains a JSX template you should be familiar with this kind of syntax if you've worked on react before now this will be the route components of our app and currently it just contains the content that we see on our device down here it says open up app is to start working on your app that's what we've done right here and that's what is shown right here so we can see that this component right here up it uses some of the built-in react components view and text and we're going to see more of those later on as well but for now let's carry on we have app dot Jason down here as well and that contains information about our project its name its supported platforms icon splash images etc down here we have a babel config jeaious file and that file is for configuring how babel works with this project and babel is just a compiler which allows us to use modern JavaScript features ok we don't need to go in there directly and we also have some package files down here which you use to track our different dependencies of the project and also some scripts as well so just extra information about the project now I want to show you a couple more things first of all in our command prompt over here this is where we started up the app and we can see down here we have this big QR code that does the same thing as this QR code over here if we want to start it up on our physical device and we have a bunch of different commands that we can type into this command prompt now to do things so for example I could type a to spin up an Android emulator and that does exactly the same thing as this over here I just tend to click this button we also have if I bring this back up II to send a link to your phone with email we have s to sign in and enable more options we're not going to be using those two bottom ones but if you want instead of clicking this run on Android button over here you can just press a in this console and that is going to open up an Android emulator for you or rather you have to have that Android emulator open already but it's going to open up the in that device for you okay now that it's a cancel out of this process all you need to do is press ctrl + C and that is going to cancel out and you can see over here now it's come up to say that this Expo developer tools is disconnected and we can use Expo starts from the command line to start the CLI again okay now before when we wanted to start the app we used NPM start if I scroll up here you can see I did NPM start right and under the hood that used Expo start so you can use either of these you can add say NPM starts or Expo starts and either of those will work they do the same thing in fact if you go to package Jason one of the scripts you can see NPM starts which is this script runs expose start so they do the same thing now if you want to work so lip in vs code and not have to use the command prompt over here you can do all you need to do is open up your terminal and down here and by the way to open the terminal I just press ctrl T but you can also do that by going to view and then terminal over here so over here let me just right now expo start and press enter and make sure you're in the current project directory my project automatically it should put you there so if you do expo star or npm start this should start up the application again and open up that new developer tools panel which i get a new one over here and we can see now to view it on an android device i can just click this or two of you on my physical device i can scan this right here so that's how we can start the process and end the process if we want to now since we've started a new process here i'm going to go to this and i need to get rid of the current app over here and swipe it up and then if i want to run this new process this new version of the app I can do so by clicking on this or I can just go to the terminal over here and press a and that does exactly the same thing so let me press a this time just to mix it up and you should see in your Android device over here that we start up the app and there it is now just one more thing I promise if we go to a pas and change this let me just add on a lot of exclamation marks as soon as I save this if I have a process running then it's going to reload that over here on the fly for us so we don't have to do all of that restarting all of the time it's just say you go for the day and you shut down your computer then you come back the next day you want to start everything up again obviously then you need to do Expo starts again or NPM start again close down your current app in your device and then reopen it by pressing either a or going to the Expo tools over here oops not that one that's the old one this one and pressing this button or scanning this QR code so there we go now we have our app set up already so in the next video we can go ahead and we can start to learn about react native and editing that a pas file