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
410
Other Decks in Programming
See All in Programming
Namespace and Its Future
tagomoris
6
710
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
540
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
Cache Me If You Can
ryunen344
2
4k
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
460
Deep Dive into Kotlin Flow
jmatsu
1
370
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
Featured
See All Featured
Facilitating Awesome Meetings
lara
55
6.5k
RailsConf 2023
tenderlove
30
1.2k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
It's Worth the Effort
3n
187
28k
Typedesign – Prime Four
hannesfritz
42
2.8k
Automating Front-end Workflow
addyosmani
1370
200k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Code Reviewing Like a Champion
maltzj
525
40k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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