reactjs clock component with state example

<!DOCTYPE html>
<html>

<head>
  <script src="https://unpkg.com/react@15.4.0/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.4.0/dist/react-dom.js"></script>
</head>

<body>
  <div id="hello-world"></div> <!-- reactjs renders here --> 
  <script src="hello-world.component.js"></script> <!-- related to script.jsx -->
</body>

</html>

var HelloWorld = React.createClass({
  //initialize the state
  getInitialState: function() {
    return { world: "World" };
  },
  handleChange: function(event) {
    this.setState({world: event.target.value});
  },
  getMessage: function() {
    return (
      Hello {this.state.world}
    );
  },
  //render() is called everytime when state is changed
  render: function() {
    return (
      <div>
        { this.getMessage() }
        Say Hello To: <input onChange={this.handleChange} />
        <br/>
        this.state.world: {this.state.world}<br/>
      </div>
    );
  }
});

ReactDOM.render( <HelloWorld />,
  document.getElementById("container")
);

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  
  componentDidMount() {
    this.timerID = setInterval(
      () => this.setState({date: new Date()}),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('hello-world')
);