Run Createjs inside React?

Question

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>
   );
  }
}

score 2 · Accepted Answer · answered Oct 06 '16 at 23:32

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')
);

Thanks. I ran the code before render the canvas that's why it not showing any error and not display. Thank you. — Phuong Le, Oct 07 '16 at 01:29

Run Createjs inside React?

1 Answers1