Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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, es...
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 ...
.NET
www.nextflow.in.th/react-native
React Native
What? Why? How?
facebook.com/nextflow
React native - What, Why, How?
React native - What, Why, How?
React native - What, Why, How?
React native - What, Why, How?
React native - What, Why, How?
React native - What, Why, How?
React native - What, Why, How?
React native - What, Why, How?
React native - What, Why, How?
Upcoming SlideShare
Loading in …5
×

React native - What, Why, How?

9,500 views

Published on

เรียนรู้และทำความเข้าใจเทคโนโลยี React Native ในการสร้างแอพพลิเคชั่นแบบ Native บน iOS และ Android

Understand React Native in Native Application Development for iOS and Android platform.
Speaker: ธีรเศรษฐ์ จิรภัทร์ชาญเดช
Group: iOS Developer Thailand Meetup #4

Published in: Education

React native - What, Why, How?

  1. 1. Pon Teerasej Jiraphatchandej @teerasej facebook.com/nextflow
  2. 2. www.nextflow.in.th/react-native What? Why? How?
  3. 3. www.nextflow.in.th/react-native What?
  4. 4. www.nextflow.in.th/react-native ? ?
  5. 5. www.nextflow.in.th/react-native
  6. 6. www.nextflow.in.th/react-native To survive, you need to understand Framework’s Nature - Pon
  7. 7. www.nextflow.in.th/react-native React
  8. 8. www.nextflow.in.th/react-native
  9. 9. www.nextflow.in.th/react-native UI (View in MVC)
  10. 10. www.nextflow.in.th/react-native render UI
  11. 11. DOM (Web) JavaScript update UI
  12. 12. DOM (Web) Virtual DOMJavaScript state, properties update UI
  13. 13. www.nextflow.in.th/react-native React Native
  14. 14. www.nextflow.in.th/react-native
  15. 15. DOM (Web) Virtual DOMJavaScript state, properties update UI
  16. 16. iOS UI React NativeJavaScript Android UI … UI state, properties update UI
  17. 17. www.nextflow.in.th/react-native Example Component iOS UIView React <View> Web <div>
  18. 18. iOS UI Virtual DOMJavaScript Android UI … UI state, properties update UI
  19. 19. www.nextflow.in.th/react-native Why?
  20. 20. www.nextflow.in.th/react-native User needs app on …
  21. 21. www.nextflow.in.th/react-native User needs app on everything.
  22. 22. www.nextflow.in.th/react-native
  23. 23. www.nextflow.in.th/react-native Web Developer
  24. 24. www.nextflow.in.th/react-native
  25. 25. 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
  26. 26. www.nextflow.in.th/react-native Disadvantage • Still young • iOS, March 2015 • Android, September 2015
  27. 27. www.nextflow.in.th/react-native How?
  28. 28. www.nextflow.in.th/react-native Setup
  29. 29. www.nextflow.in.th/react-native JavaScript side • Node JS • react-native • watchman • flow
  30. 30. www.nextflow.in.th/react-native iOS side • Xcode • iOS Simulator
  31. 31. www.nextflow.in.th/react-native Android Side • Android SDK • Android Emulator • Genymotion
  32. 32. www.nextflow.in.th/react-native Debugging
  33. 33. www.nextflow.in.th/react-native React Developer tools
  34. 34. www.nextflow.in.th/react-native Syntax
  35. 35. www.nextflow.in.th/react-native Syntax • JavaScript • ES6 • JSX
  36. 36. www.nextflow.in.th/react-native Demo Time
  37. 37. 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
  38. 38. .NET
  39. 39. www.nextflow.in.th/react-native
  40. 40. React Native What? Why? How? facebook.com/nextflow

×