CodeacademyがCodeacademyで公式チュートリアル

Question

対構文反応し、これは書き込み用のサンプル構文は、コンポーネント

var Input = React.createClass({ 
    getInitialState: function() { 
    return { 
     userInput: '' 
    }; 
    }, 

    handleUserInput: function (e) { 
    this.setState({ 
     userInput: e.target.value 
    }); 
    }, 

    render: function() { 
    return (
     <div> 
     <input 
      type="text" 
      onChange={this.handleUserInput} 
      value={this.state.userInput} /> 
     <h1>{this.state.userInput}</h1> 
     </div> 
    ); 
    } 
}); 

を反応させていることが一般的に好きな私には理にかなって、さまざまな属性を持つ基本的なJavaScriptオブジェクトを、見えます。ここで

はインクルード私はJavaScriptに新たなんだので、第二のアプローチは、私にはあまり意味がありますリアクト公式チュートリアル

class NameForm extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {value: ''}; 

    this.handleChange = this.handleChange.bind(this); 
    this.handleSubmit = this.handleSubmit.bind(this); 
    } 

    handleChange(event) { 
    this.setState({value: event.target.value}); 
    } 

    handleSubmit(event) { 
    alert('A name was submitted: ' + this.state.value); 
    event.preventDefault(); 
    } 

    render() { 
    return (
     <form onSubmit={this.handleSubmit}> 
     <label> 
      Name: 
      <input type="text" value={this.state.value} onChange={this.handleChange} /> 
     </label> 
     <input type="submit" value="Submit" /> 
     </form> 
    ); 
    } 
} 

を反応の例です。 class NameForm extends React.Componentのようなものを私がどのように歩くのを助けることができるでしょうか？var Input = React.createClassのようなものに比べますか？また、

Answer 1

最初の例では、のECMAScript 5、秒である（それは一緒に行くように、基本的なレベルでの構文を説明）公式のチュートリアルからの構文を使用して反応教える任意のより多くの基本的なチュートリアルがあるかどうかを知るのが大好きです1つはです。ECMAScript 6

Hereこれらの間の変更点のリストを見つけることができます。 を実行するには

は、最初に私が推薦するすべてのあなたはバベルを使用する必要があるのECMAScript 6に反応するが：

ReactJSはまず、よく書かれた文書を持っている - それとともに「Hellowことば」アプリケーションを実行します。