Submit Search
Upload
React Native for Web
•
0 likes
•
463 views
Sam Lee
Follow
React Native may not only for Mobile but also web now .
Read less
Read more
Technology
Report
Share
Report
Share
1 of 39
Download now
Download to read offline
Recommended
Reark : a Reference Architecture for Android using RxJava
Reark : a Reference Architecture for Android using RxJava
Futurice
Building your first Native iOs App with an API Backend
Building your first Native iOs App with an API Backend
Apigee | Google Cloud
Pepperoni 2.0 - How to spice up your mobile apps
Pepperoni 2.0 - How to spice up your mobile apps
Futurice
Dont Break Live lightning talk
Dont Break Live lightning talk
Jamie Schmid
Erica Cooksey Reactathon 2018
Erica Cooksey Reactathon 2018
🏡 Erica Cooksey
Your API is not a Website!
Your API is not a Website!
Apigee | Google Cloud
Introduction towatchkit
Introduction towatchkit
Mohammad Azam
Real World ionic Development
Real World ionic Development
Chris Griffith
Recommended
Reark : a Reference Architecture for Android using RxJava
Reark : a Reference Architecture for Android using RxJava
Futurice
Building your first Native iOs App with an API Backend
Building your first Native iOs App with an API Backend
Apigee | Google Cloud
Pepperoni 2.0 - How to spice up your mobile apps
Pepperoni 2.0 - How to spice up your mobile apps
Futurice
Dont Break Live lightning talk
Dont Break Live lightning talk
Jamie Schmid
Erica Cooksey Reactathon 2018
Erica Cooksey Reactathon 2018
🏡 Erica Cooksey
Your API is not a Website!
Your API is not a Website!
Apigee | Google Cloud
Introduction towatchkit
Introduction towatchkit
Mohammad Azam
Real World ionic Development
Real World ionic Development
Chris Griffith
Ionic2 the the journey continues ng-sydney 02-03-16 and ionicaustralia 23-0...
Ionic2 the the journey continues ng-sydney 02-03-16 and ionicaustralia 23-0...
Sameera Gayan
Top Cordova Challenges and How to Tackle Them
Top Cordova Challenges and How to Tackle Them
Ionic Framework
Ionic framework
Ionic framework
Software Infrastructure
App developer as a Web developer (ROROSyd - Jul 15)
App developer as a Web developer (ROROSyd - Jul 15)
Sameera Gayan
Firebase Adventures - Real time platform for your apps
Firebase Adventures - Real time platform for your apps
Juarez Filho
AWS re:Invent "The secrets to building and delivering amazing apps at scale"
AWS re:Invent "The secrets to building and delivering amazing apps at scale"
💻 Javier Garza
Writing Performant Front-end Code
Writing Performant Front-end Code
Lyubomir Bozhinov
August 10th, 2009 Dave Ross Word Press
August 10th, 2009 Dave Ross Word Press
Straight North
Integrating Indigo.Design App Builder with GitHub
Integrating Indigo.Design App Builder with GitHub
JohnMcGuigan10
Architecting for Continuous Delivery
Architecting for Continuous Delivery
Axel Fontaine
Serverless adventure tooling
Serverless adventure tooling
Simona Cotin
A Tale of 3 CLIs - Angular 2, Ember, and React
A Tale of 3 CLIs - Angular 2, Ember, and React
Tracy Lee
11.05.21 Google I/O報告会 in 東京 なかざわ資料
11.05.21 Google I/O報告会 in 東京 なかざわ資料
Kei Nakazawa
Ionic React
Ionic React
Ionic Framework
European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...
European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...
Sébastien Levert
Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016
Jad Salhani
Rise of the hybrids
Rise of the hybrids
Oron Ben Zvi
阳光书屋技术架构介绍
阳光书屋技术架构介绍
Xiaoping Feng
React native sharing
React native sharing
Sam Lee
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
Kobkrit Viriyayudhakorn
Backbonejs
Backbonejs
Sam Lee
JSDC 2015 React-Native 實戰
JSDC 2015 React-Native 實戰
Sam Lee
More Related Content
What's hot
Ionic2 the the journey continues ng-sydney 02-03-16 and ionicaustralia 23-0...
Ionic2 the the journey continues ng-sydney 02-03-16 and ionicaustralia 23-0...
Sameera Gayan
Top Cordova Challenges and How to Tackle Them
Top Cordova Challenges and How to Tackle Them
Ionic Framework
Ionic framework
Ionic framework
Software Infrastructure
App developer as a Web developer (ROROSyd - Jul 15)
App developer as a Web developer (ROROSyd - Jul 15)
Sameera Gayan
Firebase Adventures - Real time platform for your apps
Firebase Adventures - Real time platform for your apps
Juarez Filho
AWS re:Invent "The secrets to building and delivering amazing apps at scale"
AWS re:Invent "The secrets to building and delivering amazing apps at scale"
💻 Javier Garza
Writing Performant Front-end Code
Writing Performant Front-end Code
Lyubomir Bozhinov
August 10th, 2009 Dave Ross Word Press
August 10th, 2009 Dave Ross Word Press
Straight North
Integrating Indigo.Design App Builder with GitHub
Integrating Indigo.Design App Builder with GitHub
JohnMcGuigan10
Architecting for Continuous Delivery
Architecting for Continuous Delivery
Axel Fontaine
Serverless adventure tooling
Serverless adventure tooling
Simona Cotin
A Tale of 3 CLIs - Angular 2, Ember, and React
A Tale of 3 CLIs - Angular 2, Ember, and React
Tracy Lee
11.05.21 Google I/O報告会 in 東京 なかざわ資料
11.05.21 Google I/O報告会 in 東京 なかざわ資料
Kei Nakazawa
Ionic React
Ionic React
Ionic Framework
European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...
European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...
Sébastien Levert
Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016
Jad Salhani
Rise of the hybrids
Rise of the hybrids
Oron Ben Zvi
阳光书屋技术架构介绍
阳光书屋技术架构介绍
Xiaoping Feng
What's hot
(18)
Ionic2 the the journey continues ng-sydney 02-03-16 and ionicaustralia 23-0...
Ionic2 the the journey continues ng-sydney 02-03-16 and ionicaustralia 23-0...
Top Cordova Challenges and How to Tackle Them
Top Cordova Challenges and How to Tackle Them
Ionic framework
Ionic framework
App developer as a Web developer (ROROSyd - Jul 15)
App developer as a Web developer (ROROSyd - Jul 15)
Firebase Adventures - Real time platform for your apps
Firebase Adventures - Real time platform for your apps
AWS re:Invent "The secrets to building and delivering amazing apps at scale"
AWS re:Invent "The secrets to building and delivering amazing apps at scale"
Writing Performant Front-end Code
Writing Performant Front-end Code
August 10th, 2009 Dave Ross Word Press
August 10th, 2009 Dave Ross Word Press
Integrating Indigo.Design App Builder with GitHub
Integrating Indigo.Design App Builder with GitHub
Architecting for Continuous Delivery
Architecting for Continuous Delivery
Serverless adventure tooling
Serverless adventure tooling
A Tale of 3 CLIs - Angular 2, Ember, and React
A Tale of 3 CLIs - Angular 2, Ember, and React
11.05.21 Google I/O報告会 in 東京 なかざわ資料
11.05.21 Google I/O報告会 in 東京 なかざわ資料
Ionic React
Ionic React
European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...
European SharePoint Conference 2017 - SharePoint Framework, Angular & Azure F...
Your choices for building a mobile app in 2016
Your choices for building a mobile app in 2016
Rise of the hybrids
Rise of the hybrids
阳光书屋技术架构介绍
阳光书屋技术架构介绍
Viewers also liked
React native sharing
React native sharing
Sam Lee
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
Kobkrit Viriyayudhakorn
Backbonejs
Backbonejs
Sam Lee
JSDC 2015 React-Native 實戰
JSDC 2015 React-Native 實戰
Sam Lee
What is FED
What is FED
Sam Lee
Modern web2016 reactnativeweb
Modern web2016 reactnativeweb
Sam Lee
Trend Micro Web's Scaffolding tool
Trend Micro Web's Scaffolding tool
Sam Lee
React native redux_sharing
React native redux_sharing
Sam Lee
Meetup React Native
Meetup React Native
Nurielly Caroline Brizola
W3CTech美团react专场-React Native 初探
W3CTech美团react专场-React Native 初探
美团点评技术团队
Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)
Devin Abbott
JavaScript, React Native and Performance at react-europe 2016
JavaScript, React Native and Performance at react-europe 2016
Tadeu Zagallo
When to (use / not use) React Native.
When to (use / not use) React Native.
Bobby Schultz
Introduzione a React Native - Alessandro Giannini
Introduzione a React Native - Alessandro Giannini
Develer S.R.L.
React Native: Developing an app similar to Uber in JavaScript
React Native: Developing an app similar to Uber in JavaScript
Caio Ariede
React Native Internals
React Native Internals
Tadeu Zagallo
Quick start with React | DreamLab Academy #2
Quick start with React | DreamLab Academy #2
DreamLab
React native - What, Why, How?
React native - What, Why, How?
Teerasej Jiraphatchandej
Android動態ui介面設計
Android動態ui介面設計
艾鍗科技
React Native GUIDE
React Native GUIDE
dcubeio
Viewers also liked
(20)
React native sharing
React native sharing
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
React Native Introduction: Making Real iOS and Android Mobile App By JavaScript
Backbonejs
Backbonejs
JSDC 2015 React-Native 實戰
JSDC 2015 React-Native 實戰
What is FED
What is FED
Modern web2016 reactnativeweb
Modern web2016 reactnativeweb
Trend Micro Web's Scaffolding tool
Trend Micro Web's Scaffolding tool
React native redux_sharing
React native redux_sharing
Meetup React Native
Meetup React Native
W3CTech美团react专场-React Native 初探
W3CTech美团react专场-React Native 初探
Getting Started with React Native (and should I use it at all?)
Getting Started with React Native (and should I use it at all?)
JavaScript, React Native and Performance at react-europe 2016
JavaScript, React Native and Performance at react-europe 2016
When to (use / not use) React Native.
When to (use / not use) React Native.
Introduzione a React Native - Alessandro Giannini
Introduzione a React Native - Alessandro Giannini
React Native: Developing an app similar to Uber in JavaScript
React Native: Developing an app similar to Uber in JavaScript
React Native Internals
React Native Internals
Quick start with React | DreamLab Academy #2
Quick start with React | DreamLab Academy #2
React native - What, Why, How?
React native - What, Why, How?
Android動態ui介面設計
Android動態ui介面設計
React Native GUIDE
React Native GUIDE
Similar to React Native for Web
React Native
React Native
Huqiu Liao
React Native - CirebonDev
React Native - CirebonDev
Ayat Maulana
Building Apps with React Native - Lessons Learned
Building Apps with React Native - Lessons Learned
Alexandra Anghel
Performance and Scalability Art of Isomorphic React Applications
Performance and Scalability Art of Isomorphic React Applications
Denis Izmaylov
Cross Platform Mobile Development
Cross Platform Mobile Development
Software Infrastructure
Building framework with shared code on Android and iOS using React Native. UA...
Building framework with shared code on Android and iOS using React Native. UA...
UA Mobile
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
Juarez Filho
Titanium Alloy Tutorial
Titanium Alloy Tutorial
Fokke Zandbergen
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
GreeceJS
Modern App Development with the SharePoint Framework
Modern App Development with the SharePoint Framework
Pete Filicetti
React Native - Build Native Mobile App
React Native - Build Native Mobile App
Mobio Solutions
Fragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fiction
Belen Barros Pena
A Practical Approach to React Native at All Things Open Conference
A Practical Approach to React Native at All Things Open Conference
Tracy Lee
React BKK: Scalable Application Architecture
React BKK: Scalable Application Architecture
Zack Siri
Authentication and Identity with Amazon Cognito & Analytics with Amazon Pinpoint
Authentication and Identity with Amazon Cognito & Analytics with Amazon Pinpoint
Amazon Web Services
React native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile Apps
Jimit Shah
Hybrid mobile apps
Hybrid mobile apps
Abraham Barrera
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
Chris Canal
AHOY FB Hack Day 2017
AHOY FB Hack Day 2017
Ian Yu-Hsun Lin
Building mobile apps using meteorJS
Building mobile apps using meteorJS
Entrepreneur / Startup
Similar to React Native for Web
(20)
React Native
React Native
React Native - CirebonDev
React Native - CirebonDev
Building Apps with React Native - Lessons Learned
Building Apps with React Native - Lessons Learned
Performance and Scalability Art of Isomorphic React Applications
Performance and Scalability Art of Isomorphic React Applications
Cross Platform Mobile Development
Cross Platform Mobile Development
Building framework with shared code on Android and iOS using React Native. UA...
Building framework with shared code on Android and iOS using React Native. UA...
Ionic adventures - Hybrid Mobile App Development rocks
Ionic adventures - Hybrid Mobile App Development rocks
Titanium Alloy Tutorial
Titanium Alloy Tutorial
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
React Native and the future of web technology (Mark Wilcox) - GreeceJS #15
Modern App Development with the SharePoint Framework
Modern App Development with the SharePoint Framework
React Native - Build Native Mobile App
React Native - Build Native Mobile App
Fragmentation in mobile design: fact or fiction
Fragmentation in mobile design: fact or fiction
A Practical Approach to React Native at All Things Open Conference
A Practical Approach to React Native at All Things Open Conference
React BKK: Scalable Application Architecture
React BKK: Scalable Application Architecture
Authentication and Identity with Amazon Cognito & Analytics with Amazon Pinpoint
Authentication and Identity with Amazon Cognito & Analytics with Amazon Pinpoint
React native - React(ive) Way To Build Native Mobile Apps
React native - React(ive) Way To Build Native Mobile Apps
Hybrid mobile apps
Hybrid mobile apps
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
AHOY FB Hack Day 2017
AHOY FB Hack Day 2017
Building mobile apps using meteorJS
Building mobile apps using meteorJS
Recently uploaded
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
gurkirankumar98700
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Results
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Roshan Dwivedi
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Puma Security, LLC
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
Paola De la Torre
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
V3cube
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Pooja Nehwal
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
apidays
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Igalia
Recently uploaded
(20)
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Slack Application Development 101 Slides
Slack Application Development 101 Slides
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
React Native for Web
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
18.
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...
27.
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 !
Download now