React Native - Setting Up

Turbo 360

This video will show you how to get your development environment up and running for React Native Development. Whether you plan to develop using the React Native CLI with Xcode and Android Studio, or you just want to use Create React Native App and Expo, this video will go over both approaches and make sure you are ready to start creating react native apps.


Setting up your Development Environment

Installing Node.js & React Native - 2:00
We start by installing Node and testing the installation. Then, we go over installing React Native for different operating systems and discuss the benefits of each, specifically the fact that macOS allows you to create iOS apps. We install the react-native-cli globally using NPM.

Installing Xcode / Android Studio - 8:02
If you are using a Mac, you should download Xcode if you want to make iOS apps and don’t have it installed already. If you want to make Android apps, download Android Studio as well. These are both free to download. It might take up to an hour to finish this process.

Installing Watchman - 10:14
Watchman is not required, but it watches for file changes and make development easier. It requires the package manager Homebrew.

Building an iOS Project - 11:28
Now we actually create a new application for our project, starting with the iOS version. We run the creation command from the react-native-cli, cd into the project directory, and start the project. We leave this command running and open a new terminal tab in the same directory. Then, we run the iOS app. This takes a while the first time, but will be faster after that.

Adding Content - 17:30
Now, we open the App.js file for our project and change some of the content. When we view the app again and refresh, we can see our changes.

Building an Android Project - 19:01
We start by opening Android Studio and opening an existing project. We choose to open the android folder from the project we created earlier. We start the bundler again using “react-native start”. Then we run the Android app. We see an error message because we do not have an Android device connected.

Connecting an Android Device - 22:52
If you own an Android device, you can connect it to your computer and test with it. Another way to run the Android app is by downloading and running a virtual Android device via Android Studio. Once this is complete, we can successfully run our application.

Alternative Method using Expo - 28:18
We now go through an alternative method for creating an app which uses a tool called Expo. We run the command “create-react-native-app projectName” to create the project. This takes a few minutes, so in the meantime download the free Expo app on your iOS or Android device. When the project is created we start it, then scan the given QR code with the Expo app.

Adding Content - 34:58
Finally, we change the content of our app to see that it’s been updated in Expo on our iOS or Android device as well.

Membership Options