reactのtutorialをcoffee scriptで行っているが、エラーが出てしまう

Question

こんにちは。

railsでtutorialを行っておりますが、エラーになってしまい、理由がわかりません。

エラーメッセージ

Uncaught Invariant Violation: ReactDOM.render(): Invalid component element. Instead of passing a string like 'div', pass React.createElement('div') or <div />.

ソースコード
app/asset/javascripts/components/comment_box.js.jsx.coffee

$ ->
  CommentBox = React.createClass
    render: ->
      `<div className="commentBox">
        hello, world! i am a commentbox.
      </div>`

  ReactDOM.render '<CommentBox />', document.getElementById('content')

コンパイル後

$(function() {
  var CommentBox;
  CommentBox = React.createClass({
    render: function() {
      return <div className="commentBox">
        hello, world! i am a commentbox.
      </div>;
    }
  });
  return ReactDOM.render('<CommentBox />', document.getElementById('content'));
});

app/views/comments/index.html/slim

#content

呼び出すものはCommentBoxになっている気がするのですが・・・

よろしければご教授をお願いしますm(_ _)m

生のjsより、coffee scriptで書いていきたいので・・・

Answer 1

CoffeeScriptでするなら、Googleで「CoffeeScript react tutorial」と検索して見ると良いでしょう。

しかし、一番上に出て来るQiitaの記事は13.0系を使った古い記事ですね。なんですか、このraccyという作者は。私の方から私に対して0.15系で書き直すように催促しておきます。

---

【追記】
最新の0.15系で書き直させておきました。もう一つ、JSXを使わない純粋CoffeeScriptの場合も書かせておきました。参考にしてみてください。

CoffeeScriptであればJSX記法にこだわる必要はあまりありません。JSX記法で無くてもJade/Slimのような感じでそれなりに綺麗に書けるからです。どちらが良いのかは一長一短でなんとも言えませんが、Babel(ES6)やTypeScriptのようにJSX記法の方が圧倒的に書きやすいと言うことはないと思っています。

Comments

[ayu]

raccyさん、良記事ありがとうございますm(_ _)m

[raccy]

0.15系を用いた最新のチュートリアルに基づいて書き直しましたので、参考にしていただければ幸いです。

[ayu]

raccyさん、わざわざ書き直していただき、ありがとうございます！
確認させていただきました。
こういうのがあっさりと書けるように頑張ります！

Answer 2

coffee-scriptでjsxを書きたい場合はcoffee-reactを使用してください。

Comments

[ayu]

なるほど・・・
そういうことだったのですね。
ありがとうございます！