React Base Fiddle (JSX)

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

by slym12

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://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class Input extends React.Component {
    componentWillMount() {
        console.log('input component will mount');
    }
    
    componentWillUnmount() {
    		console.log('input component will unmount');
    }
    
    render() {
        return (
            <span>
                <input value={this.props.value} onChange={this.props.onChange}/>
            </span>
        );
    }
}

const HOC = (WrappedComponent) => {
     const Help = (props) => {
     return (
             <span>
                <WrappedComponent {...props}/>
                <p>{props.help}</p>
            </span>
         )
     };

    return Help;
}

class MyComponent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {value : 'start value'};
        this.element = HOC(Input);
    }

    onChange(event) {
        this.setState({value : event.target.value});
    }

    render() {
        return (
            <span>
                <this.element
                    value={this.state.value}
                    onChange={this.onChange.bind(this)}
                />
            </span>
        )
    }
}



ReactDOM.render(
  <MyComponent />,
  document.getElementById('container')
);