Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
react-vueの遊び方 - Gotanda.js
Search
syumai
October 06, 2017
Programming
0
150
react-vueの遊び方 - Gotanda.js
syumai
October 06, 2017
Tweet
Share
More Decks by syumai
See All by syumai
コード生成を活用したgqlgen+dataloaderの実装パターン解説
syumai
6
710
Goのmultiple errorsについて (2024年4月版)
syumai
4
4.1k
ECMAScript仕様の読み方ガイド 〜比較演算子編〜
syumai
6
690
Go言語で始めるCloudflare Workers
syumai
8
1.8k
xoのコード生成でgqlgenのDataLoader実装を楽にした話
syumai
2
290
Goのジェネリクスを活用する
syumai
2
3k
Goでスタックトレースを扱う方法がややこしい件について
syumai
2
5.3k
What's new in Go 1.20?
syumai
2
1.8k
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
2
1.3k
Other Decks in Programming
See All in Programming
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
140
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Product Management LT会_クアンド新家
shinshin
0
210
CSC307 Lecture 12
javiergs
PRO
0
220
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
CSC307 Lecture 08
javiergs
PRO
0
330
20240706_CDKConf
takuyay0ne
0
1.2k
How to use Macrobenchmark
veronikapj
0
160
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
CSC307 Lecture 11
javiergs
PRO
0
240
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
小さな開発会社を作った理由
polidog
0
1.9k
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
325
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
A Tale of Four Properties
chriscoyier
155
22k
Bash Introduction
62gerente
607
210k
Atom: Resistance is Futile
akmur
261
25k
4 Signs Your Business is Dying
shpigford
178
21k
Optimizing for Happiness
mojombo
373
69k
RailsConf 2023
tenderlove
16
720
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Building an army of robots
kneath
301
42k
Unsuck your backbone
ammeep
666
57k
Transcript
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/
Demo
ファイル構成
ファイル構成
コンポーネントの宣言 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
None
Weex
製作中は…
つらかった…
react-vue-native-scriptsで… • React Nativeのデザイン済みのコンポーネントで • 充実した標準ライブラリ、周辺ツールで 幸せになりたい…。
※本番で使えるかはわかりません
Enjoy react-vue!