React Native Tutorial #2 - Creating a React Native App

Expo CLI vs. React Native CLI

Okay there, my friends. So now we want to create a new React Native app so we can start coding. And we can do that in a couple of different ways. First, we could use the Expo 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 it is.

So what's the difference between these two different ways? Well, first of all, the Expo CLI. Expo abstracts away from the native code, and it makes it much simpler to get up and running 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 other 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 React Native app because it contains no additional utility features or configuration, and it consists only of 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 Expo 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.

Installing Expo and Creating a New Project

So now let's see the Expo website and let's have 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 Expo 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 Expo CLI, we have access to this thing right here, expo, in the terminal. Now, to create a new project, we say expo init 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 .. and it takes you up a level, as you can see, it's taken 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 init 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 managed 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 going to update it right here. Press Enter again and then it's going to create this project for us. Okay.

Starting the App & Using Expo Developer Tools

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 start. So I'm gonna say cd my-project first of all to go into the directory. And then before I say npm start, 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 . to say 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 going to go back to the command prompt and I'm going to do this second part: npm start. npm start like so, and press Enter. And then hopefully once it does this, it's going to 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 Expo's 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 Client. 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 Expo client so that you can preview it. And that's how you can preview your app as you go forward on a physical device.

Previewing the App on a Physical iPhone

Now I just wanted to quickly show you how to install Expo 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 Client. That's the app that's going to kind of wrap our app when we're previewing it, if you like.

So select Expo Client. Mine says Open because I've already installed it, but yours should say 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 init 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.

Setting Up and Using an Android Emulator

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 AVD Manager. AVD stands for Android Virtual Devices. They're basically Android emulators that look like phones on our computer so we can test 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 play thing right here to start that Android emulator or that virtual device. Now, if this is the first time 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 6 or the 6p, and then you can click on next. Then you want to choose the API level. I went for Pie, 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 Pie 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. Okay, 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 opened 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 it says, "Please enable permit drawing over other 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 it seems stupid, we go over here and click on this again: Run on Android device or emulator. It's going to 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.

Exploring the Project File Structure

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 Expo 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 Expo 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 a 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 .gitignore file, and this file is used by Git to help decide which files to track, or rather not to track. So this is for version control. Then we have the App.js file. Now the App.js file is the actual file with all of our project code in it, or some of the project code in it. This is the file that kick-starts the app, and it's the stuff we'll actually be editing to make our app.

Now we can already see we have a functional component right here called App, 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 root component of our app, and currently it just contains the content that we see on our device down here. It says open up App.js 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, App, 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.json 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.js 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. Okay, we don't need to go in there directly. And we also have some package files down here which are used to track our different dependencies of the project, and also some scripts as well. So just extra information about the project.

Development Workflow and Hot Reloading

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—e 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 app in that device for you. Okay.

Now, to 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 start 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 either say npm start or expo start, and either of those will work. They do the same thing. In fact, if you go to package.json, one of the scripts, you can see npm start, which is this script, runs expo start. So they do the same thing.

Now, if you want to work solely in VS Code and not have to use the command prompt over here, you can. All you need to do is open up your terminal 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 write 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 start 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 to view 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 App.js 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 start 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 and ready. So in the next video, we can go ahead and we can start to learn about React Native and editing that App.js file.