2024.10.01
【勉強】ミドルウェア・アプリケーションのEOL・EOSLについて学んでみた
2018.05.25
プログラミングRails5.1にReactを導入
こんにちは、KSです。
今日は既存のRailsアプリにreact-railsとwebpackerというgemを使って、
Reactを導入する方法を書いてみます。
Gemfileに以下を追加して、bundle install
gem 'react-rails' gem 'webpacker'
WebpackerのReactインストールの実行
rails webpacker:install rails webpacker:install:react
これでReactに必要なフォルダやファイルが生成されてReactが入ります。
webpackerによりapp/javascript/packsにhello_react.jsxが生成されているのがわかると思います。
これはReactを使って、「Hello React」を表示させる簡単なものです。
これを使って、Reactが使えるようになったかを確認してみます。
<!DOCTYPE html> <html> <head> <title>CalculatorReact2</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'application' %> <%= javascript_pack_tag 'hello_react' %> </head> <body> <%= yield %> </body> </html>
この状態でrailsサーバーを起動すると、「Hello React」が表示されます。
react-railsではReactコンポーネントを以下のコマンドで作成できます。
rails g react:component コンポーネント名
そうするとapp/javascript/component/ の配下にコンポーネント名.jsが生成されます。
例えば、rails g react:component calculator だと
app/javascript/component/calculator.jsが生成されます。
あとは好きなviewで
<% react_component ‘calculator’ %>
というようなview helperを記載しておくと、
app/javascript/component/calculator.jsを読み込んでくれます。
上記と合わせて、app/views/layouts/application.html.erbには
<%= javascript_pack_tag ‘application’ %>
を記載しておく必要があります。
react-railsを入れずに、webpackerのみでもReactを導入できます。
webpackerのみの場合、react_componentヘルパーは使えません。
また、通常どおりrailsサーバーを起動しても、Reactは動いてくれません。
railsサーバー起動後、別ターミナルで以下を叩きコンパイルするとReactを読み込んで反映されます。
./bin/webpack-dev-server
コンポーネントを入れるフォルダを作成
webpackerのみの場合、app/javascript/配下にはpacksフォルダしか生成されないので、
ここで任意のフォルダを作成します。
app/javascript/calculator/
import React, { Component } from 'react'; class Calculator extends Component { render() { return ( <div> <h1>Calculator is working!!</h1> </div> ) } } export default Calculator;
import React from 'react'; import ReactDOM from 'react-dom'; import Calculator from './calculator'; document.addEventListener('DOMContentLoaded', ()=> { const container = document.body.appendChild(document.createElement('div')); ReactDOM.render(<Calculator/>, container) })
app/javascript/packs/calculator.jsを作成し、その中に読み込むフォルダを記載
import ‘calculator’
そうするとapp/javascript/calculator/ 配下のコンポーネントをimportします。
あとはapp/views/layouts/application.html.erbのHEADタグ内にreact-railsの時と同じようにjavascript_pack_tagを追加し、
app/javascript/packs/calculator.jsを指定してあげるとviewで読み込んでくれます。
<!DOCTYPE html> <html> <head> <title>CalculatorReact2</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all' %> <%= javascript_include_tag 'application' %> <%= javascript_pack_tag 'calculator' %> </head> <body> <%= yield %> </body> </html>
導入方法は以上です。
比較的簡単にできると思うので是非試してみてください。
【記事への感想募集中!】
記事への感想・ご意見がありましたら、ぜひフォームからご投稿ください!【テクノデジタルではエンジニア/デザイナーを積極採用中です!】
下記項目に1つでも当てはまる方は是非、詳細ページへ!Qangaroo(カンガルー)
【テクノデジタルのインフラサービス】
当社では、多数のサービスの開発実績を活かし、
アプリケーションのパフォーマンスを最大限に引き出すインフラ設計・構築を行います。
AWSなどへのクラウド移行、既存インフラの監視・運用保守も承りますので、ぜひご相談ください。
詳細は下記ページをご覧ください。
最近の記事
タグ検索