Add external JS to react component

Question

I want to add a canvas to react component. Which I have achieved:

var React = require('react'),
    c = require('./../canvas_animation');

var Home = React.createClass({

 componentDidMount: function () {
    React.findDOMNode(this).childNodes[1].appendChild(c);
  }, 

This link contains canvas animation.

Problem: Everything is working fine in react apart from mouse events? How can I make them work?

jQuery(document).ready(function()
            {
                $(document).mousedown(function(e)
                {
                    onMouseDown();
                });

                $(document).mouseup(function(e)
                {
                    onMouseUp();
                }); 
            })

Replicated here react having issue with events.

Answer 1

React.js is using syntethic event system http://facebook.github.io/react/docs/events.html . The first step would be to attach events on react node directly:

render: function() {
    return <div onMouseDown={onMouseDown} onMouseUp={onMouseUp}></div>;
}

then use mouse position from event args directly:

  function onMouseDown(e)
  {
    mouseX = e.pageX;
    mouseY = e.pageY;
    ...
  }

I also replaced Hello world with empty div because it impacts the size of stageHeight variable and managed to move balls on drag sometimes, you should find out what remaining parts should be updated. Here the updated fiddle:

https://jsfiddle.net/69z2wepo/12491/