React Native for Web

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 WEBVIEW

React Native

VDOM

IOSVIEW

ANDROIDVIEW

React Native

VDOM WEBVIEW

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 webpack config

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 ( / )

ButtonTouchableXXXX

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://github.com/leeabc/generator-react-native-web

• React Native Web - React Native Sydney : https://www.youtube.com/watch?v=eV4pZ6vv1VE

Thank you !