JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<div id="content"></div>
CSS
a = function() {
var dog = 1;
React.renderComponentToStaticMarkup()
}
JavaScript 1.7
var CommentBox = React.createClass({
childContextTypes: {
color: React.PropTypes.string
},
getChildContext: function() {
return {color: this.state && this.state.count % 2 === 0 ? 'red' : 'blue'};
},
getCount: function() {
return this.state.count;
},
getInitialState: function() {
return {count: 10};
},
incrementCount: function() {
console.log('increment', this.state);
this.setState({count: this.state.count+1});
},
componentWillMount: function() {
window.MAIN = this;
console.log("COMPONENT WILL MOUNT", this);
var old = this.incrementCount;
this.incrementCount = function() {
console.log('YES');
old.call(this);
}.bind(this);
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList parent={this} count={this.state.count} />
<input type="button" onClick={this.incrementCount} value="INCREMENT ALL" />
</div>
);
}
});
var CommentList = React.createClass({
getRows() {
return [1, 2, 3, 4];
},
parentClick: function(props) {
console.log('IM DEFINED ON THE PARENT! BUT WITH PROPS FROM THE CHILD THAT IMPLEMENTS IT!!', this.props);
alert("I'M A METHOD DEFINED ON THE PARENT, BEING EXECUTED WITH PROPS OF A CHILD JUST LIKE IN BLAZE! COMPARE THE CommentList COMPONENT TO THE JamesBox COMPONENT. HERE ARE THE PROPS (IT'S JUST THE ROW NUMBER): " + props.num);
},
render: function() {
return (
<div className="commentList">
{this.getRows().map(num => {
return <JamesBox num={num} parent={this} />
})}
</div>);
}
});
var JamesBox = React.createClass({
componentWillUpdate: function() {
window.COMPONENT = this; //for testing forcing updates from console
return;
//playing with the different ways to generate markup and elements to and from strings.
console.log('RENDERING FROM PARENT',...