SlideShare une entreprise Scribd logo
1  sur  49
Pon
Teerasej Jiraphatchandej
@teerasej
facebook.com/nextflow
www.nextflow.in.th/react-native
What? Why? How?
www.nextflow.in.th/react-native
What?
www.nextflow.in.th/react-native
? ?
www.nextflow.in.th/react-native
www.nextflow.in.th/react-native
To survive, you need to
understand Framework’s Nature
- Pon
www.nextflow.in.th/react-native
React
www.nextflow.in.th/react-native
www.nextflow.in.th/react-native
UI
(View in MVC)
www.nextflow.in.th/react-native
render UI
DOM
(Web)
JavaScript
update UI
DOM
(Web)
Virtual DOMJavaScript
state, properties update UI
www.nextflow.in.th/react-native
React Native
www.nextflow.in.th/react-native
DOM
(Web)
Virtual DOMJavaScript
state, properties update UI
iOS UI
React NativeJavaScript Android UI
… UI
state, properties update UI
www.nextflow.in.th/react-native
Example Component
iOS
UIView
React
<View>
Web
<div>
iOS UI
Virtual DOMJavaScript Android UI
… UI
state, properties update UI
www.nextflow.in.th/react-native
Why?
www.nextflow.in.th/react-native
User needs app on
…
www.nextflow.in.th/react-native
User needs app on
everything.
www.nextflow.in.th/react-native
www.nextflow.in.th/react-native
Web Developer
www.nextflow.in.th/react-native
www.nextflow.in.th/react-native
Advantages
• Native performance in web-idea mobile
application
• Good for Web Developer, especially React
• Support web idea (ex. Live reload)
• Component-based, easy to Reuse.
• Support Native API
www.nextflow.in.th/react-native
Disadvantage
• Still young
• iOS, March 2015
• Android, September 2015
www.nextflow.in.th/react-native
How?
www.nextflow.in.th/react-native
Setup
www.nextflow.in.th/react-native
JavaScript side
• Node JS
• react-native
• watchman
• flow
www.nextflow.in.th/react-native
iOS side
• Xcode
• iOS Simulator
www.nextflow.in.th/react-native
Android Side
• Android SDK
• Android Emulator
• Genymotion
www.nextflow.in.th/react-native
Debugging
www.nextflow.in.th/react-native
React Developer tools
www.nextflow.in.th/react-native
Syntax
www.nextflow.in.th/react-native
Syntax
• JavaScript
• ES6
• JSX
www.nextflow.in.th/react-native
Demo Time
www.nextflow.in.th/react-native
React Native
• Web controls Mobile App’s UI.
• Native Performance
• Code in JavaScript ES6 & JSX
• integrate with Native UI Component
.NET
www.nextflow.in.th/react-native
React Native
What? Why? How?
facebook.com/nextflow

Contenu connexe

Tendances

Joomla REST API - JoomlaDay Bangkok 2014
Joomla REST API - JoomlaDay Bangkok 2014Joomla REST API - JoomlaDay Bangkok 2014
Joomla REST API - JoomlaDay Bangkok 2014
Ashwin Date
 

Tendances (20)

React Native "A Bad Idea Or A Game Changer" at Code Mania 101
React Native "A Bad Idea Or A Game Changer" at Code Mania 101React Native "A Bad Idea Or A Game Changer" at Code Mania 101
React Native "A Bad Idea Or A Game Changer" at Code Mania 101
 
Startup and Rapid web development
Startup and Rapid web developmentStartup and Rapid web development
Startup and Rapid web development
 
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
The Ultimate Getting Started with Angular Workshop - Devoxx UK 2017
 
iOS Automation with Cucumber, Appium and Saucelabs
iOS Automation with Cucumber, Appium and SaucelabsiOS Automation with Cucumber, Appium and Saucelabs
iOS Automation with Cucumber, Appium and Saucelabs
 
Joomla REST API - JoomlaDay Bangkok 2014
Joomla REST API - JoomlaDay Bangkok 2014Joomla REST API - JoomlaDay Bangkok 2014
Joomla REST API - JoomlaDay Bangkok 2014
 
Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016Testing Angular 2 Applications - Rich Web 2016
Testing Angular 2 Applications - Rich Web 2016
 
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?GR8Conf 2015 - Spring Boot and Groovy. What more do you need?
GR8Conf 2015 - Spring Boot and Groovy. What more do you need?
 
React Native - CirebonDev
React Native - CirebonDevReact Native - CirebonDev
React Native - CirebonDev
 
Headless BDD & Responsive Test Automation
Headless BDD & Responsive Test AutomationHeadless BDD & Responsive Test Automation
Headless BDD & Responsive Test Automation
 
WP REST API
WP REST APIWP REST API
WP REST API
 
Leveraging Continuous Integration For Fun And Profit!
Leveraging Continuous Integration For Fun And Profit!Leveraging Continuous Integration For Fun And Profit!
Leveraging Continuous Integration For Fun And Profit!
 
Time to stop breaking your promises - dealing with 404's, broken URLs and pla...
Time to stop breaking your promises - dealing with 404's, broken URLs and pla...Time to stop breaking your promises - dealing with 404's, broken URLs and pla...
Time to stop breaking your promises - dealing with 404's, broken URLs and pla...
 
Front-end Automated Testing
Front-end Automated TestingFront-end Automated Testing
Front-end Automated Testing
 
iOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
iOS Developers Conference-iOS Automation with Cucumber, Appium and SaucelabsiOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
iOS Developers Conference-iOS Automation with Cucumber, Appium and Saucelabs
 
J query
J queryJ query
J query
 
React native first impression
React native first impressionReact native first impression
React native first impression
 
Lean JS Deeply, but don't forget about PHP!
Lean JS Deeply, but don't forget about PHP!Lean JS Deeply, but don't forget about PHP!
Lean JS Deeply, but don't forget about PHP!
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic
 
Javascript State of the Union 2015 - English
Javascript State of the Union 2015 - EnglishJavascript State of the Union 2015 - English
Javascript State of the Union 2015 - English
 
Beginning WordPress Plugin Development
Beginning WordPress Plugin DevelopmentBeginning WordPress Plugin Development
Beginning WordPress Plugin Development
 

Similaire à React native - What, Why, How?

Week5 BA
Week5 BAWeek5 BA
Week5 BA
CMoz
 

Similaire à React native - What, Why, How? (20)

Fullstack JS Workshop
Fullstack JS WorkshopFullstack JS Workshop
Fullstack JS Workshop
 
High Performance web apps in Om, React and ClojureScript
High Performance web apps in Om, React and ClojureScriptHigh Performance web apps in Om, React and ClojureScript
High Performance web apps in Om, React and ClojureScript
 
A tour of React Native
A tour of React NativeA tour of React Native
A tour of React Native
 
Workshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General OverviewWorkshop Intro: FrontEnd General Overview
Workshop Intro: FrontEnd General Overview
 
Rails OO views
Rails OO viewsRails OO views
Rails OO views
 
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
JsDay - It's not you, It's me (or how to avoid being coupled with a Javascrip...
 
Redux Toolkit - Quick Intro - 2022
Redux Toolkit - Quick Intro - 2022Redux Toolkit - Quick Intro - 2022
Redux Toolkit - Quick Intro - 2022
 
AngularJs Crash Course
AngularJs Crash CourseAngularJs Crash Course
AngularJs Crash Course
 
Introduction to ReactJS
Introduction to ReactJSIntroduction to ReactJS
Introduction to ReactJS
 
Drupal Backbone.js in the Frontend
Drupal Backbone.js in the FrontendDrupal Backbone.js in the Frontend
Drupal Backbone.js in the Frontend
 
Elixir Elevated: The Ups and Downs of OTP at ElixirConf2014
Elixir Elevated: The Ups and Downs of OTP at ElixirConf2014Elixir Elevated: The Ups and Downs of OTP at ElixirConf2014
Elixir Elevated: The Ups and Downs of OTP at ElixirConf2014
 
Introduction to ReactJS and Redux
Introduction to ReactJS and ReduxIntroduction to ReactJS and Redux
Introduction to ReactJS and Redux
 
React JS - Introduction
React JS - IntroductionReact JS - Introduction
React JS - Introduction
 
FrontEnd-Roadmap.pdf
FrontEnd-Roadmap.pdfFrontEnd-Roadmap.pdf
FrontEnd-Roadmap.pdf
 
Mistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhoneMistakes I Made Building Netflix for the iPhone
Mistakes I Made Building Netflix for the iPhone
 
Binary Studio Academy PRO. JS course. Lecture 5. Backbone plugins
Binary Studio Academy PRO. JS course. Lecture 5. Backbone pluginsBinary Studio Academy PRO. JS course. Lecture 5. Backbone plugins
Binary Studio Academy PRO. JS course. Lecture 5. Backbone plugins
 
Apache Wicket: 10 jaar en verder - Martijn Dashorst
Apache Wicket: 10 jaar en verder - Martijn DashorstApache Wicket: 10 jaar en verder - Martijn Dashorst
Apache Wicket: 10 jaar en verder - Martijn Dashorst
 
Week5 BA
Week5 BAWeek5 BA
Week5 BA
 
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
Get Hip with JHipster: Spring Boot + AngularJS + Bootstrap - Devoxx UK 2016
 
Writing your Third Plugin
Writing your Third PluginWriting your Third Plugin
Writing your Third Plugin
 

Plus de Teerasej Jiraphatchandej

Microsoft Power Page for Developer - ภาษาไทย
Microsoft Power Page for Developer - ภาษาไทยMicrosoft Power Page for Developer - ภาษาไทย
Microsoft Power Page for Developer - ภาษาไทย
Teerasej Jiraphatchandej
 

Plus de Teerasej Jiraphatchandej (20)

Microsoft Power Page for Developer - ภาษาไทย
Microsoft Power Page for Developer - ภาษาไทยMicrosoft Power Page for Developer - ภาษาไทย
Microsoft Power Page for Developer - ภาษาไทย
 
Azure DevOps with Power Automate - Guideline
Azure DevOps with Power Automate - GuidelineAzure DevOps with Power Automate - Guideline
Azure DevOps with Power Automate - Guideline
 
Getting Started Azure Cognitive Service Container
Getting Started Azure Cognitive Service ContainerGetting Started Azure Cognitive Service Container
Getting Started Azure Cognitive Service Container
 
Power App - Wrap Sneak peek
Power App - Wrap Sneak peekPower App - Wrap Sneak peek
Power App - Wrap Sneak peek
 
Software developer: Prepare for the real world
Software developer: Prepare for the real worldSoftware developer: Prepare for the real world
Software developer: Prepare for the real world
 
.NET Bangkok Meetup #42 - Extract information from your document with Azure F...
.NET Bangkok Meetup #42 - Extract information from your document with Azure F....NET Bangkok Meetup #42 - Extract information from your document with Azure F...
.NET Bangkok Meetup #42 - Extract information from your document with Azure F...
 
.NET Conference 2020 - Introduction to Azure Form Recognizer
.NET Conference 2020 - Introduction to Azure Form Recognizer.NET Conference 2020 - Introduction to Azure Form Recognizer
.NET Conference 2020 - Introduction to Azure Form Recognizer
 
Introduction to Webometrics
Introduction to WebometricsIntroduction to Webometrics
Introduction to Webometrics
 
OK Flutter, Welcome to All platform era
OK Flutter, Welcome to All platform eraOK Flutter, Welcome to All platform era
OK Flutter, Welcome to All platform era
 
Front-end อะไรเนี้ย? - เริ่มต้นเรียนรู้ และเข้าใจโลกของ Front-end Development...
Front-end อะไรเนี้ย? - เริ่มต้นเรียนรู้ และเข้าใจโลกของ Front-end Development...Front-end อะไรเนี้ย? - เริ่มต้นเรียนรู้ และเข้าใจโลกของ Front-end Development...
Front-end อะไรเนี้ย? - เริ่มต้นเรียนรู้ และเข้าใจโลกของ Front-end Development...
 
เรียนรู้ Node JS แบบสบายๆ สำหรับผู้เริ่มต้น
เรียนรู้ Node JS แบบสบายๆ สำหรับผู้เริ่มต้นเรียนรู้ Node JS แบบสบายๆ สำหรับผู้เริ่มต้น
เรียนรู้ Node JS แบบสบายๆ สำหรับผู้เริ่มต้น
 
Angular JS: First look เริ่มต้น Angular JS กันแบบสบายๆ
Angular JS: First look เริ่มต้น Angular JS กันแบบสบายๆ Angular JS: First look เริ่มต้น Angular JS กันแบบสบายๆ
Angular JS: First look เริ่มต้น Angular JS กันแบบสบายๆ
 
สร้าง Facebook Fan Page อย่างไร ให้ยั่งยืน [บรรยายในงาน LINE Creator Meeting 3]
สร้าง Facebook Fan Page อย่างไร ให้ยั่งยืน [บรรยายในงาน LINE Creator Meeting 3]สร้าง Facebook Fan Page อย่างไร ให้ยั่งยืน [บรรยายในงาน LINE Creator Meeting 3]
สร้าง Facebook Fan Page อย่างไร ให้ยั่งยืน [บรรยายในงาน LINE Creator Meeting 3]
 
Ionic framework for web developer
Ionic framework for web developerIonic framework for web developer
Ionic framework for web developer
 
Current state of Adobe PhoneGap & Cordova (yes, iOS 8 too)
Current state of Adobe PhoneGap & Cordova (yes, iOS 8 too)Current state of Adobe PhoneGap & Cordova (yes, iOS 8 too)
Current state of Adobe PhoneGap & Cordova (yes, iOS 8 too)
 
PhoneGap/Cordova: Push notification on Android
PhoneGap/Cordova: Push notification on AndroidPhoneGap/Cordova: Push notification on Android
PhoneGap/Cordova: Push notification on Android
 
Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)
Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)
Responsive Image: ปัญหา แนวคิด และวิธีใช้งานในปัจจุบัน (กันยา 2014)
 
เร่ิมต้นสร้าง Facebook page สำหรับ line creator
เร่ิมต้นสร้าง Facebook page สำหรับ line creatorเร่ิมต้นสร้าง Facebook page สำหรับ line creator
เร่ิมต้นสร้าง Facebook page สำหรับ line creator
 
เริ่มต้นสร้างแอพ Android Wear โดยโค้ชพล
เริ่มต้นสร้างแอพ Android Wear โดยโค้ชพลเริ่มต้นสร้างแอพ Android Wear โดยโค้ชพล
เริ่มต้นสร้างแอพ Android Wear โดยโค้ชพล
 
LINE Creator Meeting Thailand #1: เริ่มต้นเรียนรู้การสร้าง LINE Sticker
LINE Creator Meeting Thailand #1: เริ่มต้นเรียนรู้การสร้าง LINE StickerLINE Creator Meeting Thailand #1: เริ่มต้นเรียนรู้การสร้าง LINE Sticker
LINE Creator Meeting Thailand #1: เริ่มต้นเรียนรู้การสร้าง LINE Sticker
 

Dernier

1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
QucHHunhnh
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
PECB
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
heathfieldcps1
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.
MateoGardella
 

Dernier (20)

1029 - Danh muc Sach Giao Khoa 10 . pdf
1029 -  Danh muc Sach Giao Khoa 10 . pdf1029 -  Danh muc Sach Giao Khoa 10 . pdf
1029 - Danh muc Sach Giao Khoa 10 . pdf
 
Beyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global ImpactBeyond the EU: DORA and NIS 2 Directive's Global Impact
Beyond the EU: DORA and NIS 2 Directive's Global Impact
 
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptxSOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
SOCIAL AND HISTORICAL CONTEXT - LFTVD.pptx
 
The basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptxThe basics of sentences session 2pptx copy.pptx
The basics of sentences session 2pptx copy.pptx
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"Mattingly "AI & Prompt Design: The Basics of Prompt Design"
Mattingly "AI & Prompt Design: The Basics of Prompt Design"
 
Advance Mobile Application Development class 07
Advance Mobile Application Development class 07Advance Mobile Application Development class 07
Advance Mobile Application Development class 07
 
Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..Sports & Fitness Value Added Course FY..
Sports & Fitness Value Added Course FY..
 
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptxINDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
INDIA QUIZ 2024 RLAC DELHI UNIVERSITY.pptx
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
microwave assisted reaction. General introduction
microwave assisted reaction. General introductionmicrowave assisted reaction. General introduction
microwave assisted reaction. General introduction
 
Web & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdfWeb & Social Media Analytics Previous Year Question Paper.pdf
Web & Social Media Analytics Previous Year Question Paper.pdf
 
Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17Advanced Views - Calendar View in Odoo 17
Advanced Views - Calendar View in Odoo 17
 
PROCESS RECORDING FORMAT.docx
PROCESS      RECORDING        FORMAT.docxPROCESS      RECORDING        FORMAT.docx
PROCESS RECORDING FORMAT.docx
 
fourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writingfourth grading exam for kindergarten in writing
fourth grading exam for kindergarten in writing
 
Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.Gardella_Mateo_IntellectualProperty.pdf.
Gardella_Mateo_IntellectualProperty.pdf.
 
Key note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdfKey note speaker Neum_Admir Softic_ENG.pdf
Key note speaker Neum_Admir Softic_ENG.pdf
 
Measures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SDMeasures of Dispersion and Variability: Range, QD, AD and SD
Measures of Dispersion and Variability: Range, QD, AD and SD
 

React native - What, Why, How?