皆さんこんにちは、今回は「react-rails」というgemを使ってRailsにReactを導入する方法を紹介します。RailsにReactを導入する方法は複数ありますが、恐らくこれが容易で一般的なので選びました。注意点としてはRailsに依存した記述方になるので、好き嫌い分かれると思います。
因みに公式ドキュメントは下記のURLからアクセスできます。
react-railsのURL: https://github.com/reactjs/react-rails#server-side-rendering
下記の流れに沿って紹介していきます。
- 前提
- react-railsの導入
- componentの作成
- veiwで出力
前提
①既にrails-newなどでappを作成されている。
②rails5.0以降を使用
react-railsの導入
Gemfileの一番下に下記を記述して下さい。
gem 'webpacker'
gem 'react-rails'
※railsのバージョンによっては「webpacker」がデフォルトで入ってる場合があるのであらかじめご確認ください。
cdコマンドなどで対象のアプリディレクトリまで移動して下さい。
続いて下記のコマンドを順に実行しましょう。
$ bundle install
/*①*/ $ rails webpacker:install
/*②*/ $ rails webpacker:install:react
$ rails generate react:install
①と②のコマンドはrailsが5.0以降のバージョンでなければ実行できないので注意！
ひとまずこれで準備完了です！！
componentの作成
Reactを記述するにはcomponentsというディレクトリの中にファイルを作っていくことが一般的です。
手動で作成するでも問題ないですが、公式ドキュメントに沿って作成してみましょう。
ターミナルなどで下記のコマンドを実行して下さい。
$ rails g react:component HelloWorld greeting:string
すると下記のファイルが作成されます。
import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
render () {
return (
<React.Fragment>
Greeting: {this.props.greeting}
</React.Fragment>
);
}
}
HelloWorld.propTypes = {
greeting: PropTypes.string
};
export default HelloWorld
これでファイルの作成は完了です。
veiwで出力
作成したcomponentからReactの内容を出力してみましょう。
<%= react_component('HelloWorld', greeting: 'Mike') %>
ブラウザで出力内容を見てみましょう。
「Greeting: Mike」と出力されているはずです。
因みにcomponentsディレクトリ以外にも、自分でディレクトリを作成することもできます。
下記のコマンドを実行して下さい。
$ rails g react:component my_subdirectory/HelloWorld greeting:string
すると先ほど実行したコマンドではcomponentsディレクトリ下にjsファイルが作成されていましたが、今回は下記のようになります。
import React from "react"
import PropTypes from "prop-types"
class HelloWorld extends React.Component {
render () {
return (
<React.Fragment>
Greeting: {this.props.greeting}
</React.Fragment>
);
}
}
HelloWorld.propTypes = {
greeting: PropTypes.string
};
export default HelloWorld
コマンドで指定した「my_subdirectory」下にjsファイルを作成できました。
viewに呼び出す場合は下記を記述して下さい。
<%= react_component("my_subdirectory/HelloWorld", { greeting: "Hello from react-rails." }) %>
ブラウザを確認すると「Greeting: Hello from react-rails.」と出力されているはずです。
react_componentメソッドで簡単に呼び出せるので便利ですね。
私もまだ導入したてなので、これから色々いじってみようと思います。
余談ですが、最近冷え込む日が多くなって来ましたよね。
悴み過ぎて、マネキン状態の手でキーボード打っています。（暖房付ければええやろ...）
最後まで読んでいただきありがとうございました！！