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

1. React Native
for Web
Sam Lee

2. Sam Lee
: FED
: /

3. Agenda
• Why React Native for Web ?
• !
• Demo

4. Why
React Native for Web ?

5. ,
React Native

6. :
iOS x 1
Android x 1
FED x 1

7. - App
iOS iOS App
Android Android App
FrontEnd

8. - App
iOS Android
FrontEnd
React Native App
(iOS, Android)

9. Bug : 250% up
: 280% up

10. But…
!!

11. - Omni-Channel App ( )

12. Why web app?
1. :
2. : App
,
3.

13. React JS!

14. React JS
VDOM
WEB
VIEW

15. React Native
VDOM
IOS
VIEW
ANDROID
VIEW

16. React Native
VDOM
WEB
VIEW

17. React Native for Web

19. Setup
React Native for Web

20. Setup
• react-native
• install react-native-web
• webpack :
(ex: react-hot-boilerplate)
index.html , index.web.js
webpack config

21. Setup
index.web.js

22. Setup
webpack.config.js :

23. ?

24. “yo react-native-web”
https://github.com/leeabc/generator-react-native-web

25. React Native Web
?

26. React-Native-Web
Support...

28. + IV
(iOS, Android, Web)

29. !
• Demo “ ”
React-Native-Web Demo ,
, , !
• , ,

30. Backend
• Backend:
• Express 4.x
• Pokemon-GO-node-api

31. • GPS :
•
• API :
• Fetch API:
•
• Data

32. IV
TextInput ( / )
Button
TouchableXXXX
ListView
View

33. Demo

34. /

35. !
• iOS , Android, Web High!
• Web Electron 5
!!! (iOS, Android, Web, Windows , Mac)
• React-Native ,
Native App !

36. • React Native
•

37. Q & A

38. 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

39. Thank you !