some questions re: stateful compo and how to approach building one Raw Raw

statefulCompoQs.js

class Clock extends React.Component {
  constructor(props) {                  // where do we hook up props to ? where does this prop data come from?
    super(props);                       // what is the purpose of this? why do we need to call super?
    this.state = { date: new Date() };  // always intialize a state? is the state to be updated by passing in props?
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000); // is this.timerID a prop or a state? It calls a function that upstates the date variable
    
    TweenMax.fromTo(
      this.clockEl,   
      1,
      { scale: 0 },
      {
        scale: 1,
        ease: Elastic.easeOut.config(1, 0.3)
      }
    );
  }

  componentWillUpdate(nextProps, nextState) {   // when to use will update? who "knows"/controls/calls this will udpate?
                                                // who passes in the nextprops and next states, where does this stuff come from
    const { date } = nextState;
    const second = date.getSeconds();
    const minute = date.getMinutes();
    const hour = date.getHours() > 12 ? date.getHours() - 12 : date.getHours();

    rotateToTime(this.secondsEl, second, 0, 60);
    rotateToTime(this.minsEl, minute, 0, 60);
    rotateToTime(this.hoursEl, hour, 0, 12);
  }

  componentWillUnmount() {
    clearInterval(this.timerID);                 // how does it know when to unmount? what is I didn't clear the interval?
                                                 // typically do I need to try and clean up in componentWillUnmount
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <svg
        ref={el => {                                // who is passing in the el arg here?
                                                    // 
          this.clockEl = el;
        }}
        className="dib w-50"
        viewBox="0 0 24 24"
      >
        <circle cx="12" cy="12" r="10" stroke="#343530" fill="#f8faf9" />
        <path
          ref={el => {
            this.hourEl = el;
          }}
          d="M12,12 v-5"
          strokeLinecap="round"
          stroke="#2f7fe6"
        />
        <path
          ref={el => {
            this.minsEl = el;
          }}
          d="M12,12 v-7"
          strokeLinecap="round"
          stroke="#2f7fe6"
        />
        <path
          ref={el => {
            this.secondsEl = el;
          }}
          d="M12,12 v-6"
          strokeLinecap="round"
          stroke="#f24949"
          strokeWidth="0.5"
        />
        <circle cx="12" cy="12" r="1.25" fill="#f24949" />
      </svg>
    );
  }
}

function rotateToTime(node, value, start, stop) {                         // does this function directly change the SVGs?
                                                                          // how does the app know to rerender after the SVGs are supposed to change?
  TweenMax.to(node, 1, {
    rotation: `${mapValue(value, start, stop, 0, 360)}_cw`,
    transformOrigin: "50% 100%"
  });
}

function mapValue(v, start1, stop1, start2, stop2) {
  return (v - start1) / (stop1 - start1) * (stop2 - start2) + start2;
}

const App = () =>
  <div className="flex items-center justify-center vh-100">
    <Clock />
  </div>;

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

I tried to read the sample app to understand how a stateful compo works... had a bunch of qs.
They are listed as in-line comments.
If you can answer them that would be great! (I think you can just add comment on this gist.)
plz ping me in slack if you have added comments... thanks lots!