title: How to use three.js with React
body: <p>I am trying to use three.js in a React application however even the basic sample from the three.js docs  fails to load on the canvas. </p>
  
  <p>I first made a vanilla.js <a href="https://codesandbox.io/s/oxr70mlo6z" rel="nofollow noreferrer">sandbox</a> implementation with the sample which works fine. Then I ported it over to create a react+three.js minimal <a href="https://codesandbox.io/s/vjywwqlyy5" rel="nofollow noreferrer">sandbox</a> implementation which fails to work.</p>
  
  <p>Can anyone have a look at it and point me in the right direction ?</p>
  
  <pre><code>class Viewer extends Component {
      state = {};
  
      scene = null;
  
      camera = null;
  
      renderer = new WebGLRenderer();
  
      inst = 0;
  
      viewerRef = React.createRef();
  
      componentDidMount() {
          const { domElement } = this.renderer;
          this.scene = new Scene();
          this.scene.background = new Color("#ccc");
          this.camera = new Camera(
          75,
          domElement.innerWidth / domElement.innerHeight,
          0.1,
          1000
          );
          this.renderer.setSize(domElement.innerWidth, domElement.innerHeight);
          this.viewerRef.current.appendChild(this.renderer.domElement);
          const geometry = new BoxGeometry(1, 1, 1);
          const material = new MeshBasicMaterial({ color: 0x05ff00 });
          const cube = new Mesh(geometry, material);
  
          this.scene.add(cube);
  
          this.camera.position.z = 5;
          this.display();
      }
  
      display = () =&gt; {
          this.renderer.render(this.scene, this.camera);
          requestAnimationFrame(this.display);
      };
  
      render = () =&gt; &lt;div className="viewer" ref={this.viewerRef} /&gt;;
  }
  </code></pre>