React Native Tutorial - Getting Started

React Native - React Native uses Node.js, a JavaScript runtime, to build your JavaScript code. React Native also requires a recent version of the Java SE Development Kit (JDK) to run on Android. Follow the instructions for your system to make sure you install the required versions.

MacOS

First install Homebrew using the instructions on the Homebrew website. Then install Node.js by executing the following in Terminal:

brew install node

Next, use homebrew to install watchman, a file watcher from Facebook:

brew install watchman

This is used by React Native to figure out when your code changes and rebuild accordingly. It’s like having Android Studio do a build each time you save your file.

Finally, download and install JDK 8 or newer if needed.

Windows

First install Chocolatey using the instructions on the Chocolatey website.

Install Node.js if you don’t have it or have a version older than 4. Run the following command as Administrator (Right-click on Command Prompt and select “Run as Administrator”):

choco install -y nodejs.install

Python is needed to run the React Native build scripts. Run the following command as Administrator if you don’t have Python 2:

choco install -y python2

Run the following command as Administrator if you don’t have a JDK or have a version older than 8:

choco install -y jdk8

Linux

Install Node.js by following the installation instructions for your Linux distribution. You will want to install Node.js version 6 or newer.

Finally, download and install JDK 8 or newer if needed.

React Native CLI
Use Node Package Manager (or npm) to install the React Native Command Line Interface (CLI) tool. In your terminal (Terminal or Command Prompt or shell) type:

npm install -g react-native-cli

npm fetches the CLI tool and installs it globally; npm is similar in function to JCenter and is packaged with Node.js.

Next, install Yarn using the instructions on the Yarn website. Yarn is a fast npm client.

Android Development Environment
Set up your Android development environment, if haven’t done so. Make sure you can successfully run an Android app on an emulator.

React Native requires Android 6.0 (Marshmallow). In Android Studio, go to Tools\Android\SDK Manager. Select SDK Platforms and check Show Package Details. Make sure that the following items are checked:

Google APIs, Android 23
Android SDK Platform 23
Intel x86 Atom_64 System Image
Google APIs Intel x86 Atom_64 System Image

Next, select SDK Tools and check Show Package Details. Expand Android SDK Build-Tools and make sure 23.0.1 is selected.

Finally, tap Apply to install your selections.

When the Android components are finished installing, create a new emulator running SDK Platform 23.

Create the Starter App
Navigate to the folder where you would like to develop your app and run the following in your terminal:

react-native init PropertyFinder

This uses the CLI tool to create a starter project containing everything you need to build and run a React Native app.

In a terminal, run:

cd PropertyFinder

In the created folders and files you will find a few items of note:

node_modules is a folder which contains the React Native framework
index.js is the entry point created by the CLI tool
App.js is the skeletal app created by the CLI tool
android is a folder containing an Android project and the code required to bootstrap your application
ios is a folder containing iOS-related code, which you won’t be touching in this tutorial.
Start your Android emulator running SDK 23 if it isn’t running.

Run the following command in a terminal:

react-native run-android

The emulator will display the following:

If you receive an error related to “SDK location not found”, then perform the following steps:

Go to the android/ directory of your react-native project
Create a file called local.properties with this line:
sdk.dir = {PATH TO ANDROID SDK}

For example, on macOS, the SDK path will look something like /Users/USERNAME/Library/Android/sdk.

You might also have noticed that a terminal window has popped up, displaying something like this:

This is Metro Bundler, the React Native JavaScript bundler running under Node.js. You’ll find out what it does shortly.

Don’t close the terminal window; just keep it running in the background. If you do close it by mistake, simply run the following in terminal:

react-native start

Note: You’ll be mostly writing JavaScript code for this React Native tutorial so no need to use Android Studio as your editor. I use Sublime Text, which is a cheap and versatile editor, but Atom, Brackets or any other lightweight editor will do the job.