오래된 구문은 ES6

Question

내가 반응 배우고 그리고 내가로부터 배우고 몇 가지 좋은 예를 건너 왔어요 작동하지 않지만, 해당 구문이 더 이상

V15 초기 코드를 반응에 의해 지원됩니다 보인다 :

를 내가 배운 것과

NewGameButton = React.createClass({ 
    render: function() { 
    return React.DOM.div({ 
     className: 'tic-tac-toe--new-game-button', 
     children: 'New game', 
     onMouseUp: this.props.onClick 
    }); 
    } 
}); 

, 나는 ES6 코드의 조각을 다시 시도 :

class NewGameButton extends React.Component { 
    render() { 
    return (
     <div> 
     .. ??? 
     </div> 
    ); 
    } 
} 

가 지금은 붙어, 나는 밖으로 클래스 이름의 모듈이 사용되지 않습니다 발견 그리고 난 아무 생각하는 방법이 없습니다 이걸 다시 써서 내가 작품

감사합니다!

Answer 1

공식적인 React 문서를 통해 시작하겠습니다. https://facebook.github.io/react/docs/tutorial.html 시작하는 방법과 모든 구성 방법에 대한 좋은 예를 제공합니다.

코드의 최종 목표는 무엇인지 모르지만 .... 모든 JSX 마크 업은 렌더링에서 반환 될 수 있습니다.

그래서 같은 :

class NewGameButton extends React.Component { 
    render() { 
    return (
     <div> 
     <input type="button" className="tic-tac-toe--new-game-button" onClick={this.props.onClick} /> 
     <ChildComponent /> 
     </div> 
    ); 
    } 
} 

Answer 2

이 부분 :

return (
    <div> 
    .. ??? 
    </div> 
); 

는 JSX의 반작용 생태계에 대한 선택 사항이지만 유용뿐만 아니라이다, ES6 없습니다. 불행히도 HTML과 유사한 문법을 ​​JS로 옮기기 위해서는 추가 단계가 필요하다.

class NewGameButton extends React.Component { 
    render() { 
    return React.createElement(// universal createElement method 
     'div', // tag name as the first argument instead of React.DOM.div method 
     { 
     className: 'tic-tac-toe--new-game-button', // props as the second argument 
     onMouseUp: this.props.onClick 
     }, 
     'New game' // children as the rest of arguments 
    ); 
    } 
}; 

근무 데모 : http://jsfiddle.net/69z2wepo/47252/

또는 stateless function 구성 요소 방법 :

const NewGameButton = props => React.createElement('div',{ 
     className: 'tic-tac-toe--new-game-button', 
     onMouseUp: props.onClick }, 
     'New game'); 

과 같을 것이다 ES6 및 코드 반응의 현재 버전을 사용

JSX없이

하지만, http://jsfiddle.net/69z2wepo/47254/

당신이 JSX 구문 (JS에서 HTML과 같은 코드)를 사용한다면 당신은 transpilation 단계를 추가 할 필요가, 이상이에서 당신을 위해 생성 될 것 React.createElement() 코드 것 :

class NewGameButton extends React.Component { 
    render() { 
    <div className="tic-tac-toe--new-game-button" onClick={this.props.onClick}> 
     New game 
    </div> 
    } 
}; 

나이 :

const NewGameButton = props => (
    <div className="tic-tac-toe--new-game-button" onClick={props.onClick}> 
     New game 
    </div> 
); 

Answer 3

그

class NewGameButton extends React.Component { 
    render() { 
    return (
     <div className="tic-tac-toe--new-game-button" onMouseUp={this.props.onClick}> 
      New game 
     </div> 
    ); 
    } 
} 

도움이 될하지만 난 정말 당신이 클릭 할 수있는 영역으로 <div> 요소를 사용하지 않는 것이 좋습니다 수 있음. 의미가 더 적절하기 때문에 <button>을 대신 사용하십시오.