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
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
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
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
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
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
naman860154
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
Pixlogix Infotech
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Enterprise Knowledge
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Miguel Araújo
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
UK Journal
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
Recently uploaded
(20)
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
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...
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
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...
Presentation on how to chat with PDF using ChatGPT code interpreter
Presentation on how to chat with PDF using ChatGPT code interpreter
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
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