React Native Environment Setup

In this React Native tutorial you’ll learn how to setup environment for native apps development based on the hugely popular React JavaScript library.

What makes React Native different from other hybrid frameworks such as Ionic(AngularJS) or PhoneGap (Apache Cordova), that use JavaScript to create iOS apps?

Hybrid framework’s goal is to write the code once and run it on any platform. React Native’s goal is to learn-once and write-anywhere. With React Native your code may be written in JavaScript but the app’s UI is fully native. It doesn’t have the drawbacks typically associated with a hybrid HTML5 app.

Native UI of React Native app in Xcode

Setting Up

I used macOS High Sierra(10.13.4) and macbook so I’m going with tools required for this OS.

You need IDE for complex apps/projects. Lightweight text editors e.g. Sublime Text won’t help you much. There are 2 IDEs prevalent:

1. Visual Studio Code - Microsoft’s open source IDE is hugely popular for support of plenty of languages and extensions continuously being added by community.
2. Atom — Github’s command-line editor got huge push by Facebook to make it UI IDE. Facebook has come up with Nuclide package on top of Atom IDE to code, debug, build, run React Native project in Atom.

I would recommend to go ahead with Visual Studio Code. Download and install it. Once it’s installed, open it and click on Extensions tab on left side bar.

Extensions in Visual Studio Code

Search “React Native Tools” under Extensions Marketplace & select “React Native Tools” Extension and click on Install button. You’re all set to add,edit/build/debug/run React Native project once it’s installed successfully.

“React Native Tools” Extension doesn’t come up with formatter. Open Extensions Marketplace again and search “Prettier” Extension. Install & enable it. Plain and simple, prettier is a formatter that, when enabled, will modify your code in order to keep its appearance consistent. It means this:

To do that it’s surely simple, but since we are developers, we need to add another line to the editor preferences or Keyboard Shortcut: ⌘,

// THIS WILL TRIGGER PRETTIER ON SAVE

Enable auto-format on Save

To see method list in a file, two options are available:

1. Invoke Code’s Go to symbol command:

• macOS: cmd+shift+o
• Windows/Linux: ctrl+shift+o

Typing a colon (:) after invoking Go to symbol will group symbols by type (classes, interfaces, methods, properties, variables). Then just scroll to the methods section.

Invoked Go to symbol command

2. Code Outline Extension:

Open Extensions panel in the “Explorer” section of Visual Studio Code. Search Code Outline Extension, click on Install. Once it’s installed, click on Outline panel in the “Explorer” section. Select any .js file of the project & it’ll show you group symbols by type (classes, interfaces, methods, properties, variables).

Code Outline’s grouping of classes, interfaces, methods, properties, variables

React Native uses Node.js, a JavaScript runtime, to build your JavaScript code. If you don’t already have Node.js installed, it’s time to get it!

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

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 Xcode do a build each time you save your file.

Next use npm to install the React Native Command Line Interface (CLI) tool:

npm install -g react-native-cli

This uses the Node Package Manager to fetch the CLI tool and install it globally; npm is similar in function to CocoaPods or Carthage and is packaged with Node.js.

Navigate to the folder where you would like to develop your app and run the following in Terminal:

react-native init {project Name}

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

If you get complaints about the version of node, make sure the one installed by brew is the one in use. Run brew link --overwrite node in the terminal.

In Terminal, run:

cd {project Name}

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
• ios is a folder containing an Xcode project and the code required to bootstrap
  your application
• android is a folder containing Android-related code, you won’t be touching those in this tutorial.

Open the {project Name}.xcodeproj in the ios folder with Xcode, then build and run. The simulator will start and display the following:

As always, any feedback is appreciated, so feel free to comment down here or reach out on twitter — and, as always,