Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away