React Base Fiddle (JSX)
Starting point for creating JSFiddles with React. This uses React with Addons.
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
JavaScript 1.7
var Example = React.createClass({
componentWillMount: function () {
this.checkAuth();
},
checkAuth: function () {
document.write("Checking auth now. ");
var iid = setInterval(function () {
if (true) { // Have to do some dumb check here
clearInterval(iid);
this.authenticate(this.handleAuthResult);
}
}.bind(this), 500);
},
authenticate: function (callback) {
callback({value: true});
},
handleAuthResult: function (result) {
document.write("The result is " + result.value + ". ");
this.setResult(result, this.loadThePage)
// ^ `this` is undefined here. How can I ever set the result?
},
// Another asynchronous thing
setResult: function (result, callback) {
callback();
},
loadThePage: function () {
document.write("The code never gets here, but the page should load now. ");
},
render: function() {
return <div />;
}
});
ReactDOM.render(
<Example />,
document.getElementById('container')
);