Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native — Webnesday #9
Search
Robert Vogt
November 09, 2016
Programming
1
420
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
410
Hands On: React Native
deniaz
0
370
ADR Lightning Talk
deniaz
0
400
Other Decks in Programming
See All in Programming
#QiitaBash MCPのセキュリティ
ryosukedtomita
0
350
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
130
20250613-SSKMvol.15
diostray
0
100
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
48
32k
Bytecode Manipulation 으로 생산성 높이기
bigstark
2
390
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
150
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
510
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
300
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
270
CursorはMCPを使った方が良いぞ
taigakono
1
200
Goで作る、開発・CI環境
sin392
0
170
XP, Testing and ninja testing
m_seki
3
220
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Building Adaptive Systems
keathley
43
2.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
BBQ
matthewcrist
89
9.7k
Optimizing for Happiness
mojombo
379
70k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
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