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

執筆者:

関連記事

Rails3.2のproduction環境で動画再生~flowplayer+carrierwave+nginx+unicorn

  By: Creative Tools – CC BY 2.0 目次1 前提2 unicornの設定3 nginxのインストール4 nginxの設定5 アセット関係6  ストリ …

Rails4.2でselectを絞込できるselect2を使ってみた〜select2

By: Metropolitan Transportation Authority of the State of New York – CC BY 2.0 目次1 select22 Ge …

no image

Rails4でOpenDocumentText(.odt)を作成~serenity(未完)

StackOverFlowでの質問に返事が来てたよ!ヽ(=´▽`=)ノ stackoverflow.com/questions/13080178/encodingundefinedconversion

ActiveRecord使い方まとめ

By: North Carolina National Guard – CC BY 2.0 ActiveRecord入門|ドットインストールをみて個人的まとめ ActiveRecord4の …

RailsでECサイト構築~spree

  *インストール方法を書き換えました.前の方法だとアドミンユーザーが登録されませんでした. 今回はインストール+日本語化だけ 目次1 インストール2 日本語化 インストール gem [cr …