Reactとrailsの変数受け渡しをどうするか調べてみた

皆さんこんにちは、個別指導塾コミット塾長、AWESOMEの開発担当の船津です。

最近rails5.1にwebpack標準装備と聞いて、早速reactを載せて遊んでいます。

塾で使うアプリを作るときにreact nativeで移植したいのでreactを本格的に使い始めました。

今回はrailsでreactを使ってアプリを作る時に、変数をどうやって渡すのか調べてみました。

railsの仕組みを使ってpropsとして渡す

こちらを参考にしてみてください。
今のところこちらが良さそうです…

普通に埋め込んでみる

普通にテンプレートに埋め込んでみましょう。
これだと最初の読み込みの時だけしか使えないので汎用性としては低いです。

準備

環境を作らないといけないので、おもむろにこちらを見て準備しましょう

準備ができたら、packs/test.jsというファイルを作りましょう。

Railsのテンプレートも作りましょう。
データベースと適当なデータが要るので作ります。
rails g scaffold items

適当にデータも入れておきましょう(ポチポチ)
Reactとrailsの変数受け渡しをどうするか調べてみた

Itemのviewの一番下に以下を追加してみましょう。

これで再読込するとこんな感じになっています。

Reactとrailsの変数受け渡しをどうするか調べてみた

おわり

Railsとreactを使う場合、完全にSPAとして作る場合と、ちょっとした動きを付けるだけの場合(この場合vue.js等のほうが向いてそう)があり、どのように境界線を引き、設計するか現段階では難しいところがあると思います。

これからもちょっとずつ触っていきます。

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →