1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

react-railsでRailsにReactを導入する

Last updated at Posted at 2018-12-02

#概要
Railsの一部にReactを使うためにreact-railsを利用しました。
バージョンの違いでつまずいたので、共有します。

#参考にした記事
react-railsを使ってReactのTutorialをやってみる
2年前の記事なので少し古いですが、generatorなども含め丁寧に説明されています。前のバージョンだとこれが正のようです。
基本的にはこれに沿って進めると良いですが、そのままコピペするとうまくいかなかったので、注意が必要です。

#環境

  • ruby 2.5.1
  • rails 5.2.1
  • react-rails 2.4.7

#バージョンごとの書き方の違い
##以前

app/assets/javascripts/components/comment_box.js.jsx
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.createClasscreateReactClassに書き換えるとうまく動きます。

参考記事:今からはじめる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を見るなどして定期的に追っていく必要がありそうです。
うまくいったときに、なぜうまくいったのか&うまくいかなかったのかを分析することは重要ですね。

1
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?