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.

React Native + Redux

241 views

Published on

React Native + Redux

Published in: Technology
  • Be the first to comment

  • Be the first to like this

React Native + Redux

  1. 1. React Native 起手式 + Redux
  2. 2. About Me Rick Chiang | Full Stack Developer rick.chiang@addweup.com 以前: .NET MVC、ionic 2、Angular 2、TypeScript 現在: ReactJS、React Native、NodeJS、Python、Docker
  3. 3. React ?
  4. 4. 不懂 React 也可以直接學 React Native嗎
  5. 5. 不懂 React 也可以直接學 React Native嗎
  6. 6. React ? Babel ES6 ES7 Webpack npm Redux Server-Side Render SEOroute
  7. 7. React 沒那麼複雜 就是處理 View 而已
  8. 8. React
  9. 9. 元件化
  10. 10. 舉個例
  11. 11. React 很簡單就是在寫 View 而已
  12. 12. 才怪
  13. 13. Virtual DOM
  14. 14. 今天主角是 React Native
  15. 15. Learn once, write anywhere
  16. 16. React Native ?
  17. 17. 87 %
  18. 18. Bridge
  19. 19. IOS Android
  20. 20. 2015.03.27 v.0.1.0 release
  21. 21. 2015.09.15 v.0.11.0 Support Android
  22. 22. 2016.10.25 v0.36.0
  23. 23. Install
  24. 24. NodeJS V8 Engine NPM(Node Package Manager) Install
  25. 25. Install
  26. 26. npm install -g react-native-cli Install 讓我們可以用 react-native 指令產生 RN 專案
  27. 27. react-native init rn_demo1 Install 產生 React Native 專案
  28. 28. Install
  29. 29. Install
  30. 30. Run on IOS Xcode
  31. 31. IOS Install Xcode
  32. 32. Demo IOS
  33. 33. react-native run-ios IOS
  34. 34. IOS
  35. 35. Run on Android Android Studio JDK Genymotion Virtual Box
  36. 36. Android
  37. 37. Android
  38. 38. Android
  39. 39. Android
  40. 40. Android
  41. 41. Android export ANDROID_HOME=~/Library/Android/sdk export PATH=${PATH}:${ANDROID_HOME}/tools
  42. 42. Demo Android
  43. 43. Android
  44. 44. react-native run-android Android
  45. 45. Android
  46. 46. Developer Experience Android
  47. 47. Demo
  48. 48. DX
  49. 49. Running on Device Demo
  50. 50. Demo React Native
  51. 51. Redux
  52. 52. npm i redux –save redux-persist --save redux-actions --save react-redux --save
  53. 53. React Native + Redux Demo
  54. 54. QA
  55. 55. Thanks

×