反応コンポーネントをレンダリングできません

反応コンポーネントの下に作成しようとしていますが、描画されません。反応コンポーネントをレンダリングできません

script.jsx

var Button = React.createClass({ 
     getInitialState:() => { 
     return { 
      counter: 0 
     }; 
     }, 
     handleClick:() => { 
     this.setState({ 
      counter: this.state.counter + 1 
     }); 
     }, 
     render:() => { 
     return (<button onClick={this.handleClick}> this.state.counter </button>); 
     } 
     }); 

    React.render(<Button />, document.getElementById('root'));

index.htmlを

<!DOCTYPE html> 
<html> 
    <body> 
    <h1>React App</h1> 
    <div id="root"></div> 

    <script src="libs/react-15.0.2.js"></script> 
    <script src="script.jsx"></script> 
    </body> 
</html>

誰もがここで間違って行くいただきました！私に知らせてくださいすることができます。

出典

2016-05-16 Dinu

もう少し問題を説明できますか？どのようなエラーが発生していますか？ –

あなたがフォローしている例は少し古いと思われますか？コードにはいくつかの問題があります。まず、使用するはずです

import ReactDOM from "react-dom"; 

ReactDOM.render(<Button />, document.getElementById('root'));

ブラウザにJSXコードを読み込むには、Babelで実行する必要があります。そして、あなたはそれを行う場合でも、これは動作しない可能性があります：（https://facebook.github.io/react/docs/getting-started.htmlから）

Note that some browsers (Chrome, e.g.) will fail to load the file unless it's served via HTTP.

ですから、WebPACKのかbrowserifyのようなものを使用してオフにはるかに良いかもしれません。あなたのレンダリング機能で

が、あなたはそれではJavaScriptですので、中括弧内のカウンタへの参照を囲む必要があります：あなたは学習が反応出始めている場合は、

{ this.state.counter }

ではなく、少なくとも続く、私がお勧めしたいですこれは簡単なJavaScriptクラスを使用することから始まります。これはReactのために行く方法のようです。

import React, {Component} from "react"; 

export default class extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {counter: 0}; 
    } 

    render() { 
    return (
     <button 
      onClick={() => this.setState({counter: this.state.counter + 1}) }> 
      {this.state.counter} 
      </button> 
    ); 
    } 
}

出典

2016-05-16 11:36:32 Nicole

あなたのポインタをありがとう。 – Dinu

反応コンポーネントをレンダリングできません

関連する問題