Hands On: React Native

Transcript

1. 1.

   Hands On React Native Robert Vogt #NCamp16

2. 2.

   Robert Vogt Software Engineer from & in Sankt Gallen @_deniaz

3. 3.

   React Native

4. 4.

   Efficient Re-rendering through Virtual DOM

5. 5.

   Rendering Components with JSX

6. 6.

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

   } }
7. 7.

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

8. 8.

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

   </Text> </View> );
9. 9.

   <HelloMessage name=”Robert” />

10. 10.

    How JavaScript can be Native

11. 11.

    Store View Action Action Dispatcher

12. 12.

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

13. 13.

    None
14. 14.

    None
15. 15.

    An exemplary Project Structure

16. 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. 17.

    git.io/v6bSK git.io/v6bSK

18. 18.

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

    14:10
19. 19.

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

    14:20
20. 20.

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

21. 21.

    4 4 The Personality ❏ Navigation ❏ Routing ❏ Storage

    14:40 - 15:00
22. 22.

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

23. 23.

    That’s it!