個人のメモ用です。
#gem: webpackerの追加とインストール
githubのgemをコピペ
rails/webpacker-github
gem 'webpacker', '~> 4.x'
yarnが勝手にやってくれます。
yarnをインストールしていなければ、Homebrewなどでインストールをたしかしないと行けなかったかな？
$bundle
$bundle exec rails webpacker:install
#Reactの導入
新しくプロジェクトを作るなら
$rails new myapp --webpack=react
既存のプロジェクトに導入するなら
$bundle exec rails webpacker:install:react
layouts/application.html.erbに一行追加する
layouts/application.html.erb
<head>
<title>ReactIine</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application' %> #この一行を追加
</head>
#gem: react-railsの追加とインストール
gem 'react-rails'
Reactのコンポーネントを作成することができるようになるコマンドかな
$bundle
$rails generate react:install
これで準備完了です！！
#最初のコンポーネントを作成
ちゃんと出来ているかテストするために、
コマンドラインでHelloWorldというコンポーネントを作ります。
$rails g react:component HelloWorld greeting:string
app/javascript/components/HelloWorld.jsに以下の用なファイルが出来ます。
javascript/components/HelloWorld.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
どこのビューでもいいので以下のコードを付け加えます。
今回はわかりやすいようにapplication.html.erbに貼ります。
layouts/application.html.erb
<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>
Greeting: Hello from react-rails.と表示されれば、テスト完了です！！