January 19, 2017 03:28
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
 </head>
 <body>
  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.1/fetch.min.js"></script>
  <div id="app"></div>
  
 <script src="https://fb.me/react-15.1.0.js"></script>
 <script src="https://fb.me/react-dom-15.1.0.js"></script>

 <script id="jsbin-javascript">
 'use strict';

 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

 var _get = function get(_x3, _x4, _x5) { var _again = true; _function: while (_again) { var object = _x3, property = _x4, receiver = _x5; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x3 = parent; _x4 = property; _x5 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

 function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

 var FETCH_COMMENTS_URL = 'https://jsonplaceholder.typicode.com/comments';

 var fetchComments = function fetchComments() {
  var url = arguments.length <= 0 || arguments[0] === undefined ? FETCH_COMMENTS_URL : arguments[0];
  return fetch(url).then(function (response) {
    return response.ok ? response.json() : Promise.reject(response);
  })['catch'](function (error) {
    console.log("Error in fetching comments", error);
    return [];
  });
 };

 var CommentListContainer = (function (_React$Component) {
  _inherits(CommentListContainer, _React$Component);

  function CommentListContainer() {
    _classCallCheck(this, CommentListContainer);

    _get(Object.getPrototypeOf(CommentListContainer.prototype), 'constructor', this).call(this);
    this.state = this.initialState();
    this.updateState = this.updateState.bind(this);
  }

  _createClass(CommentListContainer, [{
    key: 'initialState',
    value: function initialState() {
      return {
        comments: [],
        isFetched: false
      };
    }
  }, {
    key: 'updateState',
    value: function updateState() {
      var comments = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];

      this.setState({
        comments: comments,
        isFetched: true
      });
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      fetchComments().then(this.updateState);
    }
  }, {
    key: 'render',
    value: function render() {
      console.log(this.state.comments);
      return !this.state.isFetched ? React.createElement(LoadingView, null) : React.createElement(CommentListView, { comments: this.state.comments });
    }
  }]);

  return CommentListContainer;
 })(React.Component);

 var LoadingView = function LoadingView() {
  return React.createElement(
    'div',
    null,
    'Loading...'
  );
 };

 var CommentListView = function CommentListView(_ref) {
  var comments = _ref.comments;
  return !comments.length ? React.createElement(NoCommentsFound, null) : React.createElement(
    'ul',
    null,
    comments.map(function (comment) {
      return React.createElement(
        'li',
        { key: comment.id },
        comment.body,
        '—',
        comment.name
      );
    })
  );
 };

 CommentListView.defaultProps = {
  comments: []
 };

 CommentListView.propTypes = {
  comments: React.PropTypes.array
 };

 var NoCommentsFound = function NoCommentsFound() {
  return React.createElement(
    'div',
    null,
    'No comments found'
  );
 };

 var App = function App() {
  return React.createElement(CommentListContainer, null);
 };

 ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
 </script>



 <script id="jsbin-source-javascript" type="text/javascript">const FETCH_COMMENTS_URL = 'https://jsonplaceholder.typicode.com/comments';

 const fetchComments = (url = FETCH_COMMENTS_URL) => (
  fetch(url)
    .then(response => response.ok ? response.json() : Promise.reject(response))
    .catch(error => {
      console.log("Error in fetching comments", error);
      return [];
    })
 );

 class CommentListContainer extends React.Component {
  constructor() {
    super();
    this.state = this.initialState();
    this.updateState = this.updateState.bind(this);
  }
  
  initialState() {
    return {
      comments: [],
      isFetched: false
    }
  }
  
  updateState(comments = []) {
    this.setState({
      comments,
      isFetched: true
    })
  }
  
  componentDidMount() {
    fetchComments().then(this.updateState)
  }

  render() {
    console.log(this.state.comments);
    return (
      !this.state.isFetched ? <LoadingView /> : (
        <CommentListView comments={this.state.comments} />
      )
    );
  }
 }

 const LoadingView = () => (
  <div>Loading...</div>
 );
      
 const CommentListView = ({ comments }) => (
  !comments.length ? <NoCommentsFound /> : (
    <ul>
    {
        comments.map((comment) => (
          <li key={comment.id}>
            {comment.body}—{comment.name}
          </li>
        ))
    }
    </ul>
  )
 );

 CommentListView.defaultProps = {
  comments: []
 }

 CommentListView.propTypes = {
  comments: React.PropTypes.array
 }

 const NoCommentsFound = () => (
  <div>No comments found</div>
 );

 const App = () => (
  <CommentListContainer />
 );  
     
 ReactDOM.render(<App />, document.getElementById('app'));</script></body>
 </html>
diff --git a/jsbin.nuneled.js b/jsbin.nuneled.js
 'use strict';

 var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

 var _get = function get(_x3, _x4, _x5) { var _again = true; _function: while (_again) { var object = _x3, property = _x4, receiver = _x5; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x3 = parent; _x4 = property; _x5 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

 function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

 var FETCH_COMMENTS_URL = 'https://jsonplaceholder.typicode.com/comments';

 var fetchComments = function fetchComments() {
  var url = arguments.length <= 0 || arguments[0] === undefined ? FETCH_COMMENTS_URL : arguments[0];
  return fetch(url).then(function (response) {
    return response.ok ? response.json() : Promise.reject(response);
  })['catch'](function (error) {
    console.log("Error in fetching comments", error);
    return [];
  });
 };

 var CommentListContainer = (function (_React$Component) {
  _inherits(CommentListContainer, _React$Component);

  function CommentListContainer() {
    _classCallCheck(this, CommentListContainer);

    _get(Object.getPrototypeOf(CommentListContainer.prototype), 'constructor', this).call(this);
    this.state = this.initialState();
    this.updateState = this.updateState.bind(this);
  }

  _createClass(CommentListContainer, [{
    key: 'initialState',
    value: function initialState() {
      return {
        comments: [],
        isFetched: false
      };
    }
  }, {
    key: 'updateState',
    value: function updateState() {
      var comments = arguments.length <= 0 || arguments[0] === undefined ? [] : arguments[0];

      this.setState({
        comments: comments,
        isFetched: true
      });
    }
  }, {
    key: 'componentDidMount',
    value: function componentDidMount() {
      fetchComments().then(this.updateState);
    }
  }, {
    key: 'render',
    value: function render() {
      console.log(this.state.comments);
      return !this.state.isFetched ? React.createElement(LoadingView, null) : React.createElement(CommentListView, { comments: this.state.comments });
    }
  }]);

  return CommentListContainer;
 })(React.Component);

 var LoadingView = function LoadingView() {
  return React.createElement(
    'div',
    null,
    'Loading...'
  );
 };

 var CommentListView = function CommentListView(_ref) {
  var comments = _ref.comments;
  return !comments.length ? React.createElement(NoCommentsFound, null) : React.createElement(
    'ul',
    null,
    comments.map(function (comment) {
      return React.createElement(
        'li',
        { key: comment.id },
        comment.body,
        '—',
        comment.name
      );
    })
  );
 };

 CommentListView.defaultProps = {
  comments: []
 };

 CommentListView.propTypes = {
  comments: React.PropTypes.array
 };

 var NoCommentsFound = function NoCommentsFound() {
  return React.createElement(
    'div',
    null,
    'No comments found'
  );
 };

 var App = function App() {
  return React.createElement(CommentListContainer, null);
 };

 ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>
	<body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.1/fetch.min.js"></script>
	<div id="app"></div>

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

	<script id="jsbin-javascript">
	'use strict';

	var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

	var _get = function get(_x3, _x4, _x5) { var _again = true; _function: while (_again) { var object = _x3, property = _x4, receiver = _x5; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x3 = parent; _x4 = property; _x5 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }

	function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

	var FETCH_COMMENTS_URL = 'https://jsonplaceholder.typicode.com/comments';

	var fetchComments = function fetchComments() {
	var url = arguments.length <= 0 \|\| arguments[0] === undefined ? FETCH_COMMENTS_URL : arguments[0];
	return fetch(url).then(function (response) {
	return response.ok ? response.json() : Promise.reject(response);
	})['catch'](function (error) {
	console.log("Error in fetching comments", error);
	return [];
	});
	};

	var CommentListContainer = (function (_React$Component) {
	_inherits(CommentListContainer, _React$Component);

	function CommentListContainer() {
	_classCallCheck(this, CommentListContainer);

	_get(Object.getPrototypeOf(CommentListContainer.prototype), 'constructor', this).call(this);
	this.state = this.initialState();
	this.updateState = this.updateState.bind(this);
	}

	_createClass(CommentListContainer, [{
	key: 'initialState',
	value: function initialState() {
	return {
	comments: [],
	isFetched: false
	};
	}
	}, {
	key: 'updateState',
	value: function updateState() {
	var comments = arguments.length <= 0 \|\| arguments[0] === undefined ? [] : arguments[0];

	this.setState({
	comments: comments,
	isFetched: true
	});
	}
	}, {
	key: 'componentDidMount',
	value: function componentDidMount() {
	fetchComments().then(this.updateState);
	}
	}, {
	key: 'render',
	value: function render() {
	console.log(this.state.comments);
	return !this.state.isFetched ? React.createElement(LoadingView, null) : React.createElement(CommentListView, { comments: this.state.comments });
	}
	}]);

	return CommentListContainer;
	})(React.Component);

	var LoadingView = function LoadingView() {
	return React.createElement(
	'div',
	null,
	'Loading...'
	);
	};

	var CommentListView = function CommentListView(_ref) {
	var comments = _ref.comments;
	return !comments.length ? React.createElement(NoCommentsFound, null) : React.createElement(
	'ul',
	null,
	comments.map(function (comment) {
	return React.createElement(
	'li',
	{ key: comment.id },
	comment.body,
	'—',
	comment.name
	);
	})
	);
	};

	CommentListView.defaultProps = {
	comments: []
	};

	CommentListView.propTypes = {
	comments: React.PropTypes.array
	};

	var NoCommentsFound = function NoCommentsFound() {
	return React.createElement(
	'div',
	null,
	'No comments found'
	);
	};

	var App = function App() {
	return React.createElement(CommentListContainer, null);
	};

	ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">const FETCH_COMMENTS_URL = 'https://jsonplaceholder.typicode.com/comments';

	const fetchComments = (url = FETCH_COMMENTS_URL) => (
	fetch(url)
	.then(response => response.ok ? response.json() : Promise.reject(response))
	.catch(error => {
	console.log("Error in fetching comments", error);
	return [];
	})
	);

	class CommentListContainer extends React.Component {
	constructor() {
	super();
	this.state = this.initialState();
	this.updateState = this.updateState.bind(this);
	}

	initialState() {
	return {
	comments: [],
	isFetched: false
	}
	}

	updateState(comments = []) {
	this.setState({
	comments,
	isFetched: true
	})
	}

	componentDidMount() {
	fetchComments().then(this.updateState)
	}

	render() {
	console.log(this.state.comments);
	return (
	!this.state.isFetched ? <LoadingView /> : (
	<CommentListView comments={this.state.comments} />
	)
	);
	}
	}

	const LoadingView = () => (
	<div>Loading...</div>
	);

	const CommentListView = ({ comments }) => (
	!comments.length ? <NoCommentsFound /> : (
	<ul>
	{
	comments.map((comment) => (
	<li key={comment.id}>
	{comment.body}—{comment.name}
	</li>
	))
	}
	</ul>
	)
	);

	CommentListView.defaultProps = {
	comments: []
	}

	CommentListView.propTypes = {
	comments: React.PropTypes.array
	}

	const NoCommentsFound = () => (
	<div>No comments found</div>
	);

	const App = () => (
	<CommentListContainer />
	);

	ReactDOM.render(<App />, document.getElementById('app'));</script></body>
	</html>