React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by alansouzati

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.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.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 FormattedMessage = React.createClass({
  render: function() {
  	return <span>{this.props.defaultMessage || this.props.id}</span>
  }
});

var Hello = React.createClass({
  getInitialState: function () {
    return {
      activeIndex: 0
    };
  },
  _updateState: function () {
    this.setState({activeIndex: 1});
  },
  render: function() {
    
    var title = this.props.children[this.state.activeIndex].props.title;
    
    return (
      <svg version="1.1" viewBox="0 0 48 48" 
        width="48px" height="48px" onClick={this._updateState}
        aria-labelledby="title">
        <title id="title"><FormattedMessage id="add_icon" defaultMessage={title} /></title>
        <g id="add">
          <rect id="_x2E_svg_1_" x="0" y="0" fill="none" width="48" height="48"/>
          <path fill="none" stroke="#231F20" strokeWidth="2" strokeMiterlimit="10" d="M12,24h24 M24,36V12"/>
        </g>
      </svg>
    );
  }
});
 
ReactDOM.render(
  <Hello>
    <div title="add icon"></div>
    <div title="add icon2"></div>
  </Hello>,
  document.getElementById('container')
);