[React] JavaScriptのクラスとReact

JavaScriptのクラスとReact

※ 個人用の覚え書きでございます。

JavaScriptのクラス（継承）

script.js

class Class_1{
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  info() {
    console.log(`名前は${this.name}です`);
    console.log(`${this.age}歳です`);
  }
}

class Class_2 extends Class_1 {
}

const class_2 = new Class_2("山田",20);

class_2.info();

React（ボタンをクリックすると表示が切り替わる）

app.js

import React from 'react';

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

  handleClick(f_name){
    this.setState({name: f_name});
  }

  render() {
    return (
      <div>
        <h1>こんにちは、{this.state.name}さん！</h1>

        <button onClick={
          () => {this.handleClick('山田')}}>
          山田
        </button>

        <button onClick={
          () => {this.handleClick('田中')}}>
          田中
        </button>
      </div>
    );
  }
}

export default App;