SlideShare a Scribd company logo

React nativebeginner1

•Download as PPTX, PDF•
•
Oswald Campesato
Oswald Campesato

This document provides an introduction and overview of React Native, including what it is, how it works, and how to set it up for both iOS and Android development. It discusses some key differences between React Native and traditional web development, provides code samples and explanations of common React Native components and patterns, and outlines steps for creating a new React Native project. It also addresses common errors and links to additional documentation resources.

Related slideshows

JavaFX Versus HTML5 - JavaOne 2014
JavaFX Versus HTML5 - JavaOne 2014JavaFX Versus HTML5 - JavaOne 2014
JavaFX Versus HTML5 - JavaOne 2014
 
Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5Moving to the Client - JavaFX and HTML5
Moving to the Client - JavaFX and HTML5
 
Moving to the Client - JavaFX and HTML5 (PowerPoint Version)
Moving to the Client - JavaFX and HTML5 (PowerPoint Version)Moving to the Client - JavaFX and HTML5 (PowerPoint Version)
Moving to the Client - JavaFX and HTML5 (PowerPoint Version)
 
1 of 31
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)

More Related Content

React nativebeginner1

  • 1. React Native for Beginners #1 Oswald Campesato Consultant/Training: www.iquarkt.com ocampesato@yahoo.com
  • 2. 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
  • 3. What is React Native? • Cross platform mobile development • Based on React • Created by Facebook (2015) • Built-in components are similar to React
  • 4. 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}>
  • 5. Sample import Statement in RN • import React, { • AppRegistry, • Component, • StyleSheet, • Text, • TextInput, • View, • Image, • AsyncStorage • } from 'react-native';
  • 6. 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;
  • 7. 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);
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. Creating a New RN Project (2) • Contents of new project: • android • index.android.js • index.ios.js • ios • node_modules • package.json
  • 14. 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" • } • }
  • 15. 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;
  • 16. 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> • ); • } • });
  • 17. 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);
  • 18. Launch Application (iOS) • 1) react-native run-ios • 2) open Xcode • 3) Product->Run • 4) command-r to refresh the screen
  • 19. 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
  • 20. 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"];
  • 21. 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}'`
  • 22. 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/
  • 23. 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
  • 24. 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'.
  • 25. 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
  • 26. Other React Native Samples • https://github.com/facebook/react-native • RN samples in the “Examples” directory: • 2048 • Movies • TicTacToe • UIExplorer
  • 27. 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/
  • 28. Gestures with hammer.js • All default gestures are supported: • Pan • Pinch • Press • Rotate • Swipe • Tap (including doubletap) • http://angular.github.io/react-native-renderer/
  • 29. 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
  • 30. 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
  • 31. 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)