結果を実現：
<！DOCTYPE HTML>
<HTML>
<HEAD>
<メタのcharset = "UTF-8" />
<タイトル> </ TITLE>
<スクリプトSRC = "https://unpkg.com/react@16/umd/react。 development.js "> </ SCRIPT>
<SCRIPT SRC =" https://unpkg.com/react-dom@16/umd/react-dom.development.js "> </ SCRIPT>
<！ -ドン」トン生産でこれを使用します。 - >
<！ -转码- >
<スクリプトSRC = "https://unpkg.com/@babel/standalone/babel.min.js"> </ SCRIPT>
</ head>の
<BODY>
<DIV ID = "ルート"> </ div>
</ body>
</ HTML>
<スクリプトタイプ=」テキスト/バベル「>
// ES6classを作成し、React..Component継承された
クラスの時計{React.Componentを拡張します
//クラスのコンストラクタの追加
コンストラクタ（小道具）{
スーパー（小道具）;
this.state = {DATE：新しい新規A日付（）;}
}
//マウント
（componentDidMountを）{
=（のsetIntervalをthis.timerID
、（）=> this.tick（）
1000年
）;
}
//アン
componentWillUnmount（）{
てclearInterval（this.timerID）;
}
// SETSTATEを更新する第2のクロック当たり、このメソッド呼び出し、
ダニ（）{
this.setState（{
DATE：新しい新規A日付（）
}）;
}
/追加/空のレンダリング（）メソッドは、
{（）レンダリング
render（）メソッド、小道具はthis.props置換へ移動する//関数
リターン（
<DIV>
<H2>当前时间：{this.state.date.toLocaleTimeString（）} </ H2>
</ div>
）。
}
}
//渲染
ReactDOM.render（
<クロック/>、
のdocument.getElementById（ 'ルート' ）
）;
</ SCRIPT>