ryanbrunner/react_simple.js

## react_simple.js
<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
</head>
<body>
	<div id='hello'></div>

	<script type='text/jsx'>
		var HelloWorld = React.createClass({
			getInitialState: function() {
				return {
					name: this.props.name
				}
			},

			render: function() {
				return <div>
					<div>
						Who should I say hello to?
						<input type='text' name='name' value={ this.state.name } onChange={ this.nameChanged } />
					</div>
					Hello, { this.state.name }!
				</div>;
			},

			nameChanged: function(e) {
				this.setState({name: e.target.value});
			}
		});

		React.render(<HelloWorld name='Ryan' />, document.getElementById("hello"));


	</script>


</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title></title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
	</head>
	<body>
	<div id='hello'></div>

	<script type='text/jsx'>
	var HelloWorld = React.createClass({
	getInitialState: function() {
	return {
	name: this.props.name
	}
	},

	render: function() {
	return <div>
	<div>
	Who should I say hello to?
	<input type='text' name='name' value={ this.state.name } onChange={ this.nameChanged } />
	</div>
	Hello, { this.state.name }!
	</div>;
	},

	nameChanged: function(e) {
	this.setState({name: e.target.value});
	}
	});

	React.render(<HelloWorld name='Ryan' />, document.getElementById("hello"));


	</script>


	</body>
	</html>