react-vueの遊び方 - Gotanda.js

Transcript

1. react-vueの遊び方 @__syumai 2017.10.6 Gotanda.js 資料置き場 => https://syumai.github.io/docs/

2. 自己紹介 しゅーまい(福岡) @__syumai(アンダーバー2つ) ダックリングズ株式会社 フロント／サーバーサイド 担当 VR関連のサービスをやってるベンチャー 新卒2年目 最近はRails +

   Vue.jsをずっとやってます

3. 今日のお題

4. react-vue

5. react-vueとは？ • Reactの上でVueが動くようにした • Vueのフォークで、VueのインスタンスがReactと連携できるようにするDecoratorを実装してい る（らしい） • 6月くらいに登場して若干物議を醸した (気がする) •

   https://github.com/SmallComfort/react-vue

6. react-vueのいいところ

7. react-vueのいいところ • Vue.jsの資産をReact上で使える • Reactの資産をVue.js上で使える • Reactの強力なライブラリをVue.js上に持って来ることが出来る

8. 実際に遊んでみる

9. サンプルコードはこちら https://syumai.github.io/

10. Demo

11. ファイル構成

12. ファイル構成

13. コンポーネントの宣言 ReactCounter.js VueCounter.vue

14. コンポーネントを使う index.js Vueのコンポーネントを普通に importして、Reactコンポーネント 内に組み込んでいる

15. ファイル構成 Vue→ React→ React→

16. もうちょっと遊んでみる

17. React Router + Vue = ?

18. 動いた！

19. react-router-vue • React RouterのQuick Startのコードをvue に書き換えてみた • https://reacttraining.com/react-router/ web/guides/quick-start •

    https://syumai.github.io/にサンプルへの リンクを貼ってます

20. 元のコード 1ファイル内でアロー関数を使いコンポーネントを宣言 最後に一つのコンポーネントにまとめていた

21. react-vue版 全コンポーネントを.vueファイルに書き出し App.vueでインポートした

22. react-vue版 普通にReact RouterのコンポーネントをVueのcomponentsにぶち込んだら使えた！

23. react-vue で React Router を使うコツ • match は普通に props で受け取る

    • Routeに渡すcomponentはdataに宣言する • <route … render=”() => <SomeReactComponent />”/>は動かないから、諦めてmethodsに 定義する ◦ 直接アロー関数をプロパティに書くと、 React is not definedで止まる • <link>がVueで動かないのでリネームする ◦ 適当に、<router-link>にリネームしました

24. react-vue で React Router を使うコツ • match は普通に props で受け取る

    • Routeに渡すcomponentはdataに宣言する • <route … render=”() => <SomeReactComponent />”/>は動かないから、諦めてmethodsに 定義する ◦ 直接アロー関数をプロパティに書くと、 React is not definedで止まる • <link>がVueで動かないのでリネームする ◦ 適当に、<router-link>にリネームしました これさえやれば、普通に動く！

25. ※実際にはVue Routerを使いましょう https://router.vuejs.org/ja/

26. 開発環境の作り方

27. 最小環境

28. 最小環境 • 普通のReactの開発環境 + react-vue + babel-plugin-transform-decorators-legacy

29. 最小環境でのコード • 通常のReactコンポーネントに対して、内 部のVueインスタンスの変化を監視するデ コレータを付ける • react-vueは、Vueのリアクティビティシス テムのみを含んでいるので、単体だとテン プレートは使えない

30. テンプレートを使うには？

31. react-vue-loader

32. サンプルはこちら https://syumai.github.io/

33. 次に試したいのは…

34. react-vue-native-scripts

35. None

36. Weex

37. 製作中は…

38. つらかった…

39. react-vue-native-scriptsで… • React Nativeのデザイン済みのコンポーネントで • 充実した標準ライブラリ、周辺ツールで 幸せになりたい…。

40. ※本番で使えるかはわかりません

41. Enjoy react-vue!