Configurazione ambiente di sviluppo react native - Expo

1. Laboratorio Avanzato di Programmazione II
(LAP II)
Sviluppo di applicazioni mobili
native multipiattaforma
Prof. Antonio S. Calanducci
Corso di Laurea in Informatica, Unict
Anno accademico 2017/18
Lesson 02: React Native
Development Environment Setup

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

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

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

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

6. 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 :)

7. 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%System32WindowsPowerShellv1.0powershell.exe" -
NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-
Object System.Net.WebClient).DownloadString('https://chocolatey.org/
install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%chocolateybin"

8. 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"'

9. 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/

10. 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/

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

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

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

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

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

16. 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”

17. Step 9b (optional): ESlint configuration
In your project directory:
• eslint --init
And choose the following answers:
• Use a popular style guide
• Airbnb
• Do you use React? Y
• JSON
{
"extends": "airbnb",
"rules": {
"react/jsx-filename-extension": [
2,
{
"extensions": [".js", ".jsx"]
}
]
}
}
Modify .eslintrc.json:
{
"editor.formatOnSave": true,
"prettier.eslintIntegration": true
}
edit VSCode User Preferences:

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

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

20. 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!)

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

22. Questions