React component-playground example using noRender option disabled

app.jsx

/* eslint new-cap:0 no-unused-vars:0 */

var React = require("react");
var ReactDom = require("react-dom");
var Playground = require("../src/index");

require("./styles/syntax.css");
require("./styles/codemirror.css");
require("./styles/demo.css");

var Button = require("./components/button");
var componentExample = require("raw!./component.example");

var DebugInfo = require("./components/debug-info");
var contextExample = require("raw!./examples/context.example");

var es6Example = require("raw!./examples/es6.example");
var noRenderExample = require("raw!./examples/noRender.example");

var Index = React.createClass({
  render() {
    return (
      <div className="component-documentation">
        <h2>No Render</h2>

        <Playground
          codeText={noRenderExample}
          noRender={false}
          collapsableCode={true}
          scope={{React: React, ReactDom: ReactDom}}/>

        <h2>Default</h2>

        <Playground
          codeText={componentExample}
          scope={{React: React, Button: Button}}/>

        <h2>Collapsable Code</h2>

        <Playground
          codeText={componentExample}
          scope={{React: React, Button: Button}}
          collapsableCode={true}/>

        <h2>Collapsable Code (Expanded by Default)</h2>

        <Playground
          codeText={componentExample}
          scope={{React: React, Button: Button}}
          collapsableCode={true}
          initiallyExpanded/>

        <h2>Prop Descriptions</h2>

        <Playground
          codeText={componentExample}
          scope={{React: React, Button: Button}}
          propDescriptionMap={{
            buttonStyle: "style object for inline styles"
          }}
          docClass={Button}
          collapsableCode={true}/>

        <h2>With Context</h2>

        <Playground
          context={{environment: "staging"}}
          codeText={contextExample}
          scope={{React: React, DebugInfo: DebugInfo}}/>

        <h2>ES6 Console</h2>

        <Playground
          codeText={es6Example}
          es6Console={true}
          scope={{React: React, Button: Button}}/>
      </div>
    );
  }
});

ReactDom.render(<Index/>, document.getElementById("content"));

noRender.example

const { Component, PropTypes } = React;
const { render } = ReactDom;

class Button extends Component {

  constructor(props) {
  	super(props);
    this.clickAction = this.clickAction.bind(this);
  }

  static propTypes: {
    onClick: PropTypes.func.isRequired
  }

  clickAction() {
    const { onClick = (a)=>a } = this.props;
    onClick();
  }

  render(){
    return (
      <button onClick={this.clickAction}>click me!</button>
    );
  }
}

class ComponentExample extends Component {
  constructor(props) {
    super(props);
    this.state = { name: 'Matteo', code: 0 };

    this.clickAction = this.clickAction.bind(this);
  }

  clickAction() {
    const code = Math.random();
    this.setState({ code });
  }

  render() {
    const { name, code } = this.state;

    return (
      <div>
        <p>Hi {name} ({code})</p>
        <Button onClick={this.clickAction}/>
      </div>
    );
  }
}

render(<ComponentExample/>, mountNode);