react

Just a Web Code Solution

Step 1. Your question relates to:

Step 2. Type a keyword:

create digital clock react

1804

Show ResultREACT

<html lang = "en">

<head>
<meta charset = "UTF-8">
<title>React App</title>
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>

</head>

<body>

<script type="text/babel">

function checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}

class App extends React.Component {
constructor(...args) {
super(...args);
this.state = {
date: ``
};
}

startTime() {
const today = new Date();
const h = today.getHours();
const m = checkTime(today.getMinutes());
const s = checkTime(today.getSeconds());

this.setState({ date: h + ":" + m + ":" + s });
this.timeout = setTimeout(() => this.startTime(), 500);
}

componentDidMount() {
this.startTime();
}
componentWillUnmount() {
if (!this.timeout) return;
clearTimeout(this.timeout);
}
render() {
return <h1>{this.state.date}</h1>;
}
}

ReactDOM.render(
<App />,
document.getElementById('root')
);

</script>

<div id="root"></div>

</body>

</html>