My simple react.js app is a blank page on my phone (but works on my desktop and tablet). Why?

Question

I am toying with react.js. I created a simple-minded app It works on my desktop and on my android tablet, but I get a blank page, nothing else, on my phone, whether in the Android browser or in Firefox.

And yes, I did add the required

React.initializeTouchEvents(true);

Any ideas? Thanks.

Answer 1

The <script> tag that includes your JS, main.js, is inside document.body but is also rendering your React component to document.body and overwriting itself. Try rendering to the container you provided and see if that fixes it:

Current:

React.renderComponent(RotationContainer( {data:DATA} ), document.body);

Change to render to #content:

React.renderComponent(
  RotationContainer( {data:DATA} ),
  document.querySelector("#content")
);