Phuong Le Phuong Le - 2 months ago 39
React JSX Question

Run Createjs inside React?

I was trying to test run createjs inside React but I cant find anyway to run this. Would someone point out what I did wrong please. Thanks

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

export default class CanvasChart extends React.Component {
constructor() {
super();
}

componentDidMount(){
var canvas = ReactDOM.findDOMNode(this.refs.canvas);
this.stage = new createjs.Stage(canvas);
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
this.stage.addChild(circle);
this.stage.update();
}

render() {
return (
<canvas ref="canvas" width="500" height="300"></canvas>
);
}
}

Answer

Your code actually works, maybe you're doing something wrong with your configuration.

class CanvasChart extends React.Component {
  constructor() {
   super();
  }

  componentDidMount(){
   var canvas = ReactDOM.findDOMNode(this.refs.canvas);
   this.stage = new createjs.Stage(canvas);
   var circle = new createjs.Shape();
   circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
   circle.x = 100;
   circle.y = 100;
   this.stage.addChild(circle);
   this.stage.update();
  }

  render() {
   return (
     <canvas ref="canvas" width="500" height="300"></canvas>
   );
  }
}


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