reactサンプルコード

➀html内のappタグにCounterAppコンポーネントを挿入準備

react.js

ReactDOM.render(
<CounterApp/>,
document.getElementById("app")
);

⓶初期化。constructor(props)、super(props)はおまじないみたいなもん。

react.js

constructor(props){
  super(props);
  this.state = { count: 0 };
  this.countUp=this.countUp.bind(this);
  }

⓷this.state.countでthis.state = { count: 0 };を呼び出し、０にセット。onClick={this.CountUp}でCountUpメソッド実行。this.state.hogeは内部から参照するときに使う。（外部からなら、this.props.hoge）

react.js

render (){
   return(
      <div>
       <p>count:{this.state.count}</p>
       <button onClick={this.CountUp}>Count Up!</button>
      </div>
    );

④this.setStateで、初期化したthis.stateの値を「this.state.count + 1」に更新する。
このとき「this.state＝this.state.count + 1」のようにthis.stateを直接更新してはいけない。

react.js

CountUp(){
  this.setState({ count: this.state.count + 1 });
  }

↓全体の流れ

react.js

class CounterApp extends React.Component{
 constructor(props){
  super(props);
  this.state = { count: 0 };
  this.countUp=this.countUp.bind(this);
  }
CountUp(){
  this.setState({ count: this.state.count + 1 });
  }
   render (){
   return(
      <div>
       <p>count:{this.state.count}</p>
       <button onClick={this.CountUp}>Count Up!</button>
      </div>
    );
  }
}

ReactDOM.render(
<CounterApp/>,
document.getElementById("app")
);