Running D3 and React in harmony

Anyone whose ever had to run the popular data visualization framework D3 within React will know that you're essentially facilitating a fight between a framework that allows raw, direct manipulation of the DOM and one that wants to handle all document changes on your behalf via a virtual DOM.

Long story short, if you want to run these two frameworks in harmony, take a look at the brilliant react-faux-dom module by Oliver Caldwell.

Here's the simplest solution:

import ReactFauxDOM from 'react-faux-dom'

class MyComponent extends Component {  
    render() {
        // Create faux-dom element
        let UIG = ReactFauxDOM.createElement('div');
        // do stuff to this element
        // e.g:  
        // d3.select(faux)
        //.append('div')
        //.html('Hello World!')
        return UIG.toReact()
    }
}

For more, check out the React Faux DOM page.