React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

HTML

<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
<script src="http://fb.me/react-with-addons-0.12.1.js"></script>
<body>
    <div id="content"></div>
    <script src="http://facebook.github.io/react/js/jsfiddle-integration.js"></script>
</body>

CSS

/* Stylesheet */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "Open Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
   	text-shadow: 1px 1px 1px rgba(0,0,0,0.004) !important;
	text-rendering: optimizeLegibility !important;
	-webkit-font-smoothing: antialiased !important;
}

#content{
	width: 100%;
	max-width: 400px;
	height: auto;
	margin: 100px auto 0;
}

#app-container #title{
	text-align: center;
	font-family: sans-serif;
	margin-bottom: 20px;
}

#list-container{
	list-style: none;
}

#list-container > li{
	height: 50px;
	background-color: #eeeeee;
	margin-bottom: 2px;
	text-align: center;
	line-height: 50px;
}

#list-container > li:last-child{
	margin-bottom: 10px;
}

#list-container #markComplete{
	display: block;
	float: right;
	margin-right: 10px;
	font-style: italic;
	color: #aaaaaa;
	cursor: pointer;
	-moz-user-select:none;
}

#form > button{
	width: calc(30% - 3px);
	height: 50px;
	outline: none;
	border: none;
	display: block;
	margin: 5px auto 0;
	cursor: pointer;
	font-size: 18px;
	color: #6c6c6c;
}

#form > input[type="text"]{
	width: 100%;
	height: 50px;
	padding: 10px;
	background-color: #f3f3f3;
	border:none;
	border-bottom: 1px solid #d7d8d8;
	font-size: 25px;
	float: none;
}

JavaScript 1.7

var TodoList = React.createClass({
  markComplete: function(event){
		alert("geelo");
	},
  
	render: function(){
		var createItem = function(itemText, index){
			return (
				<li key={index + itemText}>
					{itemText}<span id="markComplete" onclick={this.markComplete}>X</span>
				</li>
			);
		};
		return <ul id="list-container">{this.props.items.map(createItem)}</ul>
	}
});

var TodoApp = React.createClass({
	getInitialState: function(){
		return {items: [], text: ''};
	},

	onChange: function(e){
		this.setState({text: e.target.value});
	},

	handleSubmit: function(e){
		e.preventDefault();
		if(this.state.text.length <= 0) {
			console.log("Please input a Todo!");
			return;
		}
		var nextItems = this.state.items.concat([this.state.text]);
		var nextText = '';
		this.setState({items: nextItems, text: nextText});
	},

	render: function(){
		return(
			<div id="app-container">
				<h3 id="title">TODOS</h3>
				<TodoList items={this.state.items} />
				<form id="form" onSubmit={this.handleSubmit}>
					<input type="text" onChange={this.onChange} value={this.state.text} autofocus />
					<button>{'Add #' + (this.state.items.length + 1)}</button>
				</form>
			</div>
		);
	}
});

React.render(
	<TodoApp />,
	document.getElementById("content")
);