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…

8. None

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