React Base Fiddle (JSX)

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

by Muthuraman B

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.6.js"></script>
<script src="https://fb.me/react-dom-0.14.6.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

React

const rows = [
  {
    _id: "56cf587fe46adb3b8960afe2",
    price: 2000,
    title: "ps3",
    url: "www.google.com",
  }, {
    _id: "56db2bd434df9046e0643d22",
    price: 499,
    title: "HENRIKSDAL",
    url: "http://www.ikea.com/se/sv/catalog/products/S59847817/",
  }
];

var Hello = React.createClass({
  renderRow(props) {
    return (
      <tr>
        <td>{ props._id }</td>
        <td>{ props.price }</td>
        <td>{ props.title }</td>
        <td>{ props.url }</td>
      </tr>
    );
  },
  
  render: function() {
    return (
      <table>
        { this.props.rows.map(this.renderRow) }
      </table>
    );
  }
});

ReactDOM.render(
  <Hello rows={rows} />,
  document.getElementById('container')
);