[Solved]-Using Phaser together with React-Reactjs

Check this new WebComponent to integrate Phaser with any other framework 👍 https://github.com/proyecto26/ion-phaser

Example:

import React, { Component } from 'react'
import Phaser from 'phaser'
import { IonPhaser } from '@ion-phaser/react'

class App extends Component {
  state = {
    initialize: false,
    game: {
      width: "100%",
      height: "100%",
      type: Phaser.AUTO,
      scene: {}
    }
  }
  render() {
    const { initialize, game } = this.state
    return (
      <IonPhaser game={game} initialize={initialize} />
    )
  }
}

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