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://fb.me/react-with-addons-15.0.1.js"></script>
<script src="https://fb.me/react-dom-15.0.1.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

class App extends React.Component {
	constructor() {
  	super();
    
    this.state = {
       stroke: null,
       mode:   null,
       fill:   null
    };
    
    this.handleClick = this.handleClick.bind(this);
  }
  
  getStyleData() {
  	return this.state;
  }
  
  setAttribute(property, value) { 
    this.setState({ [property]: value }, () => {
      // this.props.data(this.getStyleData());
      console.log(this.getStyleData());
    });
  }
  
  handleClick() {
  	this.setAttribute('stroke', 'stroke-value');
    this.setAttribute('mode', 'mode-value');
    this.setAttribute('fill', 'fill-value');
  }
  
  render() {
    return <div>
    	<h1>{ this.state.stroke }</h1>
      <h1>{ this.state.mode }</h1>
      <h1>{ this.state.fill }</h1>
      
      <button onClick={this.handleClick}>Change attributes</button>
    </div>;
  }
}

ReactDOM.render(
  <App name="World" />,
  document.getElementById('container')
);