JSFiddle - React, Tailwind, and code Playground

by chantastic

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

body { font-family: 'helvetica', 'arial', sans-serif }

.parent,
.child {
  position: relative;
  padding: 20px;
}

.parent > header,
.child > header {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  padding: 5px 10px;
}

.parent > header { background: red }
  .parent { border: 1px solid red }

.child { border: 1px solid blue }
  .child > header { background: blue }
  .child > [ref=childInput] { width: 100%; color: pink }

JavaScript 1.7

/** @jsx React.DOM */

var Parent = React.createClass({
  getInitialState: function () {
    return { message: "`message` was set by Parent:getInitialState" }
  },
  
  handleMessageChange: function (newMessage) {
    this.setState({ message: newMessage });
  },

  render: function () {
    return (
      <div className="parent">
        <header>Parent</header>
        <p>{this.state.message}</p>
        <Child message={this.state.message} onMessageChange={this.handleMessageChange} />
      </div>
    );
  }
});

var Child = React.createClass({
  changeMessage: function () {
    var newMessage = this.refs.childInput.getDOMNode().value;
    this.props.onMessageChange(newMessage);
  },

  render: function () {
    return (
      <div className="child">
        <header>Child</header>
        <p>{this.props.message}</p>
        <input type="text" ref="childInput" value={this.props.message} onChange={this.changeMessage} />
      </div>
    );
  }  
});

React.renderComponent(<Parent />, document.body);