React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s...

39
React Native for Web Sam Lee

Transcript of React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s...

Page 1: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

React Native for Web

Sam Lee

Page 2: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

Sam Lee : FED : /

Page 3: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

Agenda

• Why React Native for Web ?

• !

• Demo

Page 4: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

Why React Native for Web ?

Page 5: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

, React Native

Page 6: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

:iOS x 1

Android x 1 FED x 1

Page 7: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

- App

iOS iOS App

Android Android App

FrontEnd

Page 8: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

- App

iOS Android

FrontEnd

React Native App(iOS, Android)

Page 9: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

Bug : 250% up

: 280% up

Page 10: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

But… !!

Page 11: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

- Omni-Channel App ( )

Page 12: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

Why web app? 1. : 2. : App

, 3.

Page 13: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

React JS!

Page 14: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

React JS

VDOM WEBVIEW

Page 15: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

React Native

VDOM

IOSVIEW

ANDROIDVIEW

Page 16: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

React Native

VDOM WEBVIEW

Page 17: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

React Native for Web

Page 18: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack
Page 19: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

Setup React Native for Web

Page 20: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

Setup• react-native

• install react-native-web

• webpack :(ex: react-hot-boilerplate)

index.html , index.web.js webpack config

Page 21: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

Setup

index.web.js

Page 22: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

Setup

webpack.config.js :

Page 23: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

?

Page 24: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

“yo react-native-web”

https://github.com/leeabc/generator-react-native-web

Page 25: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

React Native Web ?

Page 26: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

React-Native-Web Support...

Page 27: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack
Page 28: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

+ IV(iOS, Android, Web)

Page 29: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

!

• Demo “ ” React-Native-Web Demo ,

, , !

• , ,

Page 30: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

Backend

• Backend:

• Express 4.x

• Pokemon-GO-node-api

Page 31: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

• GPS :

• API :

• Fetch API:

• Data

Page 32: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

IV

TextInput ( / )

ButtonTouchableXXXX

ListView

View

Page 33: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

Demo

Page 34: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

/

Page 35: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

!

• iOS , Android, Web High!

• Web Electron 5 !!! (iOS, Android, Web, Windows , Mac)

• React-Native , Native App !

Page 36: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

• React Native

Page 37: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

Q & A

Page 38: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

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

Page 39: React Native for Web .pdfSetup • 6xê react-native }Q 9 • install react-native-web • O s webpack }Q 9: (ex: react-hot-boilerplate) u¥ index.html , index.web.js rÅxA webpack

Thank you !