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://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.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>

CSS

.lll {
  display: inline-block;
}

.flaticon-plus13 {
  display: block;
  height: 20px;
  width: 20px;
  background-color: green;
}

JavaScript 1.7

var FlatIcon, Button, SearchButton, Header;

FlatIcon = React.createClass({
  displayName: "FlatIcon",
  propTypes: {
    iconName: React.PropTypes.string.isRequired
  },
  render: function() {
    return React.createElement("i", {
      "className": "flaticon-" + this.props.iconName
    });
  }
});

Button = React.createClass({
  displayName: "Button",
  getInitialState: function() {
    return {
      iconName: this.props.initialIconName
    };
  },
  propTypes: {
    initialIconName: React.PropTypes.string.isRequired
  },
  render: function() {
    return React.createElement("a", {
      "className": 'lll',
      onClick: this.props.onClick,
    }, React.createElement(FlatIcon, {
      "iconName": this.state.iconName
    }));
  }
});

SearchButton = React.createClass({
  displayName: "SearchButton",
  showCrossIcon: function() {
    return alert('ok');
  },
  render: function() {
    return React.createElement(Button, {
      "initialIconName": this.props.initialIconName,
      "onClick": this.showCrossIcon
    });
  }
});

Header = React.createClass({
  displayName: "Header",
  render: function() {
    return React.createElement(SearchButton, {
      "initialIconName": "plus13"
    });
  }
});

ReactDOM.render(React.createElement(Header, null), document.getElementById('container'));