CODEWITHSUNDEEP
androidfacebookreactjs
andriy_sof
andriy_sof

Reputation: 2743

Facebook's React on Android

I tried to run some examples from http://facebook.github.io/react/docs in Android browser and they don't work - got empty pages. All pages are served from Django dev web server that is run locally and work fine except those with React. Exact same links work fine on the laptop. From their docs "If you'd like to use React on a touch device (i.e. a phone or tablet), simply call React.initializeTouchEvents(true); to turn them on." I assume there should be no problems with running on mobile devices. Are there some gotchas that I'm missing here? The source is:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>
    <script src="/static/phs/js/react.js"></script>
    <script src="/static/phs/js/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <div id="example1"></div>
    <script type="text/jsx">
        /** @jsx React.DOM */
        React.initializeTouchEvents(true);
        var HelloWorld = React.createClass({
          render: function() {
            return (
              <p>
                Hello, <input type="text" placeholder="Your name here" />!
                It is {this.props.date.toTimeString()}
              </p>
            );
          }
        });

        setInterval(function() {
          React.renderComponent(
            <HelloWorld date={new Date()} />,
            document.getElementById('example')
          );
        }, 1000);

        var LikeButton = React.createClass({
          getInitialState: function() {
            return {liked: false};
          },
          handleClick: function(event) {
            this.setState({liked: !this.state.liked});
          },
          render: function() {
            var text = this.state.liked ? 'like' : 'unlike';
            return (
              <p onClick={this.handleClick}>
                You {text} this. Click to toggle.
              </p>
            );
          }
        });

        React.renderComponent(
          <LikeButton />,
          document.getElementById('example1')
        );
    </script>
  </body>
</html>

Upvotes: 1

Views: 2598

Answers (2)

Gary Verhaegen
Gary Verhaegen

Reputation: 1093

So, it turns out it is possible to get React to work on Android Browser, at least on Android Browser 4 (I do not have earlier versions handy). The trick is that you have to manually add the polyfills on which React depends, specifically es5-shim and html5shiv.

More details on Facebook's stance as to why these are not included with React by default can be found here. the short version is:

  1. It's easier and better to write javascript libs to the spec;
  2. If libraries include their own versions of the polyfills, and you use many libraries, you will send the same code multiple times.

Upvotes: 1

andriy_sof
andriy_sof

Reputation: 2743

React didn't work for me on Android's 2.3.5 built-in browser and Dolphin Browser 10.1.2. Fixed by installing latest Firefox.

Upvotes: 1

Related Questions