agaerig/gist:896b5db2d202cc4309d2

## gistfile1.txt
var React = require('react');

var SigForm = React.createClass({
    onTextChange: function() {
        var name = React.findDOMNode(this.refs.name);
        this.props.onTextChange(name.value);
    },

    render: function() {
        return (
                <form>
                    Name:<br />
                    <input type="text" name="wholename" ref="name" onChange={this.onTextChange} /> <br />
                    Email:<br />
                    <input type="text" name="email" /> <br />
                    Twitter (no "@", just username):<br />
                    <input type="text" name="twitter" /> <br />
                    Website(s) to display:<br />
                    <input type="checkbox" name="pitchfork" value="pitchfork.com" /> Pitchfork <br />
                    <input type="checkbox" name="dissolve" value="thedissolve.com" /> The Dissolve <br />
                    <input type="checkbox" name="review" value="thepitchforkreview.com" /> The Pitchfork Review
                    <br />Display address:<br />
                    <select>
                        <option value="none">Do not display (recommended)</option>
                        <option value="Brooklyn">Brooklyn</option>
                        <option value="Chicago">Chicago</option>
                        <option value="Los Angeles">Los Angeles</option>
                    </select>
                    <br />Display phone number:<br />
                    <select>
                        <option value="none-phone">Do not display (recommended)</option>
                        <option value="Brooklyn-phone">Brooklyn</option>
                        <option value="Chicago-phone">Chicago</option>
                        <option value="Los Angeles-phone">Los Angeles</option>
                    </select>
                </form>
        )
    }
});

var ResultText = React.createClass({
    render: function() {
        return (<textarea id="textarea" rows="20" cols="60" ref="">test</textarea>)
    }
});

var App = React.createClass({
    getInitialState: function() {
        return {nameField: 'test name'}
    },

    changeSig: function(v) {
        console.log(v);
        this.setState({nameField: v});
        var box = document.getElementById('textarea');
        box.value = v;
    },

    render: function() {
        return (
            <div>
                <div id="form">
                    <SigForm onTextChange={this.changeSig} />
                </div>
                <div id="output">
                    <ResultText />
                </div>
            </div>
        )
    }
});

React.render(<App />, document.getElementById('app'));

## gistfile2.txt
body, html {
    padding: 0;
    margin: 0;
    font-family: Arial;
}

body {
    font-size: 62.5%;
}

#header {
    width: 100%;
    color: #ef4139;
    text-transform: uppercase;
    text-align: center;
    padding: 2% 0;
    font-size: 2em;
}

div {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    font-size: 1.2em;
}

#form {
    width: 40%;
    max-width: 40%;
    float: left;
    background-color: azure;
    height: 80%;
    padding: 2%;
    font-size: 1em;
}

#form form * {
    margin-bottom: 2em;
}

#output {
    width: 60%;
    max-width: 60%;
    float: left;
    background-color: lightsteelblue;
    height: 80%;
    padding: 2%;
}

#output textarea {
    display: block;
    margin: 0 auto;
}

## gistfile3.txt
<!DOCTYPE html>
<html>
    <head>
        <title>Pitchfork Email Signature Generator</title>
        <link rel="stylesheet" href="./css/master.css" />
    </head>
    <body>
        <div id="header">Pitchfork Email Signature Generator</div>
        <div id="app"></div>
        <script type="text/javascript" src="./build/bundle.js"></script>
    </body>
</html>
	var React = require('react');

	var SigForm = React.createClass({
	onTextChange: function() {
	var name = React.findDOMNode(this.refs.name);
	this.props.onTextChange(name.value);
	},

	render: function() {
	return (
	<form>
	Name:<br />
	<input type="text" name="wholename" ref="name" onChange={this.onTextChange} /> <br />
	Email:<br />
	<input type="text" name="email" /> <br />
	Twitter (no "@", just username):<br />
	<input type="text" name="twitter" /> <br />
	Website(s) to display:<br />
	<input type="checkbox" name="pitchfork" value="pitchfork.com" /> Pitchfork <br />
	<input type="checkbox" name="dissolve" value="thedissolve.com" /> The Dissolve <br />
	<input type="checkbox" name="review" value="thepitchforkreview.com" /> The Pitchfork Review
	<br />Display address:<br />
	<select>
	<option value="none">Do not display (recommended)</option>
	<option value="Brooklyn">Brooklyn</option>
	<option value="Chicago">Chicago</option>
	<option value="Los Angeles">Los Angeles</option>
	</select>
	<br />Display phone number:<br />
	<select>
	<option value="none-phone">Do not display (recommended)</option>
	<option value="Brooklyn-phone">Brooklyn</option>
	<option value="Chicago-phone">Chicago</option>
	<option value="Los Angeles-phone">Los Angeles</option>
	</select>
	</form>
	)
	}
	});

	var ResultText = React.createClass({
	render: function() {
	return (<textarea id="textarea" rows="20" cols="60" ref="">test</textarea>)
	}
	});

	var App = React.createClass({
	getInitialState: function() {
	return {nameField: 'test name'}
	},

	changeSig: function(v) {
	console.log(v);
	this.setState({nameField: v});
	var box = document.getElementById('textarea');
	box.value = v;
	},

	render: function() {
	return (
	<div>
	<div id="form">
	<SigForm onTextChange={this.changeSig} />
	</div>
	<div id="output">
	<ResultText />
	</div>
	</div>
	)
	}
	});

	React.render(<App />, document.getElementById('app'));
	body, html {
	padding: 0;
	margin: 0;
	font-family: Arial;
	}

	body {
	font-size: 62.5%;
	}

	#header {
	width: 100%;
	color: #ef4139;
	text-transform: uppercase;
	text-align: center;
	padding: 2% 0;
	font-size: 2em;
	}

	div {
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box; /* Firefox, other Gecko */
	box-sizing: border-box; /* Opera/IE 8+ */
	font-size: 1.2em;
	}

	#form {
	width: 40%;
	max-width: 40%;
	float: left;
	background-color: azure;
	height: 80%;
	padding: 2%;
	font-size: 1em;
	}

	#form form * {
	margin-bottom: 2em;
	}

	#output {
	width: 60%;
	max-width: 60%;
	float: left;
	background-color: lightsteelblue;
	height: 80%;
	padding: 2%;
	}

	#output textarea {
	display: block;
	margin: 0 auto;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Pitchfork Email Signature Generator</title>
	<link rel="stylesheet" href="./css/master.css" />
	</head>
	<body>
	<div id="header">Pitchfork Email Signature Generator</div>
	<div id="app"></div>
	<script type="text/javascript" src="./build/bundle.js"></script>
	</body>
	</html>