aaronksaunders · July 17, 2015 13:15
diff --git a/simple-reactjs.html b/simple-reactjs.html
 <!DOCTYPE html>
 <html>

 <head>
  <title>Hello React!</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
 </head>

 <body>
  <div id="container"></div>
  <script type="text/jsx">
    var HelloContainer = React.createClass({
      getInitialState: function() {
        return {name: this.props.name};
      },
      displayName: 'Hello',
      onNameChange : function(_params) {
        this.setState({name:_params.name});
      },
      render: function() {
        return (
          <div className="">
            <AskNameForm name="Aaron Saunders" onNameChange={this.onNameChange}/>
            <Hello name={this.state.name}/>
          </div>
        );
      }
    });
    var Hello = React.createClass({
      getInitialState: function() {
        return {name: ""};
      },
      displayName: 'Hello',
      render: function() {
        return (
          <div className="">
            <div> Hello, {this.props.name} </div>
          </div>
        );
      }
    });

    var AskNameForm = React.createClass({
      getInitialState: function() {
        return {name: ""};
      },
      handleSubmit: function(e) {
        e.preventDefault();
        var name = React.findDOMNode(this.refs.name).value.trim();
        if (!name) {
          return;
        }

        this.props.onNameChange({'name':name});

        // TODO: send request to the server
        React.findDOMNode(this.refs.name).value = '';
        return;
      },
      render: function() {
        return (
            <form className="askNameForm"  onSubmit={this.handleSubmit}>
              <input type="text" placeholder="Your name" ref="name" />
              <input type="submit" value="Post" />
            </form>
        );
      }
    });

    React.render(
      <HelloContainer name="Aaron Saunders"/>, document.getElementById('container')
    );
  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Hello React!</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
	</head>

	<body>
	<div id="container"></div>
	<script type="text/jsx">
	var HelloContainer = React.createClass({
	getInitialState: function() {
	return {name: this.props.name};
	},
	displayName: 'Hello',
	onNameChange : function(_params) {
	this.setState({name:_params.name});
	},
	render: function() {
	return (
	<div className="">
	<AskNameForm name="Aaron Saunders" onNameChange={this.onNameChange}/>
	<Hello name={this.state.name}/>
	</div>
	);
	}
	});
	var Hello = React.createClass({
	getInitialState: function() {
	return {name: ""};
	},
	displayName: 'Hello',
	render: function() {
	return (
	<div className="">
	<div> Hello, {this.props.name} </div>
	</div>
	);
	}
	});

	var AskNameForm = React.createClass({
	getInitialState: function() {
	return {name: ""};
	},
	handleSubmit: function(e) {
	e.preventDefault();
	var name = React.findDOMNode(this.refs.name).value.trim();
	if (!name) {
	return;
	}

	this.props.onNameChange({'name':name});

	// TODO: send request to the server
	React.findDOMNode(this.refs.name).value = '';
	return;
	},
	render: function() {
	return (
	<form className="askNameForm" onSubmit={this.handleSubmit}>
	<input type="text" placeholder="Your name" ref="name" />
	<input type="submit" value="Post" />
	</form>
	);
	}
	});

	React.render(
	<HelloContainer name="Aaron Saunders"/>, document.getElementById('container')
	);
	</script>
	</body>

	</html>