react-vueの遊び方 - Gotanda.js

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

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

今日のお題

react-vue

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

react-vueのいいところ

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

実際に遊んでみる

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

ファイル構成

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

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

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

もうちょっと遊んでみる

React Router + Vue = ?

動いた！

react-router-vue • React RouterのQuick Startのコードをvue に書き換えてみた • https://reacttraining.com/react-router/ web/guides/quick-start •
https://syumai.github.io/にサンプルへのリンクを貼ってます

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

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

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

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

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

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

開発環境の作り方

最小環境

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

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

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

react-vue-loader

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

次に試したいのは…

react-vue-native-scripts

製作中は…

つらかった…

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

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

Enjoy react-vue!

react-vueの遊び方 - Gotanda.js

react-vueの遊び方 - Gotanda.js

More Decks by syumai

Other Decks in Programming

Featured

Transcript