Hands On: React Native

13e697fec58c64352ac63984db062cdf?s=47 Robert Vogt
September 23, 2016

Hands On: React Native

13e697fec58c64352ac63984db062cdf?s=128

Robert Vogt

September 23, 2016
Tweet

Transcript

  1. Hands On React Native Robert Vogt #NCamp16

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

  3. React Native

  4. Efficient Re-rendering through Virtual DOM

  5. Rendering Components with JSX

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

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

  8. const HelloMessage = (props) => ( <View> <Text> Hello {props.name}

    </Text> </View> );
  9. <HelloMessage name=”Robert” />

  10. How JavaScript can be Native

  11. Store View Action Action Dispatcher

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

  13. None
  14. None
  15. An exemplary Project Structure

  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
  17. git.io/v6bSK git.io/v6bSK

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

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

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

  21. 4 4 The Personality ❏ Navigation ❏ Routing ❏ Storage

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

  23. That’s it!