Last active
September 15, 2016 09:26
-
-
Save samspot/8837797 to your computer and use it in GitHub Desktop.
reactjs test for android
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <!-- | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-shim.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.2.0/es5-sham.js"></script> | |
| <script src="http://fb.me/react-0.8.0.min.js"></script> | |
| <script src="http://fb.me/JSXTransformer-0.8.0.js"></script> | |
| --> | |
| <script src="js/lib/es5-shim.js"></script> | |
| <script src="js/lib/es5-sham.js"></script> | |
| <script src="js/lib/react.js"></script> | |
| <script src="js/lib/JSXTransformer.js"></script> | |
| </head> | |
| <body style="font-size: 1.5em"> | |
| <h1>Let's React</h1> | |
| <div id="content"></div> | |
| <script type="text/jsx"> | |
| /** @jsx React.DOM */ | |
| var InputBox = React.createClass({ | |
| boom: function(e){ | |
| console.log("boom()") | |
| var value = this.refs.mask.getDOMNode().value.trim(); | |
| this.refs.mask.getDOMNode().value = "-" + value; | |
| }, | |
| render: function(){ | |
| return ( | |
| <form> | |
| <input type="text" placeholder="Something to mask" | |
| ref="mask" onChange={this.boom} /> | |
| </form> | |
| ); | |
| } | |
| }); | |
| React.renderComponent( | |
| <InputBox />, | |
| document.getElementById('content') | |
| ); | |
| </script> | |
| </body> | |
| </html> |
Added shim/sham as recommended here: http://facebook.github.io/react/docs/working-with-the-browser.html#browser-support-and-polyfills
no improvement yet
FYI you should really be doing the JSX transformation either in a build process or on the server. Its not really meant to work that way (using JSX in browser)
@johnthethird Sure, but this is a proof of concept, not production code.
Updated with working gist. I'm still having an input issue on android, but that isn't react's fault.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Results in these lines in the console:
This was on the android sdk simulator:
device: Nexus 4
Target: Android 2.3.3 (API level 10)