React Native - An Introduction

Transcript

1. REACT NATIVE BUILD NATIVE MOBILE APPS WITH JAVASCRIPT
2. BRENDAN NEE @BRENDANNEE
3. A way to make phone apps with Javascript and React REACT NATIVE IS…
4. Supports iOS and Android REACT NATIVE IS…
5. Real native apps, not a web view REACT NATIVE IS…
6. An open source* framework created by Facebook REACT NATIVE IS… * with a revocable patent license
7. Used by Airbnb, Facebook, Tesla, Baidu, Uber REACT NATIVE IS…
9. WHAT IS REACT? Declarative Component-based Javascript Library for building user interfaces
10. WHAT IS REACT?
11. WHAT IS REACT? class MyComponent extends React.Component { render() { return <div>Hello World</div>; } } const mountNode = document.getElementById('root'); ReactDOM.render(<MyComponent />, mountNode); REACT EXAMPLE
12. WHAT IS REACT? REACT EXAMPLE
13. const element = <div>Hello World</div>; WHAT IS REACT? JSX Syntax extension to Javascript HTML inside of Javascript Template Language Optional (but suggested)
14. class MyComponent extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } const mountNode = document.getElementById('root'); ReactDOM.render(<MyComponent name="John" />, mountNode); WHAT IS REACT? REACT EXAMPLE - PROPS
15. WHAT IS REACT? REACT EXAMPLE - PROPS
16. ReactDOM.render(<MyComponent name="John" />, mountNode); WHAT IS REACT? REACTDOM Library for working with the DOM DOM-specific methods
17. <div> <span> <p> <h1> <a> WHAT IS REACT? JSX
18. WHAT IS REACT NATIVE?
19. WHAT IS REACT NATIVE? ReactNative instead of ReactDOM <View> <Text> <Image> instead of <div> <span> Supports stylesheets
20. WHAT IS REACT NATIVE? import React from 'react'; import {AppRegistry, View, Text, Button} from 'react-native'; class MyComponent extends React.Component { render() { return ( <View> <Text>Hello world!</Text> <Button title="Submit" /> </View> ); } } AppRegistry.registerComponent('MyComponent', () => MyComponent); REACT NATIVE EXAMPLE
21. WHAT IS REACT NATIVE? REACT NATIVE EXAMPLE
22. WHAT IS REACT NATIVE? REACT NATIVE EXAMPLE import React from 'react'; import { AppRegistry, View, Text, Image } from 'react-native'; class MyComponent extends React.Component { render() { const picture = { uri: 'https://i.imgur.com/b3iDL1u.png' }; return ( <View> <Text>Hello world!</Text> <Image source={picture} style={{width: 200, height: 112}} /> </View> ); } } AppRegistry.registerComponent('MyComponent', () => MyComponent);
23. WHAT IS REACT NATIVE? REACT NATIVE EXAMPLE
24. STYLING REACT NATIVE import React from 'react'; import { AppRegistry, StyleSheet, View, Text } from 'react-native'; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, hello: { fontSize: 20, textAlign: 'center', margin: 10, color: 'red', }, }); class MyComponent extends React.Component { render() { return ( <View style={styles.container}> <Text style={styles.hello}>Hello world!</Text> </View> ); } } AppRegistry.registerComponent('MyComponent', () => MyComponent);
25. STYLING REACT NATIVE
26. MORE NATIVE COMPONENTS class MyComponent extends React.Component { render() { return ( <View style={styles.container}> <Text>Name</Text> <TextInput /> </View> ); } } AppRegistry.registerComponent('MyComponent', () => MyComponent);
27. MORE NATIVE COMPONENTS
28. REACT NATIVE COMPONENTS ActivityIndicatorIOS DatePickerIOS DrawerLayoutAndroid Image ListView MapView Modal Navigator NavigatorIOS PickerIOS Picker ProgressBarAndroid ProgressViewIOS RefreshControl ScrollView SegmentedControlIOS SliderIOS StatusBar Switch TabBarIOS TabBarIOS.Item Text TextInput ToolbarAndroid TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback View ViewPagerAndroid WebView
29. ACTIVITY INDICATOR
30. DATE PICKER
31. LIST VIEW - GRID
32. MAP VIEW
33. MODALS
34. PICKER
35. PROGRESS VIEW
36. SCROLL VIEW
37. SEGMENTED CONTROL
38. STATUS BAR
39. SWIPEABLE LIST VIEW
40. WEB VIEW
41. WRITE ONCE, RUN ANYWHERE
42. WRITE ONCE, RUN ANYWHERE LEARN ONCE, RUN ANYWHERE
43. REACT NATIVE PROJECT STRUCTURE
44. SHARE COMPONENTS
45. PLATFORM SPECIFIC CODE ActivityIndicatorIOS DatePickerIOS NavigatorIOS PickerIOS ProgressViewIOS SegmentedControlIOS SliderIOS TabBarIOS ProgressBarAndroid DrawerLayoutAndroid ViewPagerAndroid
46. NETWORKING fetch('https://mywebsite.com/mydata.json'); fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ firstParam: 'yourValue', secondParam: 'yourOtherValue', }) })
47. COMPONENT LIBRARIES https://github.com/react-native-training/react-native-elements REACT NATIVE ELEMENTS
48. COMPONENT LIBRARIES https://github.com/react-native-material-design/react-native-material-design REACT NATIVE MATERIAL DESIGN
49. COMPONENT LIBRARIES https://nativebase.io/ NATIVE BASE
50. GETTING STARTED npm install -g create-react-native-app create-react-native-app AwesomeProject cd AwesomeProject npm start
51. GETTING STARTED > create-react-native-app AwesomeProject To run your app on iOS: cd /Users/brendannee/Sites/AwesomeProject react-native run-ios - or - Open ios/AwesomeProject.xcodeproj in Xcode Hit the Run button To run your app on Android: cd /Users/brendannee/Sites/AwesomeProject Have an Android emulator running (quickest way to get started), or a device connected react-native run-android
52. DEVELOPING IN REACT NATIVE ⌘D
53. DEBUGGING IN REACT NATIVE
54. APPLE TV React Native iOS applications "just work" on tvOS
55. THE END Brendan Nee @BRENDANNEE