react-vueの遊び方 - Gotanda.js

5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=47 syumai
October 06, 2017
Programming
0
71

react-vueの遊び方 - Gotanda.js

5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=128

syumai

October 06, 2017
Tweet

More Decks by syumai

See All by syumai
5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=48 syumai
0
91
5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=48 syumai
1
43
5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=48 syumai
1
1.7k
5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=48 syumai
2
490
5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=48 syumai
1
260
5e511bb6d01d856b4ec7a0e5b1f6a2f0?s=48 syumai
6
4.9k

Other Decks in Programming

See All in Programming
85caff7f89434c74e9c6b4287d3c8e05?s=48 yoseiyamagishi
2
190
83722380372c00bd75ac920f2089f6aa?s=48 zacky1972
1
190
2607469010bfd7a0f0bd7546328cb01d?s=48 uakihir0
1
100
9bf923e39671cde83584e3e926296c13?s=48 kishikawakatsumi
13
3k
06641ec93c5914e0db74cddff2ec6004?s=48 objectiveaudio
1
100
E586b46d5b09f8109beb66bb146e4f20?s=48 tamappe
1
300
B49933741d74e122bc1314b2975e9fc9?s=48 mrtc0
5
2k
820c51c7e79c45286e41a41a2a721c0f?s=48 saiten
6
380
Fd3442482c4a9b2d2353448a6e379823?s=48 matsu_chara
2
410
6d64a4d4ab6201f2ce57e3befc687785?s=48 yoshi0202
0
130
5ad0bb268dd2605b09165d464308cb7e?s=48 igaiga
2
120
4bd69b0ec8e5731a5332ee100ad8fb6d?s=48 entaku
2
160

Featured

See All Featured
D83926c323d4f9289f947b4b4e76b939?s=48 jensimmons
205
9.9k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
60
2.4k
F29327647a9cff5c69618bae420792ea?s=48 tenderlove
49
3.2k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
356
62k
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
222
46k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
241
20k
D67fff74178013024d833b3eec6cf27f?s=48 lynnandtonic
266
16k
Ba530e786553390f3fb271848485681c?s=48 3n
160
22k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
55
9.2k
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
10
1.2k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
E190023b66e2b8aa73a842b106920c93?s=48 zenorocha
296
39k

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!