vdeepTweetPocketこんにちは、okutani(@okutani_t)です。React』を導入する手順について解説しています。クックパッド開発者ブログ)。gem、ということですね。今回は、導入したWebpackerを利用してReactを導入する手順まで解説しています。5.1.3、MacOS(Sierra)を利用しています。RailsにWebpackerとReactを導入する方法についてみていきましょう。まとめWebpackerの導入なにはともあれ、Gemfileを編集しましょう。以下をGemfileに追記します。vendor/bundle」をつけてプロジェクト直下に配置しました。newの時点でWebpackerを導入することもできます。Rails5.1以上から利用可能です。--webpackWebpackerと同時にReactを導入することもできます。Rails5.1以上から利用できます。--webpack=react本記事では、既存のプロジェクトにWebpackerを導入する前提で話を進めていきます。Webpackerを使うのにyarnが必要なのでインストールします。brewコマンドを使うためにHomebrewが必要です。vdeep」を参考に。yarnこれでWebpackerを利用する準備が整いました。Webpackerのセットアップ以下のコマンドで、Webpackerのセットアップをおこないます。?いろいろとファイルが作成されて、Webpackerのセットアップが完了しました。Reactの導入それでは、Reactを導入していきましょう。webpacker:install」をおこなった上で実行しないと途中でコケてしまうので注意してください。?これでReactが導入されました。ファイルをビルドするWebpacker・React導入時に「app/javascript/packs/application.js」「app/javascript/packs/hello_react.jsx」というファイルが自動で作成されています。)})これらをビルドしてブラウザで読み込めるようにしてみましょう。開発環境でビルドしたファイルを読み込むには、「config/environments/development.rb」に以下を追記しておく必要があります。追記endそれでは、以下のコマンドでjsファイルをビルドしましょう。modules無事にビルドが成功しました。動作確認Webpacker・Reactがきちんと動作するか確認してみます。「app/views/layouts/application.html.erb」のhead内に以下を追記します。動作確認用に、てきとうにTOPページを作成。index「config/routes.rb」を以下のように編集します。s」でサーバーを立ち上げ「http://localhost:3000」にアクセス。consoleを表示してみます。Webpacker」が表示されてるか確認してみましょう。React!」と表示されていれば、Reactも問題なく動作しています。あとは「app/javascript/packs/application.js」もしくは「app/javascript/packs/hello_react.jsx」を編集していけばOKですね。新しくファイルを追加してもOKです。ビルドサーバーの利用ただし、このままだと毎回ビルドしないといけないので、ビルドサーバーという便利なツールを利用します。先ほどは「$bin/webpack」としてビルドしていましたが、代わりに以下のコマンドを使います。bin/webpack-dev-serverこれでビルドサーバーが立ち上がり、.jsファイルを変更・保存するたびにブラウザを自動更新してくれます。s」もおこなっておく必要があります。bin/webpack-dev-server」を同時に実行してくれて便利です。興味のあるかたは調べてみてください。React』を導入する方法について解説しました。RailsでWebpack、Reactを利用する際の参考になれば幸いです。ヒトコトokutani_tこれでRailsで便利にWebpackが利用できますね。Reactもかんたんに導入できて良い感じです!Web開発のお仕事を募集していますフリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています(現在の業務量によってお受けできない場合もあります)。CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。(@okutani_t)1990年生。2016年8月にWebエンジニアとしてフリーランスに。プログラミング、カメラ、邦楽ロック、ハリネズミがすき。Portfolioをどうぞ。スポンサーリンクvdeepの人気記事Macを完全に初期状態に戻す方法iPhoneで「絶対に」やっとくべきキーボード設定3つ。超簡単だからみんなにやって欲しいよ“たった1つ”の超シンプル禁煙方法。これで僕はノンスモーカーになれたMacの容量を食ってる「その他」を調査してみたMacBookで複数モニターを使う方法。