เรียนรู้และทำความเข้าใจเทคโนโลยี React Native ในการสร้างแอพพลิเคชั่นแบบ Native บน iOS และ Android Understand React Native in Native Application Development for iOS and Android platform. Speaker: ธีรเศรษฐ์ จิรภัทร์ชาญเดช Group: iOS Developer Thailand Meetup #4

2. Pon
Teerasej Jiraphatchandej
@teerasej
facebook.com/nextflow

3. www.nextflow.in.th/react-native
What? Why? How?

4. www.nextflow.in.th/react-native
What?

6. www.nextflow.in.th/react-native
? ?

7. www.nextflow.in.th/react-native

8. www.nextflow.in.th/react-native
To survive, you need to
understand Framework’s Nature
- Pon

9. www.nextflow.in.th/react-native
React

10. www.nextflow.in.th/react-native

11. www.nextflow.in.th/react-native
UI
(View in MVC)

15. www.nextflow.in.th/react-native
render UI

17. DOM
(Web)
JavaScript
update UI

19. DOM
(Web)
Virtual DOMJavaScript
state, properties update UI

20. www.nextflow.in.th/react-native
React Native

21. www.nextflow.in.th/react-native

22. DOM
(Web)
Virtual DOMJavaScript
state, properties update UI

23. iOS UI
React NativeJavaScript Android UI
… UI
state, properties update UI

24. www.nextflow.in.th/react-native
Example Component
iOS
UIView
React
<View>
Web
<div>

25. iOS UI
Virtual DOMJavaScript Android UI
… UI
state, properties update UI

27. www.nextflow.in.th/react-native
Why?

28. www.nextflow.in.th/react-native
User needs app on
…

29. www.nextflow.in.th/react-native
User needs app on
everything.

30. www.nextflow.in.th/react-native

31. www.nextflow.in.th/react-native
Web Developer

32. www.nextflow.in.th/react-native

33. 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

34. www.nextflow.in.th/react-native
Disadvantage
• Still young
• iOS, March 2015
• Android, September 2015

35. www.nextflow.in.th/react-native
How?

37. www.nextflow.in.th/react-native
Setup

38. www.nextflow.in.th/react-native
JavaScript side
• Node JS
• react-native
• watchman
• flow

39. www.nextflow.in.th/react-native
iOS side
• Xcode
• iOS Simulator

40. www.nextflow.in.th/react-native
Android Side
• Android SDK
• Android Emulator
• Genymotion

41. www.nextflow.in.th/react-native
Debugging

42. www.nextflow.in.th/react-native
React Developer tools

43. www.nextflow.in.th/react-native
Syntax

44. www.nextflow.in.th/react-native
Syntax
• JavaScript
• ES6
• JSX

45. www.nextflow.in.th/react-native
Demo Time

46. 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

47. .NET

48. www.nextflow.in.th/react-native

49. React Native
What? Why? How?
facebook.com/nextflow