<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-with-addons.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="script.js"></script>
</body>
</html>
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
this.handleClick = this.handleClick.bind(this);
}
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}
componentWillUnmount() {
clearInterval(this.timerID);
}
tick() {
this.setState({
date: new Date()
});
//console.log(this.props.name);
}
handleClick() {
// this.props.onClickFunction(this.props.incrementValue);
console.log(this.props['name']);
}
render() {
return (
<div>
<h1 onClick={this.handleClick}>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
<h3>{this.props.name}</h3>
</div>
);
}
}
ReactDOM.render(
<Clock name='funky' />,
document.getElementById('root')
);
/* Styles go here */
https://app.pluralsight.com/library/courses/react-js-getting-started/table-of-contents
https://facebook.github.io/react/docs/state-and-lifecycle.html