React Native

Transcript

1. REACT NATIVE LEE SING JIE
2. CREATED BY FACEBOOK
3. – https://facebook.github.io/react-native/ “The focus of React Native is on developer efficiency across all the platforms you care about — learn once, write anywhere.”
4. PROBLEMS WITH NATIVE • Slow development cycle • Slow deployment cycle • Different API for same thing • Separate platform teams
5. WEB / CROSS-PLATFORM • Poor Performance • Non-Native Feel • Limited feature support • Hackish
8. REACT NATIVE • Slow development cycle • Slow deployment cycle • Different API for same thing • Separate platform teams • Instant Reload • OTA Updates • Common APIs • Shared Skill set
9. ADVANTAGES • CMD+R • Javascript! Learn once, write anywhere • Functional UI • Flexbox layout • Highly extensible
10. JAVASCRIPT import React, { AppRegistry, Component, StyleSheet, Text, View } from 'react-native'; class EmmaLee extends Component { render() { return ( React.createElement(Text, {style: styles.welcome}, “Welcome to React Native!”) ); } } var styles = StyleSheet.create({ welcome: { fontSize: 30,textAlign: ‘center’ }
 }); AppRegistry.registerComponent('EmmaLee', () => EmmaLee);
11. JSX import React, { AppRegistry, Component, StyleSheet, Text, View } from 'react-native'; class EmmaLee extends Component { render() { return ( <Text style={styles.welcome}> Welcome to React Native! </Text> ); } } var styles = StyleSheet.create({ welcome: { fontSize: 30,textAlign: ‘center’ }
 }); AppRegistry.registerComponent('EmmaLee', () => EmmaLee);
12. ASYNC EXECUTION JavaScript Thread Main Thread Shadow Thread Cache Thread
13. ASYNC EXECUTION
14. FLEXBOX LAYOUT • flexDirection • justifyContent • alignItems • flex • flexWrap
15. FUNCTIONAL UI import React, { AppRegistry, Component, StyleSheet, Text, View } from 'react-native'; class EmmaLee extends Component { render() { return ( <Text style={styles.welcome}> Welcome to React Native! </Text> ); } } var styles = StyleSheet.create({ welcome: { fontSize: 30,textAlign: ‘center’ }
 }); AppRegistry.registerComponent('EmmaLee', () => EmmaLee);
16. FUNCTIONAL UI this.state this.state.text2 this.state.text1 render() { return ( <View style={styles.container}> <Text style={styles.text}>{this.state.text1}</Text> <Image style={styles.image} source={{uri: "some_url"}}/> <Text style={styles.text}>{this.state.text2}</Text> </View> ); }
17. FUNCTIONAL UI this.state I You constructor(props) { super(props); this.state = { text1: "I", text2: "You", }; }
18. FUNCTIONAL UI this.state onSomeEvent() { this.setState({ text1: "Vincent Nguyen", text2: "Omer Iqbal" }) } Vincent Nguyen Omer Iqbal
19. LET'S BUILD AN APP
20. EXTENSIBLE • Native UI Components • Native Modules
21. NATIVE UI COMPONENTS // RCTMapManager.m #import <MapKit/MapKit.h> #import "RCTViewManager.h" @interface RCTMapManager : RCTViewManager @end @implementation RCTMapManager RCT_EXPORT_MODULE() - (UIView *)view { return [[MKMapView alloc] init]; } @end import { requireNativeComponent } from 'react-native'; module.exports = requireNativeComponent('RCTMap', null); Objective-C Javascript
22. NATIVE UI COMPONENTS
23. DEMO
24. NATIVE MODULES // CalendarManager.h #import "RCTBridgeModule.h" @interface CalendarManager : NSObject <RCTBridgeModule> @end // CalendarManager.m @implementation CalendarManager RCT_EXPORT_MODULE(); RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location) { NSLog(@"Pretending to create an event %@ at %@", name, location); } @end import { NativeModules } from 'react-native'; var CalendarManager = NativeModules.CalendarManager; CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey'); Objective-C Javascript
25. NATIVE MODULES
26. DEMO
27. OTA UPDATE "react-native bundle --entry-file index.ios.js -- bundle-output ios.bundle --dev false"
28. DEMO
29. –Chai Haoqiang “I took only two hours to do Shopee page using React Native”
31. QUESTIONS?
32. Credits: - http://www.slideshare.net/tlv-ios-dev/pieter-de-baets-an-introduction-to-react-native - https://facebook.github.io/react-native/docs - https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties