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

執筆者:

関連記事

no image

Carrierwaveでpdfのサムネイルを作成する

Rails3で帳票印刷を試す~thinreports

By: ZZ Bottom – CC BY 2.0 目次1 Thinreports2 とりあえずサンプルを試してみた3 ソースを見てみる1~詳細画面4 ソースを見てみる2~一覧表 Thin …

no image

Private_pub(Faye)の管理にForemanを使う~Foreman & Upstart

foremanはFayeサーバーのようにRailsのサーバーとは別プロセスで動くサーバー類をまとめて管理するgemだ 参考 railscasts.com/episodes/281-foreman?la

Rails4.0で添付したpdfファイルの中身を全文検索の対象にする〜carrierwave、pdftotext、pg_bigm

By: Uncalno Tekno – CC BY 2.0 環境 Ubuntu server 12.04 sunspot_cellにしようとおもってたけど、ライブラリとか勉強することが多く …

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

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