Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React vs React-Native

Jesse Wolgamott
August 17, 2017
Programming
0
52

React vs React-Native

Newbiew/Beginniner friendly exploration into what is similar and what is different in react-native

Jesse Wolgamott

August 17, 2017
Tweet

More Decks by Jesse Wolgamott

See All by Jesse Wolgamott
What is an API
jwo
0
100
DIY Rails Authentication
jwo
0
160
ActionCable - For Not Another Chat App
jwo
3
1k
SlackBot.rb - Create You a Slack Bot
jwo
1
910
react-rails: an isomorphic match made in heaven
jwo
0
880
Docker - next big thing
jwo
0
550
Ruby 2.1 Overview
jwo
0
570
Rails 4: Appetizers
jwo
1
590
The Long Ball: Upgrading Rails from 1.2 -> 4.0
jwo
2
180

Other Decks in Programming

See All in Programming
Makuakeの認証基盤とRe-Architectureチーム
bmf_san
0
640
Swift Observation
shiz
4
290
WordPress（再）入門 - 基礎知識・環境編
oleindesign
1
140
エンジニア向け会社紹介資料/engineer-recruiting-pitch
xmile
PRO
0
120
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
0
450
How to Fight Production Incidents?
asatarin
0
230
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
230
Next.js 13 Layout / Streaming SSR 仕組み解説
sumiren
0
150
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
630
[2023년 1월 세미나] 데이터 분석가 되면 어떤 일을 하나요?
datarian
0
650
Prácticas de Seguridad en Kubernetes
pablokbs
0
130
良質な技術記事を量産する秘訣 / #MeetsPro
jnchito
16
4.8k

Featured

See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
Ruby is Unlike a Banana
tanoku
93
9.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
850
YesSQL, Process and Tooling at Scale
rocio
159
12k
Build your cross-platform service in a week with App Engine
jlugia
221
17k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
197
10k
Building Applications with DynamoDB
mza
85
5k
Keith and Marios Guide to Fast Websites
keithpitt
407
21k
Code Review Best Practice
trishagee
50
11k
Bootstrapping a Software Product
garrettdimon
299
110k
The Web Native Designer (August 2011)
paulrobertlloyd
76
2.2k

Transcript

  1. React vs React-Native by Jesse Wolgamott (@jwo) for Houston React

    Meetup - Aug 17, 2017

  2. What is React Native?

  3. Mobile Apps in React iPhone / iPad / AppleTV Android

    phones / tablets

  4. React Native was created by Facebook

  5. Both iOS and Android with one codebase* *ish

  6. Is it Native? React Native: both JS and native code

  7. Is it Native? JS runs on virtual machine on the

    mobile device and communicates with the native code

  8. Similarities

  9. Rendering React React-Native Editor Atom Atom Language JSX JSX Toolset

    WebPack WebPack Metaphor Components Components Testing Jest Jest Linter Prettier Prettier

  10. Differences

  11. Rendering HTML Native <div> <View> text <Text>

  12. Native Code Geolocation Camera in-app-purchases

  13. Deployment HTML Native Public Server App Store

  14. Dev Flow

  15. Easy, Fun 1. create-react-native-app 2. use Echo App to run

    on mobile device 3. Eject 4. Build and Deploy

  16. Hard, :( 1. create-react-native-app 2. Eject 3. Integrate with mobile

    app 4. Run on mobile device or simular 5. Build and Deploy

  17. Layouts 1. Use Flexbox 2. Get Better At Flexbox 3.

    GOTO 2

  18. Navigation 1. React-Router (my perferred) 2. react-native-router- ux

  19. State 1. Redux (my perferred) 2. react-native-router- ux

  20. Resources http://facebook.github.io/react-native/ https://js.coach/react-native https://expo.io/

  21. Demo Code: github.com/jwo/demo-react-native Full App github.com/jwo/example-react-native-redux- router