Achieve results:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script 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>
<!-- Don't use this in production: -->
<!--转码-->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
<script type="text / babel ">
class Clock {the extends React.Component
// create a ES6class, and inherited React..Component
constructor (props) {
// add a class constructor
Super (The props);
this.state = {DATE: new new a Date ()};
}
// mount
componentDidMount () {
this.timerID the setInterval = (
() => this.tick (),
1000
);
}
// unloading
componentWillUnmount () {
the clearInterval (this.timerID);
}
// this method calls per second Clock, updating the setState
the tick () {
this.setState ({
DATE: new new a Date ()
});
}
// add an empty render ( ) method
render () {
// function to move to the render () method, this.props replacement The props
return (
<div>
<H2> Current Time: this.state.date.toLocaleTimeString {()} </ H2>
</ div>
);
}
}
// render
ReactDOM.render (
<Clock />,
document.getElementById ( 'the root' )
);
</ Script>