React Base Fiddle (JSX)

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

by thekenwheeler

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

class MyComponent extends React.Component {
	constructor(props) {
  	super(props);
    this.state = {
    	color: "green"
    };
  }
  componentDidMount() {
  	setInterval(() => {
    	this.setState({
      	color: this.state.color === "green" ? "red" : "green"
      });
    }, 500);
  }
  render() {
  	return (
    	<h1 style={{color: this.state.color}}>
      	{this.props.name}
      </h1>
    )
  }
}

class App extends React.Component {
    render() {
        return (
        	<div>
          	<MyComponent name="Demetrick"/>
          </div>
        )
    }
}
 
ReactDOM.render(<App/>,
    document.getElementById('container')
);