0から作るDapps入門　フロントエンド編 APP.jsを確認

import React, { Component } from "react";
先頭の import ラインで次のように Component メンバーまでインポートすれば、 extends を次のように Component と記述できます。
React はデフォルトメンバーです。一方、Component はそのメンバーなので、 { } が必要です。
import Recorder from "./Recorder.json";
import getWeb3 from "./utils/getWeb3";
import "./App.css";

class App extends Component {
Appクラス = Appコンポーネント(カスタムタグ)
state = { web3: null, accounts: null, contract: null, weight: null, height: null, address: "",
outputWeight: null, outputHeight: null, time: null };
state は（関数内で宣言された変数のように）コンポーネントの内部で制御されます
componentDidMount = async () => {
try {
try {...} のコードが実行されます。
エラーがなければ、catch(err) は無視されます: 実行が try の最後に到達した後、catch を飛び越えます。
エラーが発生した場合、try の実行が停止し、コントロールフローは catch(err) の先頭になります。errorは発生した事象に関する詳細をもつエラーオブジェクトを含んでいます。
コンポーネントのインスタンスが作成されて DOM に挿入されるときに、これらのメソッドが次の順序で呼び出されます。
constructor()
static getDerivedStateFromProps()
render()
componentDidMount()
const web3 = await getWeb3();

const accounts = await web3.eth.getAccounts();
const networkId = await web3.eth.net.getId();
const deployedNetwork = Recorder.networks[networkId];
const instance = new web3.eth.Contract(
Recorder.abi,
deployedNetwork && deployedNetwork.address,
);

this.setState({ web3, accounts, contract: instance });
} catch (error) {
async関数はPromiseを返す関数でしかなく、awaitはPromiseの解決を待つので、catchをそのまま使える
alert(
`Failed to load web3, accounts, or contract. Check console for details.`,
);
console.error(error);
}
};

writeRecord = async() => {
asyncキーワードは、たとえばasync function hoge(){}とすることで、関数hogeがAsync Functionであることを指定します。無名関数や即時関数、ES2015で追加されたArrow Function、class構文中のメソッドにも問題なく付加することができます。
const { accounts, contract, weight, height } = this.state;
const result = await contract.methods.writeData(parseInt(weight), parseInt(height)).send({
from: accounts[0]
});
awaitキーワードは、Async Functionの中でしか使用することができません。
console.log(result);
if(result.status === true) {
alert('記録が完了しました');
}
}

viewRecord = async() => {
const { contract, address } = this.state;
const result = await contract.methods.viewData(address).call();
console.log(result);
const outputWeight = result[0];
const outputHeight = result[1];
const time = this.unixTimeToTime(result[2]);
this.setState({ outputWeight, outputHeight, time });
}

handleChange = name => event => {
this.setState({ [name]: event.target.value });
};

unixTimeToTime = (intTime) => {

const time = Number(intTime);
const y = new Date(time * 1000);
const year = y.getFullYear();
const month = y.getMonth() + 1;
const day = y.getDate();
const hour = ('0' + y.getHours()).slice(-2);
const min = ('0' + y.getMinutes()).slice(-2);
const sec = ('0' + y.getSeconds()).slice(-2);

const Time = year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec;
return Time;
}

React.Componentのrender()はthis.propsとthis.stateを調べた後React要素などを返しているだけとなります。
render() {
if (!this.state.web3) {
return

;
}
return (

);
}
}
export default App;