<!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