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
210
Hands On: React Native
Robert Vogt
September 23, 2016
Tweet
Share
More Decks by Robert Vogt
See All by Robert Vogt
React Native — Webnesday #9
deniaz
1
270
JavaScript - From DHTML to a Multi-Paradigm Language
deniaz
0
230
ADR Lightning Talk
deniaz
0
230
Other Decks in Technology
See All in Technology
CES_2023_FleetWise_demo.pdf
sparkgene
0
120
CUEとKubernetesカスタムオペレータを用いた新しいネットワークコントローラをつくってみた
hrk091
1
290
ChatGPT for Hacking
anugrahsr
0
4.5k
IoT から見る AWS re:invent 2022 ― AWSのIoTの歴史を添えて/Point of view the AWS re:invent 2022 with IoT - with a history of IoT in AWS
ma2shita
0
280
API連携に伴う規制と対応 / Regulations and responses to API linkage
moneyforward
0
160
OpenShift.Run2023_create-aro-with-terraform
ishiitaiki20fixer
1
330
SmartHRからOktaへのSCIM連携で作り出すHRドリブンのアカウント管理
jousysmiler
1
120
AI Builderについて
miyakemito
1
940
OCI技術資料 : ロード・バランサー 詳細 / Load Balancer 200
ocise
2
7.2k
OpenShiftクラスターのアップグレード自動化への挑戦! / OpenShift Cluster Upgrade Automation
skitamura7446
0
180
地方自治体業務あるある ーアナログ最適化編-
y150saya
1
270
データ分析基盤の要件分析の話(202201_JEDAI)
yabooun
0
280
Featured
See All Featured
Happy Clients
brianwarren
90
5.8k
A Philosophy of Restraint
colly
193
15k
The Invisible Customer
myddelton
113
12k
A designer walks into a library…
pauljervisheath
199
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
32
6.7k
Building Your Own Lightsaber
phodgson
96
4.9k
Raft: Consensus for Rubyists
vanstee
130
5.7k
Why Our Code Smells
bkeepers
PRO
326
55k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
Automating Front-end Workflow
addyosmani
1351
200k
Visualization
eitanlees
128
12k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
44
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!