リアクションのレンダリングエラーを理解する

Question

これは初めての反応です。 render関数で次のコードがエラーを返す理由を理解できません。

var LikeButton = React.createClass({ 
     getInitialState: function() { 
      return { liked: false }; 
     } 

     render: function() { 
      if (this.state.liked) 
       return <div>Ti piace!</div> 
      else 
       return <a href="#" onClick={this.doLike}>Mi piace</a> 
     } 

     doLike: function() { 
      this.setState({ liked: true }); 
     } 
    }); 
    ReactDOM.render(<LikeButton />, document.body); 

このコードは、タグ<script type = "text/babel">にあります。

Answer 1

React.createClassは、パラメータとしてオブジェクトを受け取り、オブジェクトのすべてのプロパティは、カンマ（、）によって分離される必要があります。

あなたはこれを実行する必要があります。

var LikeButton = React.createClass({ 
    getInitialState: function() { 
     return { liked: false }; 
    }, // comma 

    render: function() { 
     if (this.state.liked) 
      return <div>Ti piace!</div> 
     else 
      return <a href="#" onClick={this.doLike}>Mi piace</a> 
    }, // comma 

    doLike: function() { 
     this.setState({ liked: true }); 
    } 
}); 
ReactDOM.render(<LikeButton />, document.body); 

あなたはあなたのコードがthis fiddleに取り組んで見ることができます。

Answer 2

babelをスクリプトタイプで提供しているが、コードが実際にコンパイルされたとは限りません。

Create React Appユーティリティを使用して、リアクション開発の有効な環境をセットアップできます。

Answer 3

エラーは以下の通りである：

Uncaught SyntaxError: embedded: Unexpected token (7:3) 
    5 |   } 
    6 | 
> 7 |   render: function() { 
    | ^
    8 |    if (this.state.liked) 
    9 |     return <div>Ti piace!</div> 
    10 |    else 
    at Parser.pp.raise (browser.js:65620) 
    at Parser.pp.unexpected (browser.js:66850) 
    at Parser.pp.expect (browser.js:66844) 
    at Parser.pp.parseObj (browser.js:65244) 
    at Parser.pp.parseExprAtom (browser.js:65040) 
    at Parser.parseExprAtom (browser.js:68226) 
    at Parser.pp.parseExprSubscripts (browser.js:64884) 
    at Parser.pp.parseMaybeUnary (browser.js:64865) 
    at Parser.pp.parseExprOps (browser.js:64811) 
    at Parser.pp.parseMaybeConditional (browser.js:64793)