Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

React Native for Web

268 views

Published on

React Native may not only for Mobile but also web now .

Published in: Technology
  • Be the first to comment

  • Be the first to like this

React Native for Web

  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 !

×