Hands On: React Native

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!