#概要
Railsの一部にReactを使うためにreact-railsを利用しました。
バージョンの違いでつまずいたので、共有します。
#参考にした記事
react-railsを使ってReactのTutorialをやってみる
2年前の記事なので少し古いですが、generatorなども含め丁寧に説明されています。前のバージョンだとこれが正のようです。
基本的にはこれに沿って進めると良いですが、そのままコピペするとうまくいかなかったので、注意が必要です。
#環境
- ruby 2.5.1
- rails 5.2.1
- react-rails 2.4.7
#バージョンごとの書き方の違い
##以前
var CommentBox = React.createClass({
render: function() {
return (
<div className="commentBox">
Hello, world! I am a CommentBox.
</div>
);
}
});
##React15.5以降
React.createClassが非推奨となり、別パッケージに分かれたため、その影響によりreact-railsでReact.createClass
が使えないようです。
下記の参考記事にも書いてありますが、代わりにcreateReactClass
を使うと良いです。
generatorでComponentを作成すると、自動的に新しい書き方になっています。
つまり、React.createClass
→createReactClass
に書き換えるとうまく動きます。
参考記事:今からはじめるReact.js〜propsとstate、それからrefs〜
#余談
generateorで作成すると拡張子が.js.jsx
になりますが、これは.jsx
に書き換えても大丈夫でした。
またコンポーネント名とファイル名は一緒でなくても大丈夫です。
重要なのは下記です。
-
rails g react:install
でcomponents.jsが作成される、application.jsにrequireが追記されること -
rails g controller [コントローラ名]
で自動作成したコントローラがapplication_controllerを継承すること
#さいごに
Reactはバージョンの変化による影響を受けやすいので、React公式tutorialを見るなどして定期的に追っていく必要がありそうです。
うまくいったときに、なぜうまくいったのか&うまくいかなかったのかを分析することは重要ですね。