Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Hands On: React Native
Robert Vogt
September 23, 2016
Technology
0
82
Hands On: React Native
Robert Vogt
September 23, 2016
Tweet
Share
More Decks by Robert Vogt
See All by Robert Vogt
deniaz
1
130
deniaz
0
93
deniaz
0
83
Other Decks in Technology
See All in Technology
armaniacs
0
400
lemiorhan
0
220
no24oka
0
100
pemugi
0
120
kaori_cho
1
310
pakio
0
140
simosako
1
150
koukyo1994
3
560
mot_ai_tech
0
120
tosh2230
3
330
iwashi
1
210
free_world21
0
110
Featured
See All Featured
maltzj
502
36k
michaelherold
225
8.5k
carmenhchung
31
1.5k
vanstee
117
4.9k
zenorocha
296
40k
garrettdimon
288
110k
keathley
20
710
chriscoyier
145
20k
orderedlist
PRO
328
36k
jonrohan
1021
380k
sachag
267
17k
colly
188
14k
Transcript
Hands On React Native Robert Vogt #NCamp16
Robert Vogt Software Engineer from & in Sankt Gallen @_deniaz
React Native
Efficient Re-rendering through Virtual DOM
Rendering Components with JSX
class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>
} }
const HelloMessage = (props) => ( <div>Hello {props.name}</div> );
const HelloMessage = (props) => ( <View> <Text> Hello {props.name}
</Text> </View> );
<HelloMessage name=”Robert” />
How JavaScript can be Native
Store View Action Action Dispatcher
ES6 / ES2015 babeljs.io/docs/learn-es2015
None
None
An exemplary Project Structure
.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
git.io/v6bSK git.io/v6bSK
1 1 The Talks ❏ Geolocation ❏ HTTP 13:50 -
14:10
2 2 The Looks ❏ Layouting ❏ Styling 14:10 -
14:20
3 3 The Brain ❏ Persistent Storage 14:20 - 14:40
4 4 The Personality ❏ Navigation ❏ Routing ❏ Storage
14:40 - 15:00
5 5 The Package ❏ Deployment 15:00 - 15:20
That’s it!