Reactを使ったユーザーの動きに合わせた表示の変更

step1

stateの定義をする

import React from 'react';

class App extends React.Component {
constructor(props) {
super(props);
// stateをオブジェクトの形で定義する
this.state = {name:'g0'}
}

step2

stateの表示をする
 

import React from 'react';

class App extends React.Component {
constructor(props) {
super(props);
this.state = {name:'g0'}
}

  render() {
    return (
// 通常のオブジェクトと同じように取得できる
      <div>私の名前は{this.state.name}です</div>
    );
  }
}

step3

stateの変更をする

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'g0-I'};
  }
  
  render() {
    return (
    	<div>
    	  <h1>私の名前は{this.state.name}です</h1>
    	  // ボタンをクリックするとstateを変更する処理を追加
        <button onClick={() => {this.setState({name:'GO-I'})}}>名前変更ボタン</button>
      </div>
    );
  }
}

export default App;