Railsで使えるGem

RailsでReactコンポーネントをつかう

投稿日:2018年7月3日 更新日:

React on rails

React on railsは、RailsからReact.jsを使いやすいようにしたgem

webpackerでいいとも思えるけど、サーバーサイドレンダリング(SSR)が簡単にできたりする.

インストール

webpackerのインストール

Gemfileに、 gem 'webpacker' を加えてbundle.

react_on_railsのインストール

Gemfileに、 gem 'react_on_rails' を加えてbundle.

gitのステージをクリーンにしておく(git commitとか).

reduxバージョンもインストールできる.

react on railsで生成されるファイル

Procfile.dev

Procfileが生成されるので、foremanなどでまとめてサーバー起動できる.

routes.rb

まず、routes.rbに/hello_worldが加えられる.

hello_world_controller.rb

hello_worldコントローラーをみると、indexアクションが定義されてる.

layouts/hello_world.html.erb

layoutの方をみると、webpackのjavascriptが読み込まれてる.

index.html.erb

つぎに、index.html.erbの方をみると、react_componentメソッドが使われている.
サーバーサイドレンダリングは、ここでprerender: trueにすればよい.
propsで、react.jsのpropsに値を渡すことができる.

app/javascripts

javascripts以下はこんな感じ.

hello-world-bundle.js

react_on_railsで設定したエントリポイントはhello-world-bundle.js
そして、ここで、ReactOnRails.registerしてるので、ビューヘルパーのreact_componentメソッドで”HelloWorld”を見つけられる.

HelloWorld.jsx

Reactコンポーネントの実体はこちら

material-uiをつかう

material-uiは、マテリアルデザインを実装したReactコンポーネント.
バージョン1以降は、次のようにインストールできる.

こんな感じでReactコンポーネントが使える.

AppBar

bodyのマージンを0にしておく.

class化して、メニュー用のハンバーガーアイコンを追加

Fab

Fabは右下に置きたい.
withStylesでコンポーネントにスタイルを適用できる.

Dialog

FabからDialogを起動させてみる.
自分で作ったコンポーネントにonClickを設定しても反応しない.
そこで、handleClickOpen関数をpropsで子にわたす.

で、Fabの方にonClickメソッドを設定する.

Drawer

ハンバーガーメニューをクリックすると、ドロワーメニューが出てくるやつ.

HeaderというコンポーネントでNavbarとDrawerをくくって状態管理.

で、ドロワーのコンポーネントをつくる.

最後に、NavBarの方にクリックイベントを設定する

React Developer Tools

Reactのデバッグ用のChromeエクステンション.

情報

安定のドットインストール.

英語だけど、おすすめ.一番わかりやすかった.

reduxとredux-reactを分けて1から説明してくれるのでわかりやすい.

-Railsで使えるGem
-, , , , ,

執筆者:

関連記事

Rails4でつかえるインラインエディタを試してみた〜X-editable-rails

目次1 x-editable2 bootstrapを導入3 x-editable-rails4 サンプルアプリ x-editable 文字をダブルクリックして編集できるやつ x-editable vi …

no image

Rails3.2.8でPostgreSQLを使う(開発環境)〜pg gem

環境 Ubuntu server12.04にPostgreSQLをインストールする 参考 #342 Migrating to PostgreSQL @railscasts 目次1 準備2 データベース …

Rails3でajaxでD&Dでまとめてファイルアップロードをスクラッチで~jQueryFileUpload for Rails

参考 Rails3でajaxでD&Dでまとめてファイルアップロード~jQueryFileUpload for Rails Rails3でajaxでD&Dでまとめてファイルアップロード2 …

Rails3.2でよくあるデータ構造を追加してくれる系のGemのメモ〜タグ付け、評価システム、バージョン、論理削除、木構造とか

By: Jeff Dlouhy – CC BY 2.0 よくある構造というかよくあるスキーマを追加してくれるModelに一言書いておくだけで便利なGemをメモ(未検証)   目次 …

no image

Rubyでffmpegのラッパーを使う~streamio-ffmpeg

  github.com/streamio/streamio-ffmpeg rubyでffmpegが扱える高機能ラッパー 導入 [crayon-5d32a3f88fad3184158537/ …