Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React Native — Webnesday #9
Robert Vogt
November 09, 2016
Programming
1
220
React Native — Webnesday #9
Slides for my talk about React Native at Webnesday #9 in St. Gallen.
Robert Vogt
November 09, 2016
Tweet
Share
More Decks by Robert Vogt
See All by Robert Vogt
JavaScript - From DHTML to a Multi-Paradigm Language
deniaz
0
190
Hands On: React Native
deniaz
0
170
ADR Lightning Talk
deniaz
0
180
Other Decks in Programming
See All in Programming
UI State Modeling 어떤게 좋을까?
laco2951
1
220
人類には難しいZynqで組み込みRust
ikemori
0
490
実録mruby組み込み体験
coe401_
0
100
Learning DDD輪読会#4 / Learning DDD Book Club #4
suzushin54
1
120
mrubyを1300円のボードで動かそう
yuuu
0
180
SRE NEXT 2022: Sensible Incident Management for Software Startups
takanabe
2
260
You CANt teach an old dog new tricks
michaelbukachi
0
110
競プロへの誘 -いざな-
u76ner
0
340
近況PHP / PHP in now a days
uzulla
4
1.6k
機能横断型チームにおける技術改善
takeshiakutsu
3
440
Monadic Java
mariofusco
4
260
Jakarta EE 10 is Coming Your Way
ivargrimstad
0
2.2k
Featured
See All Featured
What the flash - Photography Introduction
edds
61
9.9k
Art, The Web, and Tiny UX
lynnandtonic
280
17k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Web Components: a chance to create the future
zenorocha
303
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Building Adaptive Systems
keathley
25
1.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.3k
Embracing the Ebb and Flow
colly
73
3.3k
GraphQLの誤解/rethinking-graphql
sonatard
24
6.2k
Six Lessons from altMBA
skipperchong
14
1.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Transcript
React Native React Native #webnesday — November 2016
Robert Vogt Robert Vogt Software Engineer at smartive.ch @_deniaz
1. History 2. React 3. React Native 4. Live Example
None
$str = '<ul>'; foreach ($talks as $talk) { $str +=
'<li>' . $talk->name . '</ li>'; } $str += '</ul>'; 1. Facebook in 2004 (PHP)
None
$content = <ul />; foreach ($talks as $talk) { $content->appendChild(<li>{$talk-
>name} />); } 2. Facebook in 2010 (XHP)
$talkList = <TalkList />; foreach ($talks as $talk) { $talkList->appendChild(<Talk
talk={$talk} />); } 3. Facebook in 2010 (XHP)
«Welp, I’m going to take XHP to the browser within
six months.» — Jordan Walke, Facebook / ReactJS
None
var content = ( <TalkList>{talks.map(talk => <Talk talk={talk} /> )}
</TalkList> ); 4. Facebook in 2013 (ReactJS)
UI = f (data)
function f(name) { var div = document.createElement('div'); var p =
document.createElement('p'); p.textContent = 'Hello ' + name ? name : 'World'; div.appendChild(p); return div; } var node = f('Webnesday'); document.getElementById('my- app').replaceWith(node);
None
$(document).on('message.new', (e, data) => { let $msg = $('.messages'); $msg.prepend(`<li>New:
${data.message}</li>`); }); 1. jQuery (Imperative)
$(document).on('message.new', () => { let $count = $('.notifications__count'); let currentCount
= parseInt($count.text(), 10); $count.text(++currentCount); }); 2. jQuery (Imperative)
const state = { unread: 1, messages: [{ id: 43,
body: 'Hallo!', sender: 'Alice' }, { id: 42, body: 'Hoi :)', sender: 'Bob' }] }; 1. ReactJS (Declarative)
class TalkList extends React.Component { render () { return (
<ul className='talk-list'> {props.messages.map((message) => ( <li>{message.sender} says: {message.body}</li> )} </ul> ); } } <TalkList messages={state.message} /> 2. ReactJS (Declarative)
class Counter extends React.Component { render () { const {
count } = this.props; return ( <span className='counter'>{count}</span> ); } } <Counter count={state.unread} /> 3. ReactJS (Declarative)
const state = { unread: 2, messages: [{ id: 44,
body: 'Wie gehts!', sender: 'Alice' }, { id: 43, body: 'Hallo!', sender: Alice' }] }; 4. ReactJS (Declarative)
«It turns out, ‘good enough’ wasn’t good enough.» — Mark
Zuckerberg, 2012
react-dom (DOM) react www.smartive.ch
react-native (UIKit) react smartive App
class Hello extends React.Component { constructor(props) { super(props); this.state =
{ name: 'World' }; } render() { return ( <div className="hello"> <input ref={(c) => this._input = c} type="text" placeholder="Your Name" onChange={() => this.setState({ name: this._input.value })} /> <p>Hello {this.state.name}!</p> </div> ); } }
class Hello extends React.Component { constructor(props) { super(props); this.state =
{ name: 'World' }; } render() { return ( <View> <TextInput ref={(c) => this._input = c} placeholder="Your Name" onChange={() => this.setState({ name: this._input.value })} /> <Text>Hello {this.state.name}!</Text> </View> ); } }
<Button title="My Button" onPress={onButtonPressed} />
Components ActivityIndicator Button DatePickerIOS DrawerLayoutAndroid Image ListView MapView Modal Navigator
Picker ProgressBarAndroid ProgressViewIOS RefreshControl ScrollView Slider SnapshotViewIOS StatusBar Switch TabBarIOS Text TextInput TouchableHighlight TouchableNativeFeedback TouchableOpacity TouchableWithoutFeedback View WebView APIS Alert Animated AppState AsyncStorage BackAndroid CameraRoll Clipboard Dimensions Geolocation ImageEditor ImageStore Keyboard Linking NetInfo PanResponder PushNotificationIOS Settings StyleSheet ToastAndroid Vibration
React Native Community Quality code from the React Native Community
github.com/react-native-community react-native-svg react-native-elements react-native-blur react-native-tab-view react-native-video react-native-navbar react-native-side-menu
JS Runtime React Native JS API Custom App Code Android
SDK Custom View Manager iOS SDK RN Bridge
Native Bridge JavaScript 1 2 3 4 5 6 8
7 Event (touch, timer, networks, …) Collect data and notify JS Serialized payload Process event Call native methods Update UI if needed Process commands Serialized response
None
$ brew install node $ brew install watchman $ npm
install -g react-native Xcode AND/OR Gradle + Android Emulator
! A Word Of Warning Fun on OS X macOS,
not so much on Linux / Windows.
.babelrc android index.android.j s index.ios.js ios node_modules package.json src !""
app.js $ react-native init WebnesdayApp $ cd WebnesdayApp $ react-native run-ios
None
Cheers Cheers @_deniaz