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://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
<script src="https://npmcdn.com/react-dnd@2.1.4/dist/ReactDnD.min.js"></script>
<script src="https://npmcdn.com/react-dnd-html5-backend@2.1.2/dist/ReactDnDHTML5Backend.min.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

// Copied from here: https://github.com/gaearon/react-dnd/tree/master/examples/01%20Dustbin/Single%20Target

// Dustbin
const dustbinStyle = {
    height: '12rem',
    width: '12rem',
    marginRight: '1.5rem',
    marginBottom: '1.5rem',
    color: 'white',
    padding: '1rem',
    textAlign: 'center',
    fontSize: '1rem',
    lineHeight: 'normal',
    float: 'left'
};

const boxTarget = {
    hover(props, monitor, component) {
    	console.log(component.node);
    },
    
    drop() {
        return { name: 'Dustbin' };
    }
};

function collectDropTarget(connect, monitor) {
    return {
        connectDropTarget: connect.dropTarget(),
        isOver: monitor.isOver(),
        canDrop: monitor.canDrop()
    };
}

class Dustbin extends React.Component {
    render() {
        const { canDrop, isOver, connectDropTarget } = this.props;
        const isActive = canDrop && isOver;
        
        let backgroundColor = '#222';
        if (isActive) {
            backgroundColor = 'darkgreen';
        } else if (canDrop) {
            backgroundColor = 'darkkhaki';
        }
        
        return connectDropTarget(
            <div ref={node => this.node = node} style={{ ...dustbinStyle, backgroundColor }}>
            {isActive ?
                'Release to drop' :
                'Drag a box here'
            }
            </div>
        );
    }
}

Dustbin.propTypes = {
    connectDropTarget: React.PropTypes.func.isRequired,
    isOver: React.PropTypes.bool.isRequired,
    canDrop: React.PropTypes.bool.isRequired
};

Dustbin = ReactDnD.DropTarget('box', boxTarget, collectDropTarget)(Dustbin);

// Box
const boxStyle = {
    border: '1px dashed gray',
    backgroundColor: 'white',
    padding: '0.5rem 1rem',
    marginRight: '1.5rem',
    marginBottom: '1.5rem',
    cursor: 'move',
    float: 'left'
};

const boxSource = {
    beginDrag(props) {
        return {
            name: props.name
        };
    },
    
    endDrag(props, monitor) {
        const item...