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
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!