Hello React - forms - using controlled components in a form. JsFiddle: http://jsfiddle.net/gh/gist/library/pure/b9d111c5a246ec210a43

fiddle.css

button {
    margin-left: 5px;
}

input {
    margin: 5px;
}

form {
 padding-right: 10px;   
}
}

fiddle.html

<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>

<div id="view"/>

fiddle.js

var TextBox = React.createClass({
    render: function() {
        return (
            <input className='form-control' 
                name={this.props.name}
                type='text' 
                value={this.props.value}
                onChange={this.props.onChange}/>
        );
    }
});

var ExampleForm = React.createClass({
    getInitialState: function () {
        return { form: { firstName: 'Ryan', lastName: 'Vice'} }
    },
    onChange: function(event) {
        this.state.form[event.target.name] = event.target.value;

        this.setState({form: this.state.form});
    },
    onSubmit: function(event) {
        event.preventDefault();
        
        alert('Form submitted. firstName: ' +
            this.state.form.firstName +
            ', lastName: ' +
            this.state.form.lastName);
            
    },
    render: function() {
       var self = this;
       return (
            <form onSubmit={this.onSubmit}>
                <TextBox name='firstName' 
                    value={this.state.form.firstName}
                    onChange={this.onChange}/>
                <TextBox name='lastName'
                    value={this.state.form.lastName}
                    onChange={this.onChange}/>
                <button className='btn btn-success' 
                	type='submit'>Submit</button>
            </form>
        );
    }
});

ReactDOM.render(
    <ExampleForm/>,
    document.getElementById('view'));

fiddle.manifest

name: ReactJs example by Ryan Vice - www.ViceSoftware.com
description: Hello React - forms - using controlled components in a form.
authors:
  - Ryan Vice
resources:
  - https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
normalize_css: no
wrap: h
panel_js: 3
panel_css: 0