응답의 렌더링 오류 이해

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)