React (JSX) - Lifecycle methods

import React from 'react';
import ReactDOM from 'react-dom';

class Clock extends React.Component {
  // Add your methods in here.
  constructor(props){    // the constructor is the first thing called when the component instance is mounted.
    super(props);
    this.state = {date: new Date()}
  }
  render(){    //render() will be called when <Clock /> mounts and whenever it updates, as part of its lifecycle.
    return <div>
     {this.state.date.toLocaleTimeString()}  //This will "wire up” the state to the screen. Notice that this is static—it doesn’t update, even as time goes by.
    </div>
  }
}
/*
The constructor is the first thing called during mounting. render() is called later, to show the component for the first time. If it happened in a different order, render() wouldn’t have access to this.state, and it wouldn’t work.

Notice that lifecycle methods don’t necessarily correspond one-to-one with part of the lifecycle. constructor() only executes during the mounting phase, but render() executes during both the mounting and updating phase.
*/
ReactDOM.render(<Clock />, document.getElementById('app'));