React Base Fiddle (JSX)

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

by Rich Costello

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.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

div{
  cursor: pointer;
}
.active{
    color: red;
}

Babel + JSX

class Test extends React.Component{
		constructor(){
    		super();
        this.state = {
        		activeId: null
        }
        this.setActiveElement = this.setActiveElement.bind(this);
    }
    setActiveElement(id){
    		this.setState({activeId: id})
    }
		render(){
    		return(
        		<div>
            		{
                		[1,2,3,4,5].map((el, index) => 
                    		<div className={index === this.state.activeId? "active" : ""} onClick={() => this.setActiveElement(index)}>click me</div> 
                    )
                 }
            </div>
        )
    }
}

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