Laboratorio Avanzato di Programmazione II

(LAP II)
Sviluppo di applicazioni mobili
native multipiattaforma
Lesson 02: React Native
Development Environment Setup
Prof. Antonio S. Calanducci
Corso di Laurea in Informatica, Unict
Anno accademico 2017/18
 Step 1: Expo XDE
Expo is an open source toolchain that simplify mobile app development with React Native
• Made up of several components

Download Expo XDE (Expo Development Environment) from:

• https://github.com/expo/xde/releases
• Choose xde-Setup-2.22.1.exe for Win 10

• Choose xde-2.22.1-x86_64.AppImage for Linux

• Choose xde-2.22.1.dmg for Mac OS

Run the installer (Win)

Open the dmg and drag "Expo XDE" on the Application folder (MacOS)
Move the AppImage in your preferred location, "chmod +x xde-2.22.1-x86_64.AppImage", and start it

Open XDE. At the first run, you need to set up a free account
 Step 2: Expo clients apps
Expo clients allow to test, debug and run apps built with Expo on
your physical iOS and Android devices and/or iOS simulator/Android
emulators
• It will reload automatically the app every time your source code
changes
From your iOS/Android devices download:
• https://itunes.apple.com/app/apple-store/id982107779?
ct=www&mt=8
• https://play.google.com/store/apps/details?
id=host.exp.exponent&referrer=www
 Step 3: Run the "Hello World" app
Open Expo XDE

Create a new project

• choose the blank template

• use hello-world as project name

Click on the Share button

Open the Expo client on your device
• click on Scan QR code option and point to your dev machine
screen
 Step 3: Install a Code Editor
Here my preferred ones:
• Atom (https://atom.io) - macOS/Win/Linux
• Visual Studio Code (https://code.visualstudio.com) -
macOS/Win/Linux
• Sublime Text 3 (https://www.sublimetext.com) - macOS/
Win/Linux
 Step 3: Visual Studio Code
Download Visual Studio Code from:
• https://code.visualstudio.com

VS Code optionally requires a GIT client

If you are using Linux, install with your Package manager

(apt-get install git)

On Mac OS, git comes pre-installed with Xcode

For Windows, go to the next slide :)

 Step 4: Chocolatey (Win)
Chocolatey is a Package Manager for Windows
• Easily manage all aspects of Windows software (installation,
configuration, upgrade, and uninstallation)

Installation instructions (https://chocolatey.org/install):

• Open Command Prompt as Administrator (Run As Admin)
• Copy and Paste the following text:
• @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -
NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-
Object System.Net.WebClient).DownloadString('https://chocolatey.org/
install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
 Step 5: Install Git
Install GIT with with one of the following way:
• Download and run the installer from
• https://git-scm.com/downloads
• Use Chocolatey (recommended):
• From the Command prompt, type:
• choco install -y git -params '"/GitAndUnixToolsOnPath"'
Step 6: Node.js installation (Windows)
Several ways:
• via Chocolatey (recommended)
• download from https://chocolatey.org
• choco install nodejs.install

• with Windows installer at (easier):

• https://nodejs.org/en/download/
 Step 6: Node.js installation (Linux/macOS)
Several ways:
• with Node Version Manager (nvm):
• (Linux): $ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/
install.sh | bash
• (MacOS): $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/
install.sh | bash
• $ source ~/.profile (or source ~/.bash_profile for Mac OS)
• $ nvm install 8

• more info here: https://github.com/creationix/nvm#install-script

• via Package Manager:
• https://nodejs.org/en/download/package-manager/
• using a pre-built installer:
• https://nodejs.org/en/download/
 Node.js installation (macOS)
Via Homebrew (the missing package manger for macOS):
• $ /usr/bin/ruby -e "$(curl -fsSL https://
raw.githubusercontent.com/Homebrew/install/
master/install)”
• $ brew install node

• Info on Homebrew here: https://brew.sh

 Step 7 (optional): install Genymotion
Genymotion is a Android emulator

it’s free for educational purpose and personal usage:

Download the Personal Edition and install it from:

• https://www.genymotion.com/fun-zone/

You need to create a free account

VirtualBox is required (download and install VBox first)

• so it cannot be run in a virtualized host
Step 7 (optional): Genymotion configuration
Start Genymotion

Click "Add" to add a new virtual device

Choose one of

Start the Virtual device

From the left bar, click on GApps

• this will install the Google Services and the Play Store
• Install Expo from the Play Store
Step 8: Visual Studio Code extensions
https://medium.com/react-native-training/vscode-for-react-
native-526ec4a368ce

React Native Tools

Prettier

Auto Close Tag

Auto Complete Tag

Color Highlight

Path Intellisense

Babel JavaScript or Sublime Babel

 Linter (ESLint)
Code linting is a type of static analysis that is frequently
used to find problematic patterns or code that doesn’t
adhere to certain style guidelines
• JavaScript, being a dynamic and loosely-typed language,
is especially prone to developer error
• Linting tools like ESLint allow developers to discover
problems with their JavaScript code without executing it
 Step 9a (optional): ESLint installation
Atom:
• packages to install: “linter”, “linter-eslint”

Visual Studio Code

• (from a terminal:) $ npm install -g eslint
• extension to install: “ESLint”
Step 9b (optional): ESlint configuration
In your project directory: Modify .eslintrc.json:
• eslint --init {
"extends": "airbnb",
"rules": {
"react/jsx-filename-extension": [
And choose the following answers: 2,
{
"extensions": [".js", ".jsx"]
}
• Use a popular style guide ]
}
}
• Airbnb
edit VSCode User Preferences:
• Do you use React? Y
{
• JSON "editor.formatOnSave": true,
"prettier.eslintIntegration": true
}
 Step 10 (optional): Expo CLI
Sometimes it's quicker to start the React Native packager
without opening the XDE, using a terminal

VSCode has an integrated terminal too

From a terminal:
• $ npm install -g exp
 Test your installation
Open the "Hello World" project folder from your editor

Start the React Native packager from XDE or with:

• $ exp start

Start Genymotion (and/or the iOS Simulator if you are on a Mac):

• Open the Expo client, switch to the "Explore" tab, click on the
Search icon
• Copy and paste the URL from XDE (es: exp://192.168.1.6:19000)
Do a simple edit in the code and see if the app refreshes
 Expo tips
on iOS: Cmd+D shows the Expo debug menu

on iOS: Cmd+R reloads the app

on Genymotion: Ctrl+M shows the Expo debug menu (R,R,

reloads the app)

Enable Live Reload or Hot Reload (only one of the two):

• every time you save a file, Expo will reload the app

If you want to reload faster, switch to LAN


(if you are connected to the same LAN!)
 Snack
if you don’t want to install anything on your machine and
learn React Native anyway, you can use Snack at:
• https://snack.expo.io

Use Expo apps on your iOS and Android devices

Questions