Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Native - An Introduction

Brendan Nee
September 23, 2017

React Native - An Introduction

Brendan Nee

September 23, 2017
Tweet

More Decks by Brendan Nee

Other Decks in Technology

Transcript

  1. REACT NATIVE
    BUILD NATIVE MOBILE APPS WITH JAVASCRIPT

    View Slide

  2. BRENDAN NEE
    @BRENDANNEE

    View Slide

  3. A way to make phone apps
    with Javascript and React
    REACT NATIVE IS…

    View Slide

  4. Supports iOS and Android
    REACT NATIVE IS…

    View Slide

  5. Real native apps, not a web
    view
    REACT NATIVE IS…

    View Slide

  6. An open source* framework
    created by Facebook
    REACT NATIVE IS…
    * with a revocable patent license

    View Slide

  7. Used by Airbnb, Facebook,
    Tesla, Baidu, Uber
    REACT NATIVE IS…

    View Slide

  8. View Slide

  9. WHAT IS REACT?
    Declarative

    Component-based

    Javascript

    Library for building user interfaces

    View Slide

  10. WHAT IS REACT?

    View Slide

  11. WHAT IS REACT?
    class MyComponent extends React.Component {
    render() {
    return Hello World;
    }
    }
    const mountNode = document.getElementById('root');
    ReactDOM.render(, mountNode);
    REACT EXAMPLE

    View Slide

  12. WHAT IS REACT?
    REACT EXAMPLE

    View Slide

  13. const element = Hello World;
    WHAT IS REACT?
    JSX
    Syntax extension to Javascript

    HTML inside of Javascript

    Template Language

    Optional (but suggested)

    View Slide

  14. class MyComponent extends React.Component {
    render() {
    return Hello {this.props.name};
    }
    }
    const mountNode = document.getElementById('root');
    ReactDOM.render(, mountNode);
    WHAT IS REACT?
    REACT EXAMPLE - PROPS

    View Slide

  15. WHAT IS REACT?
    REACT EXAMPLE - PROPS

    View Slide

  16. ReactDOM.render(, mountNode);
    WHAT IS REACT?
    REACTDOM
    Library for working with the DOM

    DOM-specific methods

    View Slide






  17. WHAT IS REACT?
    JSX

    View Slide

  18. WHAT IS REACT NATIVE?

    View Slide

  19. WHAT IS REACT NATIVE?
    ReactNative instead of ReactDOM

    instead of

    Supports stylesheets

    View Slide

  20. WHAT IS REACT NATIVE?
    import React from 'react';
    import {AppRegistry, View, Text, Button} from 'react-native';
    class MyComponent extends React.Component {
    render() {
    return (

    Hello world!


    );
    }
    }
    AppRegistry.registerComponent('MyComponent', () => MyComponent);
    REACT NATIVE EXAMPLE

    View Slide

  21. WHAT IS REACT NATIVE?
    REACT NATIVE EXAMPLE

    View Slide

  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 (

    Hello world!
    source={picture}
    style={{width: 200, height: 112}}
    />

    );
    }
    }
    AppRegistry.registerComponent('MyComponent', () => MyComponent);

    View Slide

  23. WHAT IS REACT NATIVE?
    REACT NATIVE EXAMPLE

    View Slide

  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 (

    Hello world!

    );
    }
    }
    AppRegistry.registerComponent('MyComponent', () => MyComponent);

    View Slide

  25. STYLING REACT NATIVE

    View Slide

  26. MORE NATIVE COMPONENTS
    class MyComponent extends React.Component {
    render() {
    return (

    Name


    );
    }
    }
    AppRegistry.registerComponent('MyComponent', () => MyComponent);

    View Slide

  27. MORE NATIVE COMPONENTS

    View Slide

  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

    View Slide

  29. ACTIVITY INDICATOR

    View Slide

  30. DATE PICKER

    View Slide

  31. LIST VIEW - GRID

    View Slide

  32. MAP VIEW

    View Slide

  33. MODALS

    View Slide

  34. PICKER

    View Slide

  35. PROGRESS VIEW

    View Slide

  36. SCROLL VIEW

    View Slide

  37. SEGMENTED CONTROL

    View Slide

  38. STATUS BAR

    View Slide

  39. SWIPEABLE LIST VIEW

    View Slide

  40. WEB VIEW

    View Slide

  41. WRITE ONCE, RUN ANYWHERE

    View Slide

  42. WRITE ONCE, RUN ANYWHERE
    LEARN ONCE, RUN ANYWHERE

    View Slide

  43. REACT NATIVE PROJECT STRUCTURE

    View Slide

  44. SHARE COMPONENTS

    View Slide

  45. PLATFORM SPECIFIC CODE
    ActivityIndicatorIOS
    DatePickerIOS
    NavigatorIOS
    PickerIOS
    ProgressViewIOS
    SegmentedControlIOS
    SliderIOS
    TabBarIOS
    ProgressBarAndroid
    DrawerLayoutAndroid
    ViewPagerAndroid

    View Slide

  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',
    })
    })

    View Slide

  47. COMPONENT LIBRARIES
    https://github.com/react-native-training/react-native-elements
    REACT NATIVE ELEMENTS

    View Slide

  48. COMPONENT LIBRARIES
    https://github.com/react-native-material-design/react-native-material-design
    REACT NATIVE MATERIAL DESIGN

    View Slide

  49. COMPONENT LIBRARIES
    https://nativebase.io/
    NATIVE BASE

    View Slide

  50. GETTING STARTED
    npm install -g create-react-native-app
    create-react-native-app AwesomeProject
    cd AwesomeProject
    npm start

    View Slide

  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

    View Slide

  52. DEVELOPING IN REACT NATIVE
    ⌘D

    View Slide

  53. DEBUGGING IN REACT NATIVE

    View Slide

  54. APPLE TV
    React Native iOS applications "just work" on tvOS

    View Slide

  55. THE END
    Brendan Nee
    @BRENDANNEE

    View Slide