So I'm new to react and I'm trying to understand how non-react code and react code can interact.

So for example, let's say I have a library which draws a circle in a DOM element with syntax like this: c = new Circle('#container')

and as soon as that code is executed, a circle is drawn in the DOM element with an id of container.

If I wanted to create a React ponent based off of this, how would I go about it? This is what I had in mind:

var circ = React.createClass({

    ponentDidMount: function(){
      c = new Circle('#container')
    },

    render: function(){
      return (
        <div id="container"></div>
    );
   }

});

Is this acceptable, or is there a better way to go about this?

So I'm new to react and I'm trying to understand how non-react code and react code can interact.

So for example, let's say I have a library which draws a circle in a DOM element with syntax like this: c = new Circle('#container')

and as soon as that code is executed, a circle is drawn in the DOM element with an id of container.

If I wanted to create a React ponent based off of this, how would I go about it? This is what I had in mind:

var circ = React.createClass({

    ponentDidMount: function(){
      c = new Circle('#container')
    },

    render: function(){
      return (
        <div id="container"></div>
    );
   }

});

Is this acceptable, or is there a better way to go about this?

• javascript
• reactjs
• dom
• ponents
• web-ponent

3 Answers 3

For example if you want to interact with DOM, you can add special ref prop to some element like:

<div ref="blabla"></div>

and interact using regular javascript api, or other non-react apis.

ReactDOM.findDOMNode(this.refs["blabla"]).style.display='none'

Here I'm hiding element with ref "blabla"

Yes, your approach is right, but there are few moments you need to keep in mind.

1. React can rerender it's DOM and bindings of Circle library can be broken. So use shouldComponentUpdate() to control render process. https://facebook.github.io/react/docs/react-ponent.html#shouldponentupdate
2. Don't forget to unbind Circle library on ponent destroying. https://facebook.github.io/react/docs/react-ponent.html#ponentwillunmount

If I understand it right, the Circle() will print out a element inside the DOM element you provide as a parameter. If it was me I would have a diferent approach on that. Instead of using that ponent to manage/edit the DOM element, use the result result of it to be printed inside the DOM element. So, if the Circle() returns a SVG code grab it and print it out inside the #container. If it is a script to generate a base64 image, get the result to print inside #.

I would avoid to use react as a DOM manager, as you can do with jQuery, instead try to think react as a blocks/ponents manager, so you replace a ponent with another.