イベント入門

import React from "react"

class App extends React.Component {
  render() {
    retrun()
    /* ここに描く処理 */
  }
}

大枠は上記に記載している内容。以降は、フォーカスして復習をする

<button
  onClick={() => {
    console.log("First Event!!")
  }}
>
  初めてのイベント
</button>

するとブラウザの developer tools の console で確認ができる

State 入門

何かの動作にたいして何かを変えるようにする動作がアプリケーションには必須。

この動作に合わせて変更される値のことを React だと State と呼ばれる。

React は、classを作成する際にReact.Componentをextendsして作成します。その際constructor(props) { ....}を記述し、stateを定義します

定義したstateをrender内にて使用する際は、this.stateで代入したオブジェクトを使用できます(ただこの使用方法は基本しないと思います)

this.state.定義したプロパティ名の形で使用すると認識しておく

では、何かのイベントで state の値を更新(変更)する場合は？？

this.setSate({プロパティ名:変更する値})となります

注意として

this.state = {定義済みプロパティ:値}, this.state.name = '値'という方法では、行いません。

同じイベントでクリックされるものによって更新する値が違うだけの場合 class 内にメソッドとして作成するといいことがあるなので実際に書いてみようと思う。今回は、イベントは一個だがメソッドを作成してみる

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

  handleClick(value) {
    this.setState({value: value});
  }

  render() {
    return (
      <div>
        <button onClick={() => {}this.handleClick('変更')}></button>
      </div>
    )
  }
}
// ....

的な感じでしょうか？これに少し手を加えれば tutorial で出てくるカウントアップの作成が可能ですね