JSFiddle - React, Tailwind, and code Playground

by zpao

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.4.1/react.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.4.1/JSXTransformer.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

var Parent = React.createClass({
  handleChildClick: function (event) {
    alert('child clicked');
  },

  render: function () {
    return <div><Child handleClick={this.handleChildClick}/></div>;
  }
});

var Child = React.createClass({
  handleClick: function (event) {
    // could pass the fn right to onClick in render...
    // <button onClick={this.props.handleClick}>...
    // but this is an example, and you could do more with this way and handle
    // other callback method signatures, not just events
    this.props.handleClick(event);
  },

  render: function () {
    return <button onClick={this.handleClick}>hello!</button>;
  }
});

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