Using Phaser together with React

[anskotid]

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. But in this case React does the game rendering too.

Is there any way to achieve the desired result?

[mattstyles]

There are a couple of approaches, there are also a couple of threads on this so try searching for more info.

Your proposal is fine, and by far the easiest solution. React does its normal thing for your UI, but you expose a canvas element and initialise the Phaser stuff when it mounts. However, as you probably don't want to unmount and remount that component its not a great improvement over just having a canvas sat there in the DOM.

There are also a couple of modules out there that swap React's DOM rendering layer with a canvas rendering layer, although that won't work with Phaser.

Bare in mind also that if you're really pushing rendering perf then any elements overlapping the canvas element will have an effect on canvas refresh rates, depending on your style of game this may or may not be a major problem.

[sapptime]

You can definitely do something like this. 

I'd recommend checking out Preact as an alternative to React if you're only going to be using it for Game UI. Pretty much everything you get with React in a package that's ~3kb. The approach I'd recommend is to have a (P)react component that renders your Phaser canvas element, and have that component's shouldComponentUpdate method always return false. That way the game won't reload every time there's a change to the UI and you can take advantage of state changes in your UI without impacting the rendering of the game.