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
160
react-vueの遊び方 - Gotanda.js
syumai
October 06, 2017
Tweet
Share
More Decks by syumai
See All by syumai
利用者視点で考える、イテレータとの上手な付き合い方
syumai
5
500
ECMAScript仕様を読むのに必要な知識 - ダイジェスト版
syumai
5
2.9k
コード生成を活用したgqlgen+dataloaderの実装パターン解説
syumai
6
850
Goのmultiple errorsについて (2024年4月版)
syumai
4
6.9k
ECMAScript仕様の読み方ガイド 〜比較演算子編〜
syumai
6
840
Go言語で始めるCloudflare Workers
syumai
8
2.2k
xoのコード生成でgqlgenのDataLoader実装を楽にした話
syumai
2
350
Goのジェネリクスを活用する
syumai
4
3.8k
Goでスタックトレースを扱う方法がややこしい件について
syumai
2
5.8k
Other Decks in Programming
See All in Programming
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
690
Vue.js学習の振り返り
hiro_xre
1
100
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
290
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
9
1.7k
飲食業界向けマルチプロダクトを実現させる開発体制とリアルな現状
hiroya0601
1
290
Mercari AI/LLM Hackathon TeamBの発表資料
imaikosuke
0
190
Workflow automationによるインシデント原因調査の自動化
showwin
1
110
Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト@Vue Fes Japan 2024
shingangan
3
690
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
1
1.4k
CSC305 Lecture 09
javiergs
PRO
0
120
Going Staff - Keynote edition
pragtob
0
370
watsonx.ai Dojo #3 プロンプトエンジニアリング入門
oniak3ibm
PRO
0
460
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
131
8.9k
Writing Fast Ruby
sferik
626
60k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Become a Pro
speakerdeck
PRO
24
4.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
Agile that works and the tools we love
rasmusluckow
327
21k
Navigating Team Friction
lara
183
14k
Statistics for Hackers
jakevdp
796
220k
Bash Introduction
62gerente
608
210k
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!