React Native Prerequisites

Before you can develop with the React Native framework, you need the following items installed on your computer:

  1. Node.js
  2. Node Package Manger (NPM)
  3. Yarn
  4. Watchman

 

To install Node.js and NPM, just follow this tutorial.

Yarn Package Manager Installation

Before we can develop amazing native mobile apps with React Native, we should first setup our local environment and install the needed tools to make our development process much faster.

One of these tools is called Yarn. Yarn is basically just a package manager just like the Node Package Manager or NPM.

To install it on your machine, you simply have to open your terminal or command prompt, and type:

npm install -g yarn

The Yarn Package Manager is essentially just like the Node Package Manager, but with much faster performance and other neat features.  Basically, it manages the dependencies of your application like what NPM does and also uses the same package.json configuration file . The notable difference it has with NPM is that, it caches every package it downloads by default, which eliminates the redundant download time. Yarn also parallelizes multiple operations, making package installation times shorter.

Okay, it is now installed. Let’s clear our terminal and check out if Yarn works properly.
Just type yarn -v to show its version.

And there it is. We had installed and verified that the Yarn Package manager has been successfully installed in our computer.

 

Watchman Tool Installation

One of the tools for improving, and making our development time much faster, is a file watching service tool called Watchman.

Watchman is a tool made by Facebook for watching any changes in your filesystem and then automatically trigger specific actions like executing a program or re-building project assets. So for example, I made one change on my source code, the watchman service will then automatically rebuild, deploy or do whatever action I configured it to do so.

There are several ways to install this tool but for this lecture, we will use the Homebrew package manager for MacOS.  We will need to update the Homebrew package manager first before we can install Watchman. So on your terminal, just issue the brew update command and wait for it to complete downloading the latest packages. What’s happening here is that, we are fetching all of the new available packages from the homebrew repository, including the latest updates of the existing packages installed in our machine.

All right, now that it is done, we shall proceed in installing Watchman by simply typing: brew install watchman in your terminal. Our homebrew package manager will search for the watchman package and its corresponding dependencies then downloads them from the bintray package repository. In case that you encountered an error saying that watchman can not be found, just make sure that you had ran the brew update command before running this watchman installation.

Homebrew is actually a cool package manager. As its name implies, brew is kind of related to beer, as seen in its logo. And where do we store our beer? Well of course, in the Cellar! As you can see here, it stores our new Watchman tool in the Cellar — in the /usr/Local/Cellar/ directory.

The installation is finally complete! Let’s now see our watchman tool in action. Just type watchman to check if it is properly installed.

And yes, it works! To view its current version, just watchman -v or alternatively, type  watchman version

 

React Native CLI Installation

We will install the React Native’s Command Line Interface, or CLI, In this lecture.

Basically, the React Native CLI is a command line tool that helps you generate new projects, run your app to an iOS or android emulator, check the console logs and many more.

First, open a terminal and then just issue this command:

npm install -g react-native

and then wait for it to complete. And there you go, it is now installed.

Let’s clear our screen first and verify that the CLI is working fine.

So just type react-native

and yes, it works.

This time, let’s try to see what other available commands we can use.

just type react-native —help

and as you can see here, you can issue an init command to generate a new project, -v for version and many more.

Subscribe Now and Upgrade Your Skills Today!
Sign up now and have the latest tech tutorials delivered straight to your mailbox.

PLUS: Get exclusive member-only discounts (up to 80% OFF!!) on our top tech courses in Udemy!
We hate spam. Your email address will not be sold or shared with anyone else.