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 full-size slide

  2. BRENDAN NEE
    @BRENDANNEE

    View full-size slide

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

    View full-size slide

  4. Supports iOS and Android
    REACT NATIVE IS…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. WHAT IS REACT?
    Declarative

    Component-based

    Javascript

    Library for building user interfaces

    View full-size slide

  9. WHAT IS REACT?

    View full-size slide

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

    View full-size slide

  11. WHAT IS REACT?
    REACT EXAMPLE

    View full-size slide

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

    HTML inside of Javascript

    Template Language

    Optional (but suggested)

    View full-size slide

  13. 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 full-size slide

  14. WHAT IS REACT?
    REACT EXAMPLE - PROPS

    View full-size slide

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

    DOM-specific methods

    View full-size slide






  16. WHAT IS REACT?
    JSX

    View full-size slide

  17. WHAT IS REACT NATIVE?

    View full-size slide

  18. WHAT IS REACT NATIVE?
    ReactNative instead of ReactDOM

    instead of

    Supports stylesheets

    View full-size slide

  19. 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 full-size slide

  20. WHAT IS REACT NATIVE?
    REACT NATIVE EXAMPLE

    View full-size slide

  21. 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 full-size slide

  22. WHAT IS REACT NATIVE?
    REACT NATIVE EXAMPLE

    View full-size slide

  23. 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 full-size slide

  24. STYLING REACT NATIVE

    View full-size slide

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

    Name


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

    View full-size slide

  26. MORE NATIVE COMPONENTS

    View full-size slide

  27. 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 full-size slide

  28. ACTIVITY INDICATOR

    View full-size slide

  29. LIST VIEW - GRID

    View full-size slide

  30. PROGRESS VIEW

    View full-size slide

  31. SEGMENTED CONTROL

    View full-size slide

  32. SWIPEABLE LIST VIEW

    View full-size slide

  33. WRITE ONCE, RUN ANYWHERE

    View full-size slide

  34. WRITE ONCE, RUN ANYWHERE
    LEARN ONCE, RUN ANYWHERE

    View full-size slide

  35. REACT NATIVE PROJECT STRUCTURE

    View full-size slide

  36. SHARE COMPONENTS

    View full-size slide

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

    View full-size slide

  38. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. 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 full-size slide

  44. DEVELOPING IN REACT NATIVE
    ⌘D

    View full-size slide

  45. DEBUGGING IN REACT NATIVE

    View full-size slide

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

    View full-size slide

  47. THE END
    Brendan Nee
    @BRENDANNEE

    View full-size slide