O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
React Native
for Web
Sam Lee
Sam Lee
: FED
: / 

Agenda
• Why React Native for Web ?
• !
• Demo
Why
React Native for Web ?
,
React Native
:

iOS x 1
Android x 1
FED x 1
- App
iOS iOS App
Android Android App
FrontEnd
- App
iOS Android
FrontEnd
React Native App

(iOS, Android)
Bug : 250% up
: 280% up
But…
!!
- Omni-Channel App ( )















Why web app?
1. :
2. : App
,
3.
React JS!
React JS
VDOM
WEB
VIEW
React Native
VDOM
IOS
VIEW
ANDROID
VIEW
React Native
VDOM
WEB
VIEW
React Native for Web
Setup
React Native for Web
Setup
• react-native
• install react-native-web
• webpack :

(ex: react-hot-boilerplate)

index.html , index.web.js 

webp...
Setup
index.web.js
Setup
webpack.config.js :
?
“yo react-native-web”
https://github.com/leeabc/generator-react-native-web
React Native Web
?
React-Native-Web
Support...
+ IV
(iOS, Android, Web)
!
• Demo “ ” 

React-Native-Web Demo ,
, , !
• , ,
Backend
• Backend:
• Express 4.x
• Pokemon-GO-node-api
• GPS :
• 



• API :
• Fetch API:
•
• Data
IV
TextInput ( / )
Button
TouchableXXXX
ListView
View
Demo
/
!
• iOS , Android, Web High!
• Web Electron 5
!!! (iOS, Android, Web, Windows , Mac)
• React-Native ,
Native App !
• React Native
•
Q & A
References
• React Native Web : 

https://github.com/necolas/react-native-web
• Generator React Native Web: 

https://gith...
Thank you !
Modern web2016 reactnativeweb
Modern web2016 reactnativeweb
Próximos SlideShares
Carregando em…5
×

Modern web2016 reactnativeweb

105 visualizações

Publicada em

Introducting React Native for Web

Publicada em: Software
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Modern web2016 reactnativeweb

  1. 1. React Native for Web Sam Lee
  2. 2. Sam Lee : FED : / 

  3. 3. Agenda • Why React Native for Web ? • ! • Demo
  4. 4. Why React Native for Web ?
  5. 5. , React Native
  6. 6. :
 iOS x 1 Android x 1 FED x 1
  7. 7. - App iOS iOS App Android Android App FrontEnd
  8. 8. - App iOS Android FrontEnd React Native App
 (iOS, Android)
  9. 9. Bug : 250% up : 280% up
  10. 10. But… !!
  11. 11. - Omni-Channel App ( )
 
 
 
 
 
 
 

  12. 12. Why web app? 1. : 2. : App , 3.
  13. 13. React JS!
  14. 14. React JS VDOM WEB VIEW
  15. 15. React Native VDOM IOS VIEW ANDROID VIEW
  16. 16. React Native VDOM WEB VIEW
  17. 17. React Native for Web
  18. 18. Setup React Native for Web
  19. 19. Setup • react-native • install react-native-web • webpack :
 (ex: react-hot-boilerplate)
 index.html , index.web.js 
 webpack config 

  20. 20. Setup index.web.js
  21. 21. Setup webpack.config.js :
  22. 22. ?
  23. 23. “yo react-native-web” https://github.com/leeabc/generator-react-native-web
  24. 24. React Native Web ?
  25. 25. React-Native-Web Support...
  26. 26. + IV (iOS, Android, Web)
  27. 27. ! • Demo “ ” 
 React-Native-Web Demo , , , ! • , ,
  28. 28. Backend • Backend: • Express 4.x • Pokemon-GO-node-api
  29. 29. • GPS : • 
 
 • API : • Fetch API: • • Data
  30. 30. IV TextInput ( / ) Button TouchableXXXX ListView View
  31. 31. Demo
  32. 32. /
  33. 33. ! • iOS , Android, Web High! • Web Electron 5 !!! (iOS, Android, Web, Windows , Mac) • React-Native , Native App !
  34. 34. • React Native •
  35. 35. Q & A
  36. 36. References • React Native Web : 
 https://github.com/necolas/react-native-web • Generator React Native Web: 
 https://github.com/leeabc/generator-react-native- web • React Native Web - React Native Sydney :
 https://www.youtube.com/watch?v=eV4pZ6vv1VE
  37. 37. Thank you !

×