<html>
  <head></head>
  <body></body>
</html>
div.wrapper { background:#DDD; padding:15px; }
var Wrapper = React.createClass({
  render: function() {
    return <div className="wrapper">
      {this.props.children}
    </div>;
  }
});

var HelloWorld = React.createClass({
    getInitialState: function() {
      return {
        greetings: []
      };
    },
  
    greet: function() {
      var name = this.props.name;
      this.setState({
        greetings: [
          "Hello, " + name + "!",
          "Salutations, " + name + "!",
          "Greetings, " + name + "!"
        ]
      });
    },
   
    renderGreetings: function() {
      var items = [];
      for (var i = 0; i < this.state.greetings.length; i++)
        items.push(<div>
          <br />
          <span>{this.state.greetings[i]}</span>
        </div>);
      return items;
    },
  
    render: function() {
        return <Wrapper>
          <button onClick={this.greet}>Greet</button>
          {this.renderGreetings()}
        </Wrapper>;
    }
});

React.render(new HelloWorld({ name: "Chris Harrington" }), document.body);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/chriscoyier/pen/yIgqi.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react/0.12.1/react.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/react/0.12.2/JSXTransformer.js