[001.2] Getting Started

Installation and a quick introduction about the app structure

Subscribe now

Getting Started [11.17.2016]

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.

cd MyFirstProject
atom .

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 niceties.

tree .

Here you can see all the files and folders the generator has created.

Let's run our project:

react-native run-ios

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:

react-native run-android

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!