rstacruz/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
  <meta charset="utf-8">
  <title>React</title>
<style id="jsbin-css">
html, body {
  height: 100%;
}

body, button {
  font-family: sans-serif;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: block;
  border-bottom: solid 1px #eee;
  padding: 8px 15px;

}

.app {
  width: 300px;
  height: 500px;
  margin: 40px;
  background: white;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  overflow-y: auto;
}

.toolbar {
  padding: 15px;
  border-bottom: solid 1px #eee;
}

.message {
  display: block;
  margin: 200px 40px;
  font-size: 2em;
  text-align: center;
  color: #ddd;
}

button {
  cursor: pointer;
  border: solid 1px dodgerblue;
  color: dodgerblue;
  background: white;
  border-radius: 4px;
  height: 30px;
  line-height: 28px;
  padding: 0 15px;
}

button:hover {
  background: dodgerblue;
  color: white;
}
</style>
</head>
<body>
<script id="jsbin-javascript">
"use strict";

var _defineProperty = function (obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); };

/*
 * Helper to consume promises in a react component.
 *
 *     this.setPromise('list', promise);
 *
 * This will make the following states available:
 *
 * - list.loading
 * - list.result
 * - list.error
 */

var PromiseMixin = {
  setPromise: function setPromise(prop, promise) {
    var _this = this;
    this.setState(_defineProperty({}, prop, { loading: true }));
    return promise.then(function (result) {
      _this.setState(_defineProperty({}, prop, { result: result }));
    }, function (err) {
      _this.setState(_defineProperty({}, prop, { err: err }));
    });
  }
};

/*
 * Fetch AJAX data and return a promise.
 * Can resolve in an error or in data.
 */

function fetchNames() {
  return $.getJSON("http://www.filltext.com/?rows=100&first={firstName}&last={lastName}").then(function (d) {
    return d.sort(function (a, b) {
      return a.first < b.first ? -1 : 1;
    });
  });
}

/*
 * A component that renders a list
 * that's fetched via fetchNames().
 */

var App = React.createClass({
  displayName: "App",
  mixins: [PromiseMixin],

  getInitialState: function getInitialState() {
    return { items: [] };
  },

  componentWillMount: function componentWillMount() {
    this.reload();
  },

  reload: function reload() {
    this.setPromise("list", fetchNames());
  },

  render: function render() {
    var list = this.state.list;

    return React.createElement(
      "div",
      { className: "app" },
      React.createElement(
        "div",
        { className: "toolbar" },
        React.createElement(
          "button",
          { onClick: this.reload },
          "Reload"
        )
      ),
      list.loading ? React.createElement(
        "span",
        { className: "message -loading" },
        "Loading..."
      ) : list.error ? React.createElement(
        "span",
        { className: "message -error" },
        "Error: ",
        list.error.message
      ) : React.createElement(List, { items: list.result })
    );
  }
});

var List = React.createClass({
  displayName: "List",
  render: function render() {
    return React.createElement(
      "ul",
      null,
      this.props.items.map(function (item, i) {
        return React.createElement(
          "li",
          { key: i },
          React.createElement(
            "strong",
            null,
            item.first
          ),
          " ",
          item.last
        );
      })
    );
  }
});

React.render(React.createElement(App, null), document.body);
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<script src="//fb.me/react-with-addons-0.12.0.js"><\/script>
  <meta charset="utf-8">
  <title>React</title>
</head>
<body>
</body>
</html></script>

<script id="jsbin-source-css" type="text/css">html, body {
  height: 100%;
}

body, button {
  font-family: sans-serif;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: block;
  border-bottom: solid 1px #eee;
  padding: 8px 15px;

}

.app {
  width: 300px;
  height: 500px;
  margin: 40px;
  background: white;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  overflow-y: auto;
}

.toolbar {
  padding: 15px;
  border-bottom: solid 1px #eee;
}

.message {
  display: block;
  margin: 200px 40px;
  font-size: 2em;
  text-align: center;
  color: #ddd;
}

button {
  cursor: pointer;
  border: solid 1px dodgerblue;
  color: dodgerblue;
  background: white;
  border-radius: 4px;
  height: 30px;
  line-height: 28px;
  padding: 0 15px;
}

button:hover {
  background: dodgerblue;
  color: white;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">/*
 * Helper to consume promises in a react component.
 *
 *     this.setPromise('list', promise);
 *
 * This will make the following states available:
 *
 * - list.loading
 * - list.result
 * - list.error
 */

var PromiseMixin = {
  setPromise(prop, promise) {
    this.setState({ [prop]: { loading: true }});
    return promise.then((result) => {
      this.setState({ [prop]: { result }});
    }, (err) => {
      this.setState({ [prop]: { err }});
    });
  }
}

/*
 * Fetch AJAX data and return a promise.
 * Can resolve in an error or in data.
 */

function fetchNames() {
  return $.getJSON('http://www.filltext.com/?rows=100&first={firstName}&last={lastName}')
    .then(d => d.sort((a,b) => a.first < b.first ? -1: 1));
}

/*
 * A component that renders a list
 * that's fetched via fetchNames().
 */

var App = React.createClass({
  mixins: [PromiseMixin],

  getInitialState() {
    return { items: [] };
  },

  componentWillMount() {
    this.reload();
  },

  reload() {
    this.setPromise('list', fetchNames());
  },

  render() {
    var list = this.state.list;

    return (
      <div className='app'>
        <div className='toolbar'>
          <button onClick={this.reload}>Reload</button>
        </div>

        {list.loading ?
          <span className='message -loading'>
            Loading...
          </span>
        :list.error ?
          <span className='message -error'>
            Error: {list.error.message}
          </span>
        :
          <List items={list.result} />
        }
      </div>
    );
  }
});

var List = React.createClass({
  render() {
    return (
      <ul>
        {this.props.items.map((item, i) =>
          <li key={i}><strong>{item.first}</strong> {item.last}</li>
        )}
      </ul>);
  }
});

React.render(<App />, document.body);</script></body>
</html>

## jsbin.nuvuca.css
html, body {
  height: 100%;
}

body, button {
  font-family: sans-serif;
}

ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}

li {
  display: block;
  border-bottom: solid 1px #eee;
  padding: 8px 15px;

}

.app {
  width: 300px;
  height: 500px;
  margin: 40px;
  background: white;
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  overflow-y: auto;
}

.toolbar {
  padding: 15px;
  border-bottom: solid 1px #eee;
}

.message {
  display: block;
  margin: 200px 40px;
  font-size: 2em;
  text-align: center;
  color: #ddd;
}

button {
  cursor: pointer;
  border: solid 1px dodgerblue;
  color: dodgerblue;
  background: white;
  border-radius: 4px;
  height: 30px;
  line-height: 28px;
  padding: 0 15px;
}

button:hover {
  background: dodgerblue;
  color: white;
}

## jsbin.nuvuca.js
"use strict";

var _defineProperty = function (obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); };

/*
 * Helper to consume promises in a react component.
 *
 *     this.setPromise('list', promise);
 *
 * This will make the following states available:
 *
 * - list.loading
 * - list.result
 * - list.error
 */

var PromiseMixin = {
  setPromise: function setPromise(prop, promise) {
    var _this = this;
    this.setState(_defineProperty({}, prop, { loading: true }));
    return promise.then(function (result) {
      _this.setState(_defineProperty({}, prop, { result: result }));
    }, function (err) {
      _this.setState(_defineProperty({}, prop, { err: err }));
    });
  }
};

/*
 * Fetch AJAX data and return a promise.
 * Can resolve in an error or in data.
 */

function fetchNames() {
  return $.getJSON("http://www.filltext.com/?rows=100&first={firstName}&last={lastName}").then(function (d) {
    return d.sort(function (a, b) {
      return a.first < b.first ? -1 : 1;
    });
  });
}

/*
 * A component that renders a list
 * that's fetched via fetchNames().
 */

var App = React.createClass({
  displayName: "App",
  mixins: [PromiseMixin],

  getInitialState: function getInitialState() {
    return { items: [] };
  },

  componentWillMount: function componentWillMount() {
    this.reload();
  },

  reload: function reload() {
    this.setPromise("list", fetchNames());
  },

  render: function render() {
    var list = this.state.list;

    return React.createElement(
      "div",
      { className: "app" },
      React.createElement(
        "div",
        { className: "toolbar" },
        React.createElement(
          "button",
          { onClick: this.reload },
          "Reload"
        )
      ),
      list.loading ? React.createElement(
        "span",
        { className: "message -loading" },
        "Loading..."
      ) : list.error ? React.createElement(
        "span",
        { className: "message -error" },
        "Error: ",
        list.error.message
      ) : React.createElement(List, { items: list.result })
    );
  }
});

var List = React.createClass({
  displayName: "List",
  render: function render() {
    return React.createElement(
      "ul",
      null,
      this.props.items.map(function (item, i) {
        return React.createElement(
          "li",
          { key: i },
          React.createElement(
            "strong",
            null,
            item.first
          ),
          " ",
          item.last
        );
      })
    );
  }
});

React.render(React.createElement(App, null), document.body);
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
	<meta charset="utf-8">
	<title>React</title>
	<style id="jsbin-css">
	html, body {
	height: 100%;
	}

	body, button {
	font-family: sans-serif;
	}

	ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
	}

	li {
	display: block;
	border-bottom: solid 1px #eee;
	padding: 8px 15px;

	}

	.app {
	width: 300px;
	height: 500px;
	margin: 40px;
	background: white;
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	overflow-y: auto;
	}

	.toolbar {
	padding: 15px;
	border-bottom: solid 1px #eee;
	}

	.message {
	display: block;
	margin: 200px 40px;
	font-size: 2em;
	text-align: center;
	color: #ddd;
	}

	button {
	cursor: pointer;
	border: solid 1px dodgerblue;
	color: dodgerblue;
	background: white;
	border-radius: 4px;
	height: 30px;
	line-height: 28px;
	padding: 0 15px;
	}

	button:hover {
	background: dodgerblue;
	color: white;
	}
	</style>
	</head>
	<body>
	<script id="jsbin-javascript">
	"use strict";

	var _defineProperty = function (obj, key, value) { return Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); };

	/*
	* Helper to consume promises in a react component.
	*
	* this.setPromise('list', promise);
	*
	* This will make the following states available:
	*
	* - list.loading
	* - list.result
	* - list.error
	*/

	var PromiseMixin = {
	setPromise: function setPromise(prop, promise) {
	var _this = this;
	this.setState(_defineProperty({}, prop, { loading: true }));
	return promise.then(function (result) {
	_this.setState(_defineProperty({}, prop, { result: result }));
	}, function (err) {
	_this.setState(_defineProperty({}, prop, { err: err }));
	});
	}
	};

	/*
	* Fetch AJAX data and return a promise.
	* Can resolve in an error or in data.
	*/

	function fetchNames() {
	return $.getJSON("http://www.filltext.com/?rows=100&first={firstName}&last={lastName}").then(function (d) {
	return d.sort(function (a, b) {
	return a.first < b.first ? -1 : 1;
	});
	});
	}

	/*
	* A component that renders a list
	* that's fetched via fetchNames().
	*/

	var App = React.createClass({
	displayName: "App",
	mixins: [PromiseMixin],

	getInitialState: function getInitialState() {
	return { items: [] };
	},

	componentWillMount: function componentWillMount() {
	this.reload();
	},

	reload: function reload() {
	this.setPromise("list", fetchNames());
	},

	render: function render() {
	var list = this.state.list;

	return React.createElement(
	"div",
	{ className: "app" },
	React.createElement(
	"div",
	{ className: "toolbar" },
	React.createElement(
	"button",
	{ onClick: this.reload },
	"Reload"
	)
	),
	list.loading ? React.createElement(
	"span",
	{ className: "message -loading" },
	"Loading..."
	) : list.error ? React.createElement(
	"span",
	{ className: "message -error" },
	"Error: ",
	list.error.message
	) : React.createElement(List, { items: list.result })
	);
	}
	});

	var List = React.createClass({
	displayName: "List",
	render: function render() {
	return React.createElement(
	"ul",
	null,
	this.props.items.map(function (item, i) {
	return React.createElement(
	"li",
	{ key: i },
	React.createElement(
	"strong",
	null,
	item.first
	),
	" ",
	item.last
	);
	})
	);
	}
	});

	React.render(React.createElement(App, null), document.body);
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
	<script src="//fb.me/react-with-addons-0.12.0.js"><\/script>
	<meta charset="utf-8">
	<title>React</title>
	</head>
	<body>
	</body>
	</html></script>

	<script id="jsbin-source-css" type="text/css">html, body {
	height: 100%;
	}

	body, button {
	font-family: sans-serif;
	}

	ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
	}

	li {
	display: block;
	border-bottom: solid 1px #eee;
	padding: 8px 15px;

	}

	.app {
	width: 300px;
	height: 500px;
	margin: 40px;
	background: white;
	border-radius: 2px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	overflow-y: auto;
	}

	.toolbar {
	padding: 15px;
	border-bottom: solid 1px #eee;
	}

	.message {
	display: block;
	margin: 200px 40px;
	font-size: 2em;
	text-align: center;
	color: #ddd;
	}

	button {
	cursor: pointer;
	border: solid 1px dodgerblue;
	color: dodgerblue;
	background: white;
	border-radius: 4px;
	height: 30px;
	line-height: 28px;
	padding: 0 15px;
	}

	button:hover {
	background: dodgerblue;
	color: white;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">/*
	* Helper to consume promises in a react component.
	*
	* this.setPromise('list', promise);
	*
	* This will make the following states available:
	*
	* - list.loading
	* - list.result
	* - list.error
	*/

	var PromiseMixin = {
	setPromise(prop, promise) {
	this.setState({ [prop]: { loading: true }});
	return promise.then((result) => {
	this.setState({ [prop]: { result }});
	}, (err) => {
	this.setState({ [prop]: { err }});
	});
	}
	}

	/*
	* Fetch AJAX data and return a promise.
	* Can resolve in an error or in data.
	*/

	function fetchNames() {
	return $.getJSON('http://www.filltext.com/?rows=100&first={firstName}&last={lastName}')
	.then(d => d.sort((a,b) => a.first < b.first ? -1: 1));
	}

	/*
	* A component that renders a list
	* that's fetched via fetchNames().
	*/

	var App = React.createClass({
	mixins: [PromiseMixin],

	getInitialState() {
	return { items: [] };
	},

	componentWillMount() {
	this.reload();
	},

	reload() {
	this.setPromise('list', fetchNames());
	},

	render() {
	var list = this.state.list;

	return (
	<div className='app'>
	<div className='toolbar'>
	<button onClick={this.reload}>Reload</button>
	</div>

	{list.loading ?
	<span className='message -loading'>
	Loading...
	</span>
	:list.error ?
	<span className='message -error'>
	Error: {list.error.message}
	</span>
	:
	<List items={list.result} />
	}
	</div>
	);
	}
	});

	var List = React.createClass({
	render() {
	return (
	<ul>
	{this.props.items.map((item, i) =>
	<li key={i}><strong>{item.first}</strong> {item.last}</li>
	)}
	</ul>);
	}
	});

	React.render(<App />, document.body);</script></body>
	</html>