reactClock.js

class ReactRoot extends React.Component {
  state = {
    millis: Date.now(),
    timezoneOffset: new Date().getTimezoneOffset(),
    request: 0
  };

  componentDidMount() {
    this.setState({
      request: requestAnimationFrame(this.tick)
    });
  }

  componentWillUnmount() {
    cancelAnimationFrame(this.state.request);
  }

  tick = () => {
    this.setState({
      millis: Date.now(),
      request: requestAnimationFrame(this.tick)
    });
  };

  render() {
    return (
      <Clock
        millis={this.state.millis}
        timezoneOffset={this.state.timezoneOffset}
      />
    );
  }
}

class Clock extends React.Component {
  hourCycle = 12;
  minuteCycle = 60;
  secondsCycle = 60000;

  getAngle = cycleTime => {
    return 360 * (this.getMillis() % cycleTime) / cycleTime;
  };

  getMillis = () => {
    return this.props.millis - this.props.timezoneOffset * this.secondsCycle;
  };

  render() {
    const { hourCycle, minuteCycle, secondsCycle } = this;
    return (
      <div style={{ width: "220px" }}>
        <svg viewBox="-1.5 -1.5 3 3">
          <circle r={1} fill="#333" />
          <Pointer
            length={0.7}
            width={0.1}
            angle={this.getAngle(hourCycle * minuteCycle * secondsCycle)}
          />
          <Pointer
            length={0.9}
            width={0.05}
            angle={this.getAngle(minuteCycle * secondsCycle)}
          />
          <Pointer
            length={0.9}
            width={0.01}
            angle={this.getAngle(secondsCycle)}
          />
        </svg>
      </div>
    );
  }
}

class Pointer extends React.Component {
  render() {
    return (
      <line
        y2={-this.props.length}
        transform={"rotate(" + this.props.angle + ")"}
        strokeLinecap={"square"}
        strokeWidth={this.props.width}
        stroke="#eee"
      />
    );
  }
}