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

Hands On: React Native

Robert Vogt
September 23, 2016

Hands On: React Native

Robert Vogt

September 23, 2016
Tweet

More Decks by Robert Vogt

Other Decks in Technology

Transcript

  1. Hands On
    React Native
    Robert Vogt
    #NCamp16

    View Slide

  2. Robert Vogt
    Software Engineer
    from & in Sankt Gallen
    @_deniaz

    View Slide

  3. React Native

    View Slide

  4. Efficient Re-rendering
    through
    Virtual DOM

    View Slide

  5. Rendering Components
    with
    JSX

    View Slide

  6. class HelloMessage extends React.Component {
    render() {
    return Hello {this.props.name}
    }
    }

    View Slide

  7. const HelloMessage = (props) => (
    Hello {props.name}
    );

    View Slide

  8. const HelloMessage = (props) => (


    Hello {props.name}


    );

    View Slide


  9. View Slide

  10. How JavaScript
    can be
    Native

    View Slide

  11. Store View
    Action
    Action Dispatcher

    View Slide

  12. ES6 / ES2015
    babeljs.io/docs/learn-es2015

    View Slide

  13. View Slide

  14. View Slide

  15. An exemplary
    Project Structure

    View Slide

  16. .babelrc
    android
    index.android.js
    index.ios.js
    ios
    node_modules
    package.json
    src
    ├── app.js
    ├── infrastructure
    │ ├── router.js
    │ ├── store.js
    └── ui
    ├── components
    │ └── scenes
    │ └── home.js
    └── reducers
    ├── update.js
    ├── actions

    View Slide

  17. git.io/v6bSK
    git.io/v6bSK

    View Slide

  18. 1
    1
    The Talks
    ❏ Geolocation
    ❏ HTTP
    13:50 - 14:10

    View Slide

  19. 2
    2
    The Looks
    ❏ Layouting
    ❏ Styling
    14:10 - 14:20

    View Slide

  20. 3
    3
    The Brain
    ❏ Persistent Storage
    14:20 - 14:40

    View Slide

  21. 4
    4
    The Personality
    ❏ Navigation
    ❏ Routing
    ❏ Storage
    14:40 - 15:00

    View Slide

  22. 5
    5
    The Package
    ❏ Deployment
    15:00 - 15:20

    View Slide

  23. That’s it!

    View Slide