React Native allows developers to build mobile apps using only JavaScript by combining React with native platform components. It uses the same fundamental UI building blocks as traditional mobile development (like iOS and Android), allowing apps built with React Native to look and feel native on each platform. Some key benefits include writing one codebase that works on both iOS and Android, hot reloading for fast development, and a large community of developers helping to solve problems. While React Native is powerful, developers should be aware of potential pitfalls like unnecessary re-renders, issues with ListView, and changing too quickly between updates. Overall, it is recommended because problems often have shared solutions across platforms, updates happen frequently with new features, and it saves significant time compared

1. REACT NATIVE
這條 路
SAM LEE

2. Sam Lee
: FED
: /

3. Demo

4. React Native
Mobile Developer
Javascript
Java?
FED

6. Why Javascript ?
Javascript

7. Java Obj-C
Javascript
V8 Engine Javascript Core

8. React Native
V-OBJ
NATIVE
OBJECT
iOS
Android
Windows
Tizen
OSX
QT
VR
JAVASCRIPT

9. ?
? ?

10. ReactJS
Native
Function
V8 engine
Javascript Bridge
RCTBridge
Java bridge

11. React Native ?

12. ReactJS
Native
Function
JavascriptCore
Javascript Bridge
RCTBridge
Obj-C bridge

13. React Native ?

14. https://facebook.github.io/react-native/showcase.html

15. - 2015/10 - React Native v0.11 ( Support Android)
- 2016/04 in Facebook F8 conference , Microsoft and
Samsung have committed to
bringing React Native to Windows 10 and Tizen
- 2016/10/06 React VR announcement!
- 2017/02 React Native v0.41
2 1 release

16. ?
Java

17. Lib / Backend
30%
UI / UX
70%

18. Demo
Hot Reload

19. :
iOS x 1
Android x 1
FED x 1

20. - App
iOS iOS App
Android Android App
FrontEnd

21. - App
iOS Android
FrontEnd
React Native App
(iOS, Android)

22. Bug : 250% up
: 280% up

23. - React Native iOS
Web (CP )
- Backend API
(Fullstack…)
- Team ( )
Extra Benefits

24. App
React Native View App
https://facebook.github.io/react-native/docs/integration-with-existing-apps.html

25. ?

26. 在 React Native
經過, 路過, 也不會錯過的
坑

27. 不必要的 Render
坑

28. ListView
坑

29. Navigator
坑

30. React Native
更新太快!! (好? 壞?)
坑

31. REACT NATIVE
這條路...

32. 其實

33. 幹 之 如 飴

34. Why 幹之如飴
1. 不⽤怕沒有 Solution (上⾯⼀群神⼈在幫你)
2. 更新很快, 這次沒有的 Feature 下次可能就有了
3. 刻 UI 不⽤等 !!! (省太多時間了)
4. ⼀套 Code 同時開發 2 個平台 (Reuse rate ⾼達 80%)
5. 80%的問題都是 1個 solution for 2 個平台
(當然 bug 也是⼀次 2 個平台...)

35. react-native init AwesomeProject
“Get your hands Dirty”

36. React Native
- Javascript -> ES6
- ReactJS
https://facebook.github.io/react/
- Flexbox -
https://css-tricks.com/snippets/css/a-
guide-to-flexbox/

37. 發問吧!