JSFiddle - React, Tailwind, and code Playground

by Łukasz Bącik

HTML

<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<div id="content"></div>

JavaScript 1.7

/*** @jsx React.DOM */

var PersonApp = React.createClass({
	getInitialState:function() {
		return {data:[], first:'', last:''}
	},
	onChangeFirst:function(e) {
		this.setState({first:e.target.value})
	},
	onChangeLast:function(e) {
		this.setState({last:e.target.value})
	},
	handleSubmit:function (e) {
		e.preventDefault();
		this.state.data.push({first:this.state.first, last:this.state.last});
		this.setState({first:'', last:''})
	},
	render:function() {
		return (
			<div>
				<h1>To jest test PersonApp</h1>
				<form onSubmit={this.handleSubmit}>
					<label for="imie">Imię</label><br />
					<input id="imie" type="text" value={this.state.first} onChange={this.onChangeFirst} /><br />
					<label for="nazwisko">Nazwisko</label><br />
					<input id="nazwisko" type="text" value={this.state.last} onChange={this.onChangeLast} /><br />

					<button class="btn">Dodaj</button>
				</form>
				<PersonList data={this.state.data} />
			</div>
		)
	}
});

var Person = React.createClass({
	render:function() {
		return (
			<div>
				<h2>{this.props.last}, {this.props.first}</h2>
			</div>	
		)
	}
})

var PersonList = React.createClass({
	render:function() {
		var people = this.props.data.map(function(person) {
			return <Person first={person.first} last={person.last} />
		});
		return (
			<div>
			{people}
			</div>
		)
	}
})

React.renderComponent(<PersonApp />, document.getElementById('content'));