Using Phaser together with React

Question

I am trying to understand how I could use React for rendering all the UI elements and Phaser for rendering a game (using Canvas or WebGL) within the React application.

One way would be to use React's componentDidMount, so after I have my HTML ready I can use a div id to render the Phaser content. In this case who does the rendering? React of Phaser?

If the mentioned way is not the right one, could you suggest another?

Answer 1

There is a module for this on Github called react-phaser. Here is a CodePen that does not use any separate module.

var PhaserContainer = React.createClass({

    game: null,
    ...
    componentDidMount: function(){
        this.game = new Phaser.Game(800, 400, Phaser.AUTO, "phaser-container", 
        { 
            create: this.create,
            update: this.update
        });
    },
    ...
    render: function(){
        return (
            <div className="phaserContainer" id="phaser-container">
            </div>
        );
    }
    ...
}

This is not my CodePen. Credit goes to Matthias.R