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

執筆者:

関連記事

Rails5.1でフォームをウィザード化〜wicked

By: Doll Joints – CC BY 2.0 目次1 gem wicked2 ウィザード用のコントローラーを作成する3 ルーティングの設定4 既存のコントローラーのcreateメ …

TwitterBootstrapとGoogle Code Prittifyでうまくハイライトされないらしい

ThoughtBotの『Backbone.js on Rails』の目次と見出しをななめ読み

By: John – CC BY 2.0 learn.thoughtbot.com/products/1-backbone-js-on-rails 買いました 電子書籍で137ページに$4 …

Railsでチェックボックスで複数選択するとき〜check_box_tag

By: Luca Masters – CC BY 2.0 目次1 問題2 アンサー3 情報 問題 チェックボックスで複数選択可のフォームでうまくparamsにはいらない 例1 [crayo …

no image

Ubuntu server12.04でRails4とPostgreSQL9.3をつかう〜hstoreとか

目次1 準備2 rails new3 config/database.yml4 hstoreとarrayを試してみる 準備 Ubuntu server12.04にPostgreSQL9.3をインストー …