lezione 02 react and react native installation and configuration
TRANSCRIPT
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