Rails + React + Material UI + Webpack / babel + foremanで動かすアプリケーション


Material UIをRailsに導入する方法を書きます。
使用する技術は、Rails + React + Material UI + Webpack / babel + foremanです。

モジュールシステムはbrowserifyでも可能ですが、今回は相当量のJSを使用していたため、コード分割などができるWebpackを採用しました。

環境構築

npmを使用するので、node.jsが入っている必要があります。
macであればhomebrewでインストール可能です。

RailsとReact + webpack導入

Railsアプリケーションを作成

gemfileに、react_webpack_railsを追加。

そして、bundle install後、こちらのコマンドでインストール


package.jsonの設定

プロジェクト管理や, 環境のセットアップを行うpackage.json(1階層目にある)を編集し、material-uiや一部のコンポーネントで必要なreact-tap-event-pluginなどを追加します。

設定を元にインストールします。

Material-UIを使ってみる

app/react/components内に、Main.jsを作成して、サンプルコンポーネントを作ってみます。

app/react/index.jsとapp/views/react_examples/component.html.erbを以下に変更しましょう。

Foremanで同時に動かす

webpack-dev-serverとrails serverを同時に動かす必要があるため、複数のプロセスを管理できるツールであるForemanを使用します。

インストール

Procfile を配置&コマンドを入力

起動

その後、
http://localhost:3000/react_examples/component

で、Material-UIコンポーネントのサンプルが表示されれば、完了です!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


kunishii

國重侑輝 Campus inc CEO。京都でスタートアップが生まれ、育ち、旅立つ場所を作ってます。最近の興味は、Ruby・Rails / UX / React / スタートアップファイナンス /グロースハック / AWS / グラフデータベース / 自然言語処理など。 http://campus-inc.org