We already discussed a little bit about how React Native is used and how it
works. Today, we are going to install and set up our development environment.
Let's check the website. Here you can see that you can choose your development
OS: Mac, Linux, or Windows.
- We should have xcode
- So, if you don't have xcode, you should install it from Apple Store.
- It's important to have Android Studio
- It will help you to create Android Virtual Machines and to set up your android environment.
Installing (on Mac)
We need to have Node.js installed:
brew install node
We also need to install watchman to
react to changes in source code files. It basically watches for file changes and
triggers actions based on those changes:
brew install watchman
React Native has a useful command line interface for helping us. Let's install it globally.
npm install -g react-native-cli
Also, if you don't have Google Chrome I recommend installing it, because it
allows you to debug your app easily.
With this, we are good to create our first application.
Let's use React Native CLI to create our first project:
react-native init MyFirstProject
It basically downloads some npm packages and it creates a basic structure for our application. It takes some time.
Let's check our project.
You can use vim, Atom, Sublime
Text or whichever text editor you prefer.
Facebook has built nuclide, based on Atom. We will talk
about it in another episode, but I wanted you to be aware of it. It helps you to
debug inside the text editor using the Chrome debugger. Keep in mind you don't
need nuclide, you can use just the Chrome debugger and your preferred text
editor. Nuclide just makes it easier to set breakpoints and adds some other
Here you can see all the files and folders the generator has created.
Let's run our project:
With this, it will build your app. It runs your app in a node server on the current
terminal, and the Simulator should pop up in your screen.
We should see our app running in the iOS Simulator. This is just a shortcut for
building and running the app. It can also be run directly with XCode.
To run it on Android, you can download Android Studio and setup your Android
Virtual Device. Another common way is to use
genymotion. Genymotion is an Android emulator
which runs as a virtual machine and in some cases it's faster than developing on
real devices. I have downloaded Genymotion here and I will build and run the
application in my virtual android phone:
Awesome! So, we have our application up and running on iOS and Android.
In the next episode we will take a look in the project structure, where our
components, styles and files should be located.
PS: You can try React Native Play. Basically, it allows
you to run React Native in the browser.
PSS: You can also try Yarn rather than npm. Here an article on how to migrate from npm.
See you soon!