title: How to integrate Phaser into React
body: <p>I've got a React application created with create-react-app and I'm trying to integrate Phaser 3 as well. I followed <a href="https://www.zephyrcoding.com/phaser3-with-react/" rel="noreferrer">this guide</a> to get started. I've got the canvas rendering the text but loading images in the preload does not seem to be working. I get the default failed to load texture image displayed.</p>
  
  <pre><code>import ExampleScene from "./scenes/ExampleScene";
  
  import * as React from "react";
  
  export default class Game extends React.Component {
    componentDidMount() {
      const config = {
        type: Phaser.AUTO,
        parent: "phaser-example",
        width: 800,
        height: 600,
        scene: [ExampleScene]
      };
  
      new Phaser.Game(config);
    }
  
    shouldComponentUpdate() {
      return false;
    }
  
    render() {
      return &lt;div id="phaser-game" /&gt;;
    }
  }
  </code></pre>
  
  <p>ExampleScene:</p>
  
  <pre><code>import Phaser from "phaser";
  
  export default class ExampleScene extends Phaser.Scene {
    preload() {
      this.load.image("logo", "assets/logo.png");
    }
    create() {
      const text = this.add.text(250, 250, "Phaser", {
        backgroundColor: "white",
        color: "blue",
        fontSize: 48
      });
  
      text.setInteractive({ useHandCursor: true });
      this.add.image(400, 300, "logo");
  
      text.on("pointerup", () =&gt; {
        console.log("Hello!");
        //store.dispatch({ type: ACTION_TYPE });
      });
    }
  }
  </code></pre>
  
  <p>The idea is to create a visualization with flowers growing based on a simple gene engine. So Phaser would get instructions from the Store about the current state.</p>
  
  <p>I'm guess this has something to do with the way Phaser loads and there's a conflict with how React updates. I'm preventing the component from updating as I only need the game to receive instructions by listening to the store</p>
  
  <p>I've already looked at this <a href="https://stackoverflow.com/questions/48682260/using-phaser-together-with-react">SO answer</a> and the <a href="https://github.com/evilfer/react-phaser" rel="noreferrer">accompanying wrapper</a>, but it is outdated.</p>
  
  <p>How can I get Phaser to load images when in a Create-React-App?</p>
  
  <p>CodeSandbox: <a href="https://codesandbox.io/s/github/nodes777/react-punnett/tree/phaser-game" rel="noreferrer">https://codesandbox.io/s/github/nodes777/react-punnett/tree/phaser-game</a>
  Repo: <a href="https://github.com/nodes777/react-punnett/tree/phaser-game" rel="noreferrer">https://github.com/nodes777/react-punnett/tree/phaser-game</a></p>