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

CSS

div.dropdown a {
  cursor: pointer;
  display: inline-block;
  padding: 5px;
  border: 1px solid black;
  border-radius: 3x;
  background-color: white;
}

div.dropdown li {
  cursor: pointer;
  display: block;
  padding: .5em;
  border: 1px solid black;
  border-radius: 2px;
  background-color: #efefef;
}

JavaScript 1.7

var EVENTNAME = "dropdown-close";

// Trigger dropdown event once if background is clicked
document.addEventListener('click', (e)=>
{
	window.dispatchEvent(new CustomEvent(EVENTNAME, { detail: e.srcElement }));
});

var DropDown = React.createClass({

	getInitialState: function() {
    return {open: false};
  },
  
	render()
	{
  	let menu = null;
    if (this.state.open) { 
    	menu = this.props.children;
    }
		return <div className="dropdown">
			<a className="dropdown-toggle" ref="toggle" onClick={this.toggleMenu}>Dropdown</a>
			{menu}
		</div>
	},

	toggleMenu(e)
	{
    this.setState({open: !this.state.open});
	},

	closeMenu(e)
	{
  	if (e.detail !== this.refs.toggle)
		{
			this.setState({open: false});
		}
	},

	componentWillMount()
	{
		var that = this;
		window.addEventListener(EVENTNAME, this.closeMenu);
	},

	componentWillUnmount()
	{
		var that = this;
		window.removeEventListener(EVENTNAME, this.closeMenu);
	}
});

ReactDOM.render(
  <div>
  	<h1>First</h1>
    <DropDown>
      <li>Item 1 (in my case these are also React comps)</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </DropDown>
    <hr/>
    <h1>Second</h1>
    <DropDown>
      <li>Item 1 (in my case these are also React comps)</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </DropDown>
  </div>,
  document.getElementById('container')
);