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"></div>


<div id="modalContainer"></div>

JavaScript 1.7

const Modal = React.createClass({
	getInitialState(){
  	return ({
    	style : { display: 'none' }
    });
  },
  show(){
  	this.setState({ style : { display : 'block' }})
  },
  hide(){
  	this.setState({ style : { display : 'none' }})
  },
  render(){
  	return <div style={ this.state.style }>{ this.props.children }</div>
  }
});

const RegistrationModal = React.createClass({
  showRegistrationModal() {
    this.refs.registrationModal.show()
  },

  hideRegistrationModal() {
    this.refs.registrationModal.hide()
  },

  render() {
    return (
      <Modal ref="registrationModal" className="modal">
        <h2>Meld je aan</h2>
        <button onClick={this.hideRegistrationModal }>Close</button>
      </Modal>
    )
  }
});

const ButtonComponent = props => (
	<button onClick={ props.modal.showRegistrationModal }>Show modal</button>
)

let modal = ReactDOM.render(
  <RegistrationModal />,
  document.getElementById('modalContainer')
);

let button = ReactDOM.render(
	<ButtonComponent modal={ modal } />,
	document.getElementById('container')
);