Initialize React Native project - React Native Tutorial

- [Instructor] Okay, so we're going to go and get started by creating a new React Native project. And the way to go about doing this, if you want to follow along on the instructions from reactnative.dev, you can go ahead and click on Get Started right away. And what it's going to show you are all the steps that you need to go through to create a new project. In the past, we used a React Native CLI Quickstart. It's a bit more complex and there's a lot of things that you need to install, but this is the way to go if you want to have specific development operating systems and specific target OS that you want to do. Especially if you're using Linux, you want to go and click on Linux and find out how you can actually use Android and Linux. The same thing with Android and Windows. iOS is not supported either on Linux or Windows. There's ways to counter that, but I wouldn't recommend it. If you really want to develop for iOS, go for macOS and then go ahead and install whatever you need to do this. This is the long way. There's a lot of things that you need to install to make it work this way. I would recommend, and this is what we're going to use in this course, is the Expo Go Quickstart and it goes very quickly. You can create a project and then open it up in your simulator as soon as you're ready. The requirements for it is that you have a simulator installed on your system. So if you're planning on going to Android as the target OS, then make sure you install Android Studio. Make sure you install the requirements to use Android Studio. The same with iOS. If you are planning on going on iOS as the final target OS, go and make sure that you have Xcode installed, simulator installed, and all the requirements for these systems. And you can use the quick start here by jumping to the specific target OS and development OS and follow these instructions to actually install everything you need for your system. In most cases, you need all of these things anyways to finish up on a specific system. But to get started with the actual application, the React Native application, it goes much faster this way. So I have all the requirements on my system. I'm going to open up my simulator. I'm using iOS and basically right now, I have iPhone 14 Pro Max as the targeted operating system and the device. And what I could do is basically minimize the instructions here and then what we're going to need to do is open up a terminal to create the new application, which we're going to see on our desktop shortly. I'm going to create it on the desktop. So I'm going to open up my terminal, like so, and make sure that I am on my desktop. So I'm going to do CD desktop. So I just did an ls to see where I was. I'm going on a desktop and then, yep, I'm on the desktop now. So what I'm going to do is go ahead and on my desktop, create a new application, CRM application, with the instructions here. And we're going to need to use the NPX command, which is basically the same as NPM. The other difference between NPX and NPM is that it doesn't need to install the libraries or the packages prior to do the NPM command. So what it does with NPX, it automates the actual installation of the libraries you need in order to create the new project. So I'm going to go and create expo app and call this application CRM. I'm building it on this desktop, like so. So while this is actually creating all of this, I'm going to check, I have the folder here, we're all good to go and wait for the installation slash creation of the project to finish. So now that I have the application or project created, I can CD into CRM like so. And now I am inside of the application, where I have all the assets for this specific application. So now what we're going to do is start the application and then run it on our simulator and make one small change in my tool of choice, which is VS code, where you can use any editor you want to make the code changes and see it change in the simulator. So let's go ahead and do this. The command, as you can see here, is NPX expo start, as such. So now I've got this and you can use this to actually install expo on your actual physical iPhone and basically test it on the iPhone as well, which is super cool when you want to see on the actual physical device how it actually runs. Now I'm just going to run it on the simulator so I can do I for iOS. If you are on Android, you do A. And let's go ahead, I'm going to do I, and now you're going to see my simulator here run the application. Go and do this, open up the application. And as you can see, this is the Expo app. So there's nothing in this application yet. So if you want to see it live, I'm going to close this window, I'm going to minimize this for now. I may use the terminal directly in VS code. And what I'm going to do is drop the folder inside of VS code so we can see our code here and make the proper change. And you need to go into the App.js file. And then I'm going to close the explorer so I can see my simulator here as well. Have as much screen as possible, like this. Put my simulator here, so I can see it while I'm doing development, like so. This is cool. Yeah, that's good. And as you can see right now, I have this here. Open up in App.js to start working on your app. This is the same thing that we have here. So let's go ahead and change this and you'll see the change happen live. And if I save this, I'm going to see the change directly in the application here. This is super cool. The other thing that you need to always keep in mind of is that you can also open the debugger directly from here. So if I press J here, I'm going to see the debugger and you have all the stuff that you need for the debugger here. All right, so now that we have a project started, we can move on. In the next video, we'll get familiar with the folder structure and the files and take a look at the schema.