email.js

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;


var EmailWidget = React.createClass({
	getInitialState: function() {
		return {
			buttonEnabled: false
		};
	},

	render: function() {
		var buttonClasses = React.addons.classSet({
			'btn btn-success btn-default': true,
			'disabled': !this.state.buttonEnabled
		});

		return (
			<div className="input-group input-group-md">
				<input ref="email"
					   type="text"
					   placeholder="Begin by typing in your email address"
					   onChange={this.emailChanged}
					   onKeyPress={this.keyPressed}
					   className="form-control">
					<span className="input-group-btn">
						<button className={buttonClasses}
						        type="button"
								onClick={this.submitEmail}>
							<span className="glyphicon glyphicon-arrow-right" />
						</button>
					</span>
				</input>
			</div>
		);
	},

	componentDidMount: function() {
		this.refs.email.getDOMNode().focus();
	},

	emailChanged: function() {
		var email = this.refs.email.getDOMNode().value;

		this.setState({buttonEnabled: email.length > 0});
		this.props.emailChanged(email);
	},

	submitEmail: function() {
		var email = this.refs.email.getDOMNode().value;
		this.props.emailSubmit(email);
	},

	keyPressed: function(e) {
		var k = e.keyCode || e.which;
		if (k == 13) { // return pressed
			this.submitEmail();
		}
	}
});

var SignupWidget = React.createClass({
	getInitialState: function() {
		return {
			email: null,
			busy: false
		};
	},
	render: function() {
		var item = null;
		if (this.state.busy) {
			item = <div className="loader" />
		}
		else {
			item =
				<EmailWidget
					emailChanged={this.emailChanged}
					emailSubmit={this.emailSubmit} />
		}

		return(
			<div className="col-lg-6 col-lg-offset-3">
				<ReactCSSTransitionGroup transitionName="example">
					{ item }
				</ReactCSSTransitionGroup>
			</div>
		);
	}
	// ...
});