In this video, Emmanuel Henri initializes a React Native project and goes through the proper steps around this subject and running the application on a simulator.
- [Instructor] Okay, so now we're going to get started with a React Native project and the first thing you need to do is go to facebook.github.io/react-native. Once you get to this page click on Get Started and then you have two options. If you want to simulate your application inside of your own device, you can quickly get started with Expo here. So follow the steps on the Quick Start here and install Expo and when you run the application, you're going to be able to see it inside of your device. If you want to see a simulator inside of your computer like we're going to do in this course, click on Building Projects with Native Code. Then scroll down and select the operating system you're on so if you're on macOS click here. If you're on Windows, or Linux and then select the target OS. So if you're on Windows and Linux you can only develop on Android, and if you're on macOS you can develop on iOS. Then follow all the steps below and make sure you have everything installed. So, installing all these dependencies are beyond the scope of this course but it's well explained here so you should be able to follow this and get ready. So for my case, I am on Windows and Android and once I'm done installing all this, you should see something that resembles this. So this is Android Studio. Once you're inside of Android Studio, you click on AVD Manager. And then if you don't have any Virtual Devices, click on Create Virtual Device and then select a Virtual Device and click next and it's going to download everything you need to create a brand new device. In my case I already have one here. So once you're ready to run this device click on the play button here and your device is going to run as a simulator here. So you're ready to go. So you can minimize Android Studio and then bring up Visual Studio Code where we're going to work. So once you're inside of Visual Studio Code, we need to install React Native, so we'll go ahead and do that. So let's bring up our terminal, so click on view, terminal and then do npm install - g react native-cli. So, react-native-cli. Once you have that installed you can initialize our brand new projects. So we'll go ahead and do that. So we can do react native init and then the name of your application. So in this case we're going to name it crm. And before I do that I want to make sure I am on my desktop so let's go ahead and place myself on the desktop. For yourself you can actually do this anywhere you want, so make sure you're in the directory you want to have your application. And let's go and bring up React Native again, init crm. So once we have all this installed let's close that for a second. Let's open folder and let's go to where we installed our new crm. Select folder and then you should have your application completed here. Let's close that. And let's do react native run android. So this will basically run the application on the Android device that we just started. Or in your case, if you actually have this on iOS, it's going to run on iOS. So, if you want to run on iOS you do react native run-iOS. And as you can see we have our application here. So if you want to make a quick change to see if it works, we can close that for a second. Go into our app and scroll down until you see Welcome to React Native and let's do Welcome to CRM. And then save. If you want to see the change in the application here, all you have to do is hit r twice to reload and you're going to see the change here. So now that we've got our project completely started, let's move on to start creating our stuff in our application.
- Initializing React Native projects
- Installing material kit and vector icons
- Setting up Redux
- Creating a list view, a detail view, and a menu
- Adding new components
- Using the React Native debugger
- Coding the scroll on detail view