React Base Fiddle (JSX)

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

by Michael Wagner

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.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<!--
Basic React Exercise

These 4 panes show HTML, Javascript, and CSS source, and the rendered web page result.  Though this exercise uses React.js, it doesn't assume any existing React experience.  Anything React-specific already has an example implementation on this page.

Feel free to consult any outside documentation.  Please do not share the link or contents for this exercise.

For this exercise, please do the following:

1. "Fork" this fiddle.  Make all the rest of the changes on your forked version.
2.  Change the "Item" React component to return a table row (<tr>) instead of a div.  Include columns for manufacturer, model, image, count, and meta.  The Add button should be displayed somewhere near the count.  The image should be displayed as a reasonably-sized thumbnail.
3.  Create a new React component named "Items" that returns a <table>.  When used in the Root component, it should accept a list of "items" as incoming data, like this: <Items items={this.state.items} />.  For each item data object passed in, the Items component should render an <Item> component inside its table.  The table should have a header row labelling each column.
4.  Add a new column to the table labeled "Total capacity".  The values in this column should be computed from 'dimensions', 'units', and 'count' data in each item, and should show the total volume of all items of that type, in cubic inches.
-->

<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>

CSS

/* Put CSS here */
td, th {
  outline: thin solid;
}

th {
  background-color: #888;
}

img {
    width: 300px;
}

JavaScript 1.7

var itemList = [
    { 
		manufacturer: "Rehrig",
        model: "RPC-6416X",
        image: "http://www.rehrigpacific.com/images/products/full/ARX6416001.jpg",
        count: 100,
        meta: {
        	dimensions: [60,40,17.2],
            units: "cm"
        }
    },
    { 
		manufacturer: "Rehrig",
        model: "RPC-6419X",
        image: "http://www.rehrigpacific.com/images/products/full/ARX6419001.jpg",
        count: 313,
        meta: {
        	dimensions: [60,40,20.2],
            units: "cm"
        }
    },
    { 
		manufacturer: "MacroPlastics",
        model: "44P-FV",
        image: "http://www.macroplastics.com/wp-content/uploads/2014/05/Shipper-Bin-Hero-Assembled-on-white.jpg",
        meta: {
        	dimensions: [48,44,30.75],
            units: "in"
        }
    }    
];

  
var Item = React.createClass({
  getInitialState: function() {
    return {
      count: this.props.item.count || 0
    }
  },
  
  onButtonClick: function(ev) {
    this.setState({
      count: this.state.count + 1
    });
  },
  
  getCapacity: function(that) {
  var capacity = that.props.item.meta.dimensions.reduce(
    function(previousValue, currentValue, index, array) {
      return previousValue * currentValue;
    }
  )
  if (that.props.item.meta.units == "cm") {
    capacity = capacity * 0.39;
  } 
  return (capacity * that.state.count).toFixed(2);
},
  
  render: function() {
    return <tr>
      <td>{this.props.item.manufacturer}</td>
      <td>{this.props.item.model}</td>
      <td><img src={this.props.item.image} /></td>
      <td>{this.props.item.meta.dimensions.join(", ")}</td>
      <td>{this.props.item.meta.units}</td>
      <td>{this.getCapacity(this)}</td>
      <td>Count: {this.state.count}</td>
      <td><button onClick={this.onButtonClick}>Add</button></td>
    </tr>;
  }
});

var Items = React.createClass({
  getInitialState: function() {
    items: this.state.items || []
  },
  
  render: function() {
    return <table>
      <Items...