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
-, , , , ,

執筆者:

関連記事

Rubyでdocxをいろいろ分析してみた

  目次1 解凍~minizip2 ファイルを開く~File.open3 全ファイルを解凍せずにzip内の必要なファイルだけを開く~zipruby4 置換~gsub5 xmlの操作~noko …

no image

Rails3.2でBackbone.jsとPrivate_pubでToDoアプリをリアルタイム化(できた!)

参考 Rails3.2でリアルタイムメッセージング~Private_pub、Faye Rails3.2とBackbone.jsでToDoアプリを作ってみた~backbone-on-rails &nbs …

RailsでECサイト構築6 固定ページを作る~spree

  ECサイトを作成するときには日本の法律にしたがって色々と表示しなければならない 表示しなければならないことについては次のページが詳しかった 本サイトについて 実際のECサイトをみれば実例 …

Rails3.2のアプリにユーザー機能を追加する~Devise

By: Ethan Lofton – CC BY 2.0 目次1 はじめに2 インストール3 次にやること4 メッセージを日本語化する5 デバイスモデルにカラムを追加6 サインアップできな …

連続的な位置情報の取得とHerokuへのアップ~HTML5 Geolocation API

  目次1 連続的な位置情報の取得2 heroku3 結果 連続的な位置情報の取得 連続的な位置情報の取得はこんなかんじで書いてみた [crayon-5cc2f28d133b16475901 …