React Native - An Introduction

C698e3c3733ee56c41eb985eeaed91e8?s=47 Brendan Nee
September 23, 2017

React Native - An Introduction

C698e3c3733ee56c41eb985eeaed91e8?s=128

Brendan Nee

September 23, 2017
Tweet

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