examples/index.html

<html>
<head>
  <meta charset="UTF-8">
  <title>react-experiments example</title>
  <link rel="stylesheet" type="text/css" href="./styles.css" />
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,500italic,700,700italic' rel='stylesheet' type='text/css'>
</head>
<body>
  <div class="examples-container"></div>
  <script src="http://cdn.jsdelivr.net/react/15.0.1/react.js"></script>
  <script src="http://cdn.jsdelivr.net/react/15.0.1/react-dom.js"></script>
  <script src="http://cdn.jsdelivr.net/react/0.13.3/JSXTransformer.js"></script>
  <script src="../node_modules/planout/dist/planout.js"></script>
  <script src="../dist/react-experiments.js"></script>
  <script type="text/javascript">
    /* This is the sample experiment taken from https://github.com/HubSpot/PlanOut.js/blob/master/examples/sample_planout_es5.js */

    Object.getOwnPropertyDescriptors = function getOwnPropertyDescriptors(obj) {
      var descriptors = {};
      for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
          descriptors[prop] = Object.getOwnPropertyDescriptor(obj, prop);
        }
      }
      return descriptors;
    };
     
    Function.prototype.extend = function extend(proto) {
        var superclass = this;
        var constructor;
     
        if (!proto.hasOwnProperty('constructor')) {
          Object.defineProperty(proto, 'constructor', {
            value: function () {
                // Default call to superclass as in maxmin classes
                superclass.apply(this, arguments);
            },
            writable: true,
            configurable: true,
            enumerable: false
          });
        }
        constructor = proto.constructor;
        
        constructor.prototype = Object.create(this.prototype, Object.getOwnPropertyDescriptors(proto));
        
        return constructor;
    };

    /* End extend helper */

    var DemoExperiment = window.planout.Experiment.extend({
      setup: function() {
        this.name = "SampleExperiment";
      },
      assign: function(params, args) {
        params.set(
          'foo',
          new window.planout.Ops.Random.UniformChoice({
            'choices': ['Variation A', 'Variation B'],
            'unit': args.id
          })
        );

        params.set(
          'test2',
          new window.planout.Ops.Random.UniformChoice({
            'choices': ['Num1', 'Num2'],
            'unit': args.id
          })
        );
      },
      configureLogger: function() {
        return;
      },
      log: function(stuff) {
        console.log(stuff);
      },
      getParamNames: function() {
        return this.getDefaultParamNames();
      },
      previouslyLogged: function() {
        return this._exposureLogged;
      }
    });
    window.userid = Math.floor(Math.random() * 1000);
    window.demo = new DemoExperiment({'id': userid});
  </script>
  <script type="text/jsx">
    var VariationExperiment = React.createClass({
      render: function() {
        return (
          <div className="card">
            <span>A single branch is rendered conditionally: </span>
            <ReactExperiments.ABTest experiment={window.demo} on='foo'>
              <ReactExperiments.When value='Variation A'>
                <strong>Variation A Component</strong>
              </ReactExperiments.When>
              <ReactExperiments.When value='Variation B'>
                <strong>Variation B Component</strong>
              </ReactExperiments.When>
              <ReactExperiments.Default>
                <strong>Default Component</strong>
              </ReactExperiments.Default>
            </ReactExperiments.ABTest>
          </div>
        );
      }
    });
    
    var FooComponent = React.createClass({
      contextTypes: {
        experimentParameters: React.PropTypes.object.isRequired
      },

      render: function() {
        return (
          <div className="card">
            Experiment param value passed down via context: <strong>{this.context.experimentParameters.foo}</strong>
          </div>
        );
      }
    });

    var TextComponent = React.createClass({
      render: function() {
        console.log('rendering');
        return (
          <div className="card">
            Experiment param value passed down via props: <strong>{this.props.foo}</strong>
          </div>
        );
      }
    });
    console.log(ReactExperiments);

    TextComponent = ReactExperiments.withExperimentParams(TextComponent);
    
    var ParametrizeExperiment = React.createClass({
      render: function() {
        return (
          <ReactExperiments.Parametrize experiment={window.demo} params={['foo']}>
            <TextComponent />
            <FooComponent />
          </ReactExperiments.Parametrize>
        );
      }
    });

    var ExperimentExamples = React.createClass({
      render: function() {
        return (
          <div className="wrap">
            <div className="logo text-center">
              <img src="./react-experiments.jpg" width="400" />
            </div>
            <div className="example">
              <h3>Parametrize Component:</h3>
              <ParametrizeExperiment />
            </div>
            <div className="example">
              <h3>ABTest Component:</h3>
              <VariationExperiment />
            </div>
          </div>
        );
      }

    });

    ReactDOM.render(
      <ExperimentExamples/>,
      document.getElementsByClassName('examples-container')[0]
    );
  </script>
</body>
</html>