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
270
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
230
Hands On: React Native
deniaz
0
210
ADR Lightning Talk
deniaz
0
230
Other Decks in Programming
See All in Programming
存在しないアセットへの参照と 未公開アセットでのネタバレに どう立ち向かうか / How to prevent missing assets and spoilers by assets
orgachem
0
120
tidy_rpart
bk_18
0
610
Listかもしれない
irof
1
280
子育てとEMと転職と
_atsushisakai
1
420
PHP でガチの電卓を作る
memory1994
PRO
1
110
データドリブンな組織の不正検知
fkubota
0
280
和暦を正しく扱うための暦の話
nagise
10
6.5k
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
570
量子コンピュータ時代のプログラミングセミナー / 20230119_Amplify_seminar _shift_optimization
fixstars
0
190
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
610
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
0
360
10年以上続くプロダクトの フロントエンド刷新プロジェクトのふりかえり
yotahada3
2
340
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
14k
Typedesign – Prime Four
hannesfritz
34
1.5k
Six Lessons from altMBA
skipperchong
15
2.3k
Gamification - CAS2011
davidbonilla
75
4.1k
Music & Morning Musume
bryan
37
4.6k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.5k
For a Future-Friendly Web
brad_frost
166
7.8k
Code Reviewing Like a Champion
maltzj
508
38k
Designing the Hi-DPI Web
ddemaree
273
32k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
2
400
Embracing the Ebb and Flow
colly
75
3.6k
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