React native - What, Why, How?

3,468 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

×