This document provides instructions for setting up a development environment for React and React Native. It includes steps for installing Node.js, a code editor like Atom or VS Code, React, the Android and iOS SDKs, React Native, and optional tools like Genymotion emulator and Expo. It also describes configuring environment variables, creating a basic "Hello World" app in both React and React Native, running and debugging apps on devices or emulators, and setting up the ESLint linter.

1. Prof. Antonio S. Calanducci
20 May 2016
Prof. Antonio S. Calanducci
Corso di Laurea in Informatica, Unict
Anno accademico 2016/17
Laboratorio Avanzato di Programmazione II
Lesson 02: React & React Native
installation

2. Outline
Node.js
Atom / VSStudio Code
React
• Hello World in React DOM
Android SDK / iOS SDK
• (Optional) Install Genymotion
React Native
• Hello World in React Native
• Running and debugging on device
• create-react-native-app
• Expo

3. Node.js installation (Windows)
Several ways:
• (Windows) via Chocolatey (recommended)
• download from https://chocolatey.org
• choco install nodejs.install
• choco install python2
• (Windows) with Windows installer at:
• https://nodejs.org/en/download/

4. Node.js installation (Linux/macOS)
Several ways:
• with Node Version Manager (nvm):
• $ wget -qO- https://raw.githubusercontent.com/
creationix/nvm/v0.33.1/install.sh | bash
• $ source .profile
• $ nvm install 6
• 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/

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

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

7. Install React
If you want to just use React Native, you can skip this
Install React if you want to run React for Web (React.js)
and build awesome Single Page Web Application
• $ npm install -g create-react-app
• $ create-react-app hello-world
• $ cd hello-world
• $ npm start
https://facebook.github.io/react/docs/
installation.html

8. iOS SDK (macOS only)
Download and install Xcode
• from the Mac App Store
• https://itunes.apple.com/it/app/xcode/
id497799835?mt=12
• from https://developer.apple.com/
download/

9. Android SDK
easier way:
• install Android Studio
• https://developer.android.com/studio/index.html
• Choose custom install and select:
• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device
harder way:
• Install just the SDK tools
• (link at the bottom of the previous page)

10. Configure Android SDK
Be sure to have Java JDK 8 installed
on Linux/macOS set JAVA_HOME to its path
from the Welcome screen of Android Studio, start the
SDK Manager and install Android 6.0 (Marshmallow):
• Google APIs
• Android SDK Platform 23
• Intel x86 Atom_64 System Image
• Google APIs Intel x86 Atom_64 System Image
Take note of where the Android SDK has been saved

11. Configure env (Linux/macOS)
Edit .profile or .bash_profile with
• export ANDROID_HOME=${HOME}/
Library/Android/sdk
• export PATH=${PATH}:$
{ANDROID_HOME}/tools
• export PATH=${PATH}:$
{ANDROID_HOME}/platform-tools
https://facebook.github.io/react-
native/docs/getting-started.html

12. Configure env (Windows)
https://facebook.github.io/react-native/
docs/getting-started.html

13. Configure and start an AVD
Android SDK comes with a built-in
emulator:
• from the AVD Manager (Android Studio),
create an AVD with
• Android 6.0 - API Level 23
• Intel Atom (x86_64)
• Start the AVD

14. Genymotion
Genymotion is a faster Android emulator
it’s free for educational purpose and personal
usage:
Download and install it from:
• https://www.genymotion.com/fun-zone/
You need to create a free account
VirtualBox is required
• so it cannot be run a virtualized host

15. React Native installation
Install React Native CLI with:
• $ npm install -g react-native-cli
Install Watchman:
• $ brew install watchman (macOS)
• $ npm install -g watchman (Win /
Linux)

16. Hello World React Native
$ react-native init HelloWorld
$ cd HelloWorld
$ react-native run-ios
$ react-native run-android
On Android an AVD (or Genymotion) should
be started manually
On macOS, the iOS Simulator is started
automatically

17. Running Hello World on devices
on macOS (iOS), you need to manually open Xcode and load the
HelloWorld.xcodeproj and run from Xcode
for Android:
• enable USB Debugging on your device.
• Connect it USB cable
• shutdown any emulator
Troubleshoting if the app won’t load:
• $ adb reverse tcp:8081 tcp:8081 (debugging via usb cable)
•
https://facebook.github.io/react-native/docs/running-on-device.html

18. create-react-native-app
Create a React Native app on any OS with no build config
Test only on physical devices
No need to install Android Studio or Xcode
Can be used to develop for iOS even from Windows / Linux
Install it with:
• $ npm install -g create-react-native-app
Run with:
• $ create-react-native-app my-app
• cd my-app/
• npm start
Download and install Expo from https://expo.io

19. Expo and XDE
If you don’t want to use create-react-native-app
you can configure a react native skeleton with
XDE (Expo Development Environment)
• Download and install from:
• https://docs.expo.io/versions/v16.0.0/
introduction/installation.html
• Available for macOS / Windows / Linux
Use Expo apps on your iOS and Android
devices

20. Expo and 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

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

22. ESLint installation
Atom:
• packages to install: “linter”, “linter-
eslint”
Visual Studio Code
• npm install -g eslint
• extension to install: “ESLint”

23. ESLint configuration for React Native
npm install --save-dev eslint-
config-rallycoding
• PS: this config works only for React Native
project
• Create a .eslintrc file into your project
root with the following content:
{
"extends": "rallycoding"
}

24. Questions