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
4
580
Goのmultiple errorsについて (2024年4月版)
syumai
4
1.6k
ECMAScript仕様の読み方ガイド 〜比較演算子編〜
syumai
6
630
Go言語で始めるCloudflare Workers
syumai
6
1.6k
xoのコード生成でgqlgenのDataLoader実装を楽にした話
syumai
2
240
Goのジェネリクスを活用する
syumai
2
2.8k
Goでスタックトレースを扱う方法がややこしい件について
syumai
2
5k
What's new in Go 1.20?
syumai
2
1.8k
Cloudflare WorkersでGoを動かすライブラリを作っている話
syumai
1
1.2k
Other Decks in Programming
See All in Programming
Implementing Domain Driven Design with Spring
maciejwalkowiak
2
1k
Dive into gomock / Go Conference 2024
utgwkk
12
3.2k
"統合ERP"とアプリケーションアーキテクチャ
keitatomozawa
0
510
PHP Internals わいわい #1 の資料
youkidearitai
PRO
1
120
Introduction to safe programming with numeric library / 数値ライブラリで始める安全なプログラミング
boykush
2
13k
ゆるっと話すSLI/SLOを設定してよかったこと出来ていないこと
maaaato
2
640
詳解 "Fixing For Loops in Go 1.22" 自作linterをgolangci-lintへコントリビュートした話
qualiarts
8
750
Deriving derived state: derivedStateOf explained (dcSF 24)
zachklipp
1
160
You may not need XXX in Node.js
masashi
5
750
My favorite script, "dsl.rb"
yui_knk
2
570
Pure GoでアニメーションGIFのリサイズを実装する
logica0419
0
240
Goでのチーム開発に途中参画した私が納得して実装を進めるためにやったこと ~ 命名編 ~
kaorumuta
0
150
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
423
64k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
28k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
118
18k
Navigating Team Friction
lara
180
13k
Designing Experiences People Love
moore
136
23k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
Documentation Writing (for coders)
carmenintech
61
4.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
19
7k
Robots, Beer and Maslow
schacon
PRO
155
8k
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!