React nativebeginner1

React Native for Beginners #1 Oswald Campesato Consultant/Training: www.iquarkt.com ocampesato@yahoo.com

React Native Code Samples • HelloWorld • rn-firebase-auth-master • react-native-redux-groceries-master • react-native-svg-master • react-native-art-svg-master • firebase-react-native-sample-master • react-native-nba-app-master (uses Redux) • NB: this workshop requires knowledge of ReactJS

What is React Native? • Cross platform mobile development • Based on React • Created by Facebook (2015) • Built-in components are similar to React

Some Differences in React Native • Top-level element is <View> instead of <div> • Use <Text> element to render buttons: <Text style={this.props.button_text_styles}> {this.props.text}</Text> • TouchableHighlight for touch events: <TouchableHighlight underlayColor={"#E8E8E8"} onPress={this.props.onpress} style={this.props.button_styles}>

Sample import Statement in RN • import React, { • AppRegistry, • Component, • StyleSheet, • Text, • TextInput, • View, • Image, • AsyncStorage • } from 'react-native';

Sample styles Definition in RN var styles = StyleSheet.create({ • parent: { • flexDirection: 'column', • position: 'absolute', • top: 30, left: 0, right: 0, bottom: 0 • }, • topBlock: { • flexDirection: 'row‘, flex: 5 • }, • } module.exports = styles;

Sample AppRegistry in RN • class HelloWorld extends Component { • render() { • return ( • <View style={styles.container}> • <Text style={styles.welcome}> • Welcome to React Native! • </Text> • </View> • ); • } • const styles = StyleSheet.create({ . . . }) • } AppRegistry.registerComponent ('HelloWorld', () => HelloWorld);

Set-up Steps for iOS • 1) a Macbook with the following installed: + El Capitan (10.11.4) + Xcode 7.3 • 2) an iOS device with El Capitan • 3) install Node on your Macbook • 4) install react-native on your Macbook: • [sudo] npm install -g react-native-cli

Set-up Steps for Android • 1) a Macbook with the following installed: + Android SDK (for Android 4.x or higher) + Android NDK + Java8 + set ANDROID_HOME, NDK_HOME, and JAVA_HOME • 2) an Android device with 4.x or higher • 3) install Node on your Macbook • 4) install react-native on your Macbook: • [sudo] npm install -g react-native-cli

Links with Detailed Set-up Steps • 1) https://facebook.github.io/react- native/docs/getting-started.html#content • 2) https://facebook.github.io/react- native/docs/android-setup.html • 3) https://facebook.github.io/react- native/docs/running-on-device-android.html

Download/Install Code Samples • 1) download/unzip Github repo (or clone repo) • 2) cd <any-directory> • 3) npm install • 4) launch Xcode and run the application

Creating a New RN Project (1) • “cd” to a convenient location and create a project: react-native init FirstProject • cd FirstProject • npm install (this will take a while) • Option #1: react-native run-ios • Option #2: • a) open the Xcode project • b) select your attached iOS device • c) Product->Run

Creating a New RN Project (2) • Contents of new project: • android • index.android.js • index.ios.js • ios • node_modules • package.json

Creating a New RN Project (3) • Contents of package.json: • { • "name": "FirstProject", • "version": "0.0.1", • "private": true, • "scripts": { • "start": "node_modules/react-native/packager/packager.sh" • }, • "dependencies": { • "react-native": "^0.11.4" • } • }

Contents of index.ios.js (1) • /** • * Sample React Native App • * https://github.com/facebook/react-native • */ • 'use strict'; • var React = require('react-native'); • var { • AppRegistry, • StyleSheet, • Text, • View, • } = React;

Contents of index.ios.js (2) • var FirstProject = React.createClass({ • render: function() { • return ( • <View style={styles.container}> • <Text style={styles.welcome}> • Welcome to React Native! </Text> • <Text style={styles.instructions}> • To get started, edit index.ios.js </Text> • <Text style={styles.instructions}> • Press Cmd+R to reload,{'n'} • Cmd+D or shake for dev menu </Text> • </View> • ); • } • });

Contents of index.ios.js (3) • var styles = StyleSheet.create({ • container: { • flex: 1, • justifyContent: 'center', • alignItems: 'center', • backgroundColor: '#F5FCFF', • }, • welcome: { • fontSize: 20, textAlign: 'center’, margin: 10, • }, • instructions: { • textAlign: 'center‘, color: '#333333’, marginBottom: 5, • }, • }); • AppRegistry.registerComponent('FirstProject', () => FirstProject);

Launch Application (iOS) • 1) react-native run-ios • 2) open Xcode • 3) Product->Run • 4) command-r to refresh the screen

Launch Application (Android) • 1) adb devices • 2) adb reverse tcp:8081 tcp:8081 • 3) react-native run-android • 4) open Android Studio • 5) relaunch after making file changes

Common Errors (1) • "Could not connect to development server" screen. • "Ensure node server is running - run 'npm start' from React root." • => Open AppDelegate.m in Xcode and replace this line: • jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?pl atform=ios&dev=true"]; • with this line (set the IP according to your machine): • jsCodeLocation = [NSURL URLWithString:@"http://192.168.99.1:8081/index.ios.bundl e?platform=ios&dev=true"];

Common Errors (2) • Error message: • "react native application .... has not been registered" • => Solution: terminate all node processes • Run this command to find/kill processes: kill -9 `ps -ef|grep node |awk -F" " '{print $2}'`

Documentation Links • React Native Android Documentation: • http://facebook.github.io/react-native/docs/running- on-device-android.html#content • React Native iOS Documentation: • http://facebook.github.io/react-native/docs/running- on-device-ios.html#content • React Native playground: • https://rnplay.org/

Angular 2 and React Native • Download the Github repository: http://angular.github.io/react-native-renderer • unzip the file and ‘cd’ into the directory • npm install • gulp init • gulp start.ios OR • gulp start.android

SVG and React Native (1) • cd react-native-svg-master • npm install • two “main” dependencies: D3 and jsdom-jscore Failed at the react-native-svg@0.2.1 postinstall script: 'cd Libraries/ && git clone git@github.com:SVGKit/SVGKit.git'.

SVG and React Native (2) • cd react-native-art-svg-master • npm install • Three “main” dependencies: color, svgpath, and lodash Error: RCTRootView.h' file not found

Other React Native Samples • https://github.com/facebook/react-native • RN samples in the “Examples” directory: • 2048 • Movies • TicTacToe • UIExplorer

React Native Touch Events • topTouchStart: fired as soon a finger touches the element • topTouchMove: fired regularly while the finger moves on the element • topTouchEnd: fired when all fingers leave the screen • topTouchCancel: fired when the touch gesture is cancelled (e.g. when a scroll is triggered) • http://angular.github.io/react-native-renderer/

Gestures with hammer.js • All default gestures are supported: • Pan • Pinch • Press • Rotate • Swipe • Tap (including doubletap) • http://angular.github.io/react-native-renderer/

Miscellaneous Topics • React Native uses Flexbox and CSS • http://moduscreate.com/react-native-layout- system/ • http://browniefed.com/blog/react-native-layout- examples/ • https://github.com/yelled3/react-native-grid- example

Miscellaneous Topics • React Native and the Realm database: • https://realm.io/news/introducing-realm-react-native/ • https://github.com/realm/realm-js • React Native and Swift: • http://moduscreate.com/swift-modules-for-react-native/ • React Native for Web: • https://github.com/necolas/react-native-web • React Native for Desktop: • https://github.com/ptmt/react-native-desktop

Recent/Upcoming Books and Training 1) HTML5 Canvas and CSS3 Graphics (2013) 2) jQuery, CSS3, and HTML5 for Mobile (2013) 3) HTML5 Pocket Primer (2013) 4) jQuery Pocket Primer (2013) 5) HTML5 Mobile Pocket Primer (2014) 6) D3 Pocket Primer (2015) 7) Python Pocket Primer (2015) 8) SVG Pocket Primer (2016) 9) CSS3 Pocket Primer (2016) 10) Angular 2 Pocket Primer (2016)

React nativebeginner1

More Related Content

What's hot

Viewers also liked

Similar to React nativebeginner1

More from Oswald Campesato

Recently uploaded

React nativebeginner1