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
36. Weex
37. 製作中は…
38. つらかった…
39. react-vue-native-scriptsで… • React Nativeのデザイン済みのコンポーネントで • 充実した標準ライブラリ、周辺ツールで 幸せになりたい…。
40. ※本番で使えるかはわかりません
41. Enjoy react-vue!