Work with HTML Canvas in React

<body>
<div id="root"></div>
<script src="https://unpkg.com/react@16.0.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.0.0/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
<script type="text/babel">
const Component = React.Component;

const App = () => {
  return (
    <Canvas
      width={200}
      height={200}
      draw={(canvas, ctx) => {
        ctx.strokeRect(0, 0, canvas.width, canvas.height);
      }}
    />
  );
};

class Canvas extends Component {
  componentDidMount() {
    const ctx = this.canvas.getContext('2d');
    this.props.draw(this.canvas, ctx);
  }
  render() {
    const { width, height } = this.props;

    return (
      <canvas
        ref={node => (this.canvas = node)}
        width={width}
        height={height}
      />
    );
  }
}

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

</script>
</body>