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
Hands On: React Native
Search
Robert Vogt
September 23, 2016
Technology
0
330
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
380
JavaScript - From DHTML to a Multi-Paradigm Language
deniaz
0
370
ADR Lightning Talk
deniaz
0
360
Other Decks in Technology
See All in Technology
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
運用改善、不都合な真実 / 20240722-ssmjp-kaizen
opelab
17
8.2k
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
AWSでRAGを作る法方
sonoda_mj
1
140
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
年間一億円削減した時系列データベースのアーキテクチャ改善~不確実性の高いプロジェクトへの挑戦~
lycorptech_jp
PRO
3
2.9k
GoとアクターモデルでES+CQRSを実践! / proto_actor_es_cqrs
ytake
1
160
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
地理情報とAPIのトレンド
nagix
0
160
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
800
Featured
See All Featured
Debugging Ruby Performance
tmm1
71
11k
The Cult of Friendly URLs
andyhume
75
5.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Gamification - CAS2011
davidbonilla
78
4.9k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
How STYLIGHT went responsive
nonsquared
93
5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Code Review Best Practice
trishagee
58
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
What the flash - Photography Introduction
edds
65
11k
Clear Off the Table
cherdarchuk
89
320k
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!