lezione 02 react and react native installation and configuration

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

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

Node.js installation (Windows)Several ways:

• (Windows) via Chocolatey (recommended)

• download from https://chocolatey.org • chocoinstallnodejs.install

• chocoinstallpython2

• (Windows) with Windows installer at: • https://nodejs.org/en/download/

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

• $nvminstall6

• 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-fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)”

• $brewinstallnode

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

Install a Code EditorHere 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

Install ReactIf 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 • $npminstall-gcreate-react-app

• $create-react-apphello-world

• $cdhello-world

• $npmstart

https://facebook.github.io/react/docs/installation.html

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/

Android SDKeasier 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)

Configure Android SDKBe 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

Configure env (Linux/macOS)Edit .profile or .bash_profile with

• exportANDROID_HOME=${HOME}/Library/Android/sdk

• exportPATH=${PATH}:${ANDROID_HOME}/tools

• exportPATH=${PATH}:${ANDROID_HOME}/platform-tools

https://facebook.github.io/react-native/docs/getting-started.html

Configure env (Windows)

https://facebook.github.io/react-native/docs/getting-started.html

Configure and start an AVDAndroid 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

GenymotionGenymotion 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

React Native installationInstall React Native CLI with: • $npminstall-greact-native-cli

Install Watchman:

• $brewinstallwatchman(macOS)

• $npminstall-gwatchman(Win / Linux)

Hello World React Native$react-nativeinitHelloWorld

$cdHelloWorld

$react-nativerun-ios

$react-nativerun-android

On Android an AVD (or Genymotion) should be started manually

On macOS, the iOS Simulator is started automatically

Running Hello World on deviceson 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

create-react-native-appCreate 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: • $npminstall-gcreate-react-native-app

Run with: • $create-react-native-appmy-app

• cdmy-app/

• npmstart

Download and install Expo from https://expo.io

Expo and XDEIf 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/v15.0.0/introduction/installation.html

• Available for macOS / Windows / Linux

Use Expo apps on your iOS and Android devices

Expo and Snackif 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