react-vueの遊び方 - Gotanda.js

5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=47 syumai
October 06, 2017

react-vueの遊び方 - Gotanda.js

5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=128

syumai

October 06, 2017
Tweet

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!