React Base Fiddle (JSX)

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

by justindeal

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

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

JavaScript 1.7

const createContextClass = (contextProps) => {
/*    const Context = React.createClass({
        render() {
            const Type = this.props.type;
            return <Type {...props} {...this.props}>
                {this.props.children}
            </Type>;
        }
    });*/
    
    return (props) => ({
        render() {
            const Type = props.type;
            return <Type {...contextProps} {...props}>
                {props.children}
            </Type>;
        }
    });
    
    //return Context;
};

  /*
    const Context = (props) => ({
        render() {
            const {Type} = props.type;
            return <Type {...this.props} {...props}>
                {props.children}
            </Type>;
        }
    });
  */


const ContextProvider = React.createClass({

  render() {
  

  
    const Context = createContextClass(this.props);
  
    return (
      <span>{this.props.children(Context)}</span>
    );
  }
});
/*
const Inner = React.createClass({
  // If you remove this, it will work.
  // mixins: [React.addons.PureRenderMixin],

  render() {
    return (
      <span>x: {this.props.x}</span>
    );
  }
});

// This will render fine.
React.render(
    <ContextProvider x={5}>
    {(Context) => (
        <div>
            <Context type={Inner}/>
        </div>
    )}
    </ContextProvider>,
    document.getElementById('app')
);
// This will not update anything.
//React.render(<Outer/>, document.getElementById('app'));
*/

const Inner = React.createClass({
  // If you remove this, it will work.
  // mixins: [React.addons.PureRenderMixin],

  render() {
    return (
      <span>x: {this.props.x}</span>
    );
  }
});

React.render(
    <ContextProvider x={5}>
    {(Context) => (
        <div>
            <Context type={Inner}/>
        </div>
    )}
    </ContextProvider>,
    document.getElementById('app')
);