• Component structure.
• Every component corresponds with DOM element
• Written in JSX, compiled to JS

/** @jsx React.DOM */
var HelloMessage = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}</div>;
  }
});

React.renderComponent(<HelloMessage name="World"/>, mountNode);

/** @jsx React.DOM */
var HelloMessage = React.createClass({displayName: 'HelloMessage',
  render: function() {
    return React.DOM.div(null, "Hello ", this.props.name);
  }
});

React.renderComponent(HelloMessage({name: "John"}), mountNode); 

• https://github.com/bgerm/react-table-sorter-demo
• Shows off the ability to  interact between components
• Switch between sources and number of items returned

var App = React.createClass({
  getInitialState: function() {
    return {source: {limit: "200", source: "source1"}}; 
  }, 
  handleSourceChange: 
    function(source) { 
    this.setState({source: source}); 
  }, 
  render: function() { 
    return (
      <div>
        <DatSourceSelectors onSourceChange={this.handleSourceChange} 
          source={this.state.source} />
        <TableSorter dataSource={this.state.source} ..../>    );   } }); 

• No need for multiple sources
• Cut out App and DataSourceSelectors
• Allow for linking of cells
• Entire columns
• Individual cells

var config = { 
  sort: { column: "hexValue", order: "asc" }, 
  columns: { 
    colorName: { name: "Color Name", filterText: "", defaultSortOrder: "asc"},
    hexValue: { name: "Hex Value", filterText: "", defaultSortOrder: "asc",
      link: "/color?hex={cell}"},
    red: { name: "Red", filterText: "", defaultSortOrder: "asc"} 
  } 
};

{
  "id":1,
  "col1":"07c5a",
  "col2":348,
  "col3":"Jan_hus"
}

{
  "colorName": {"text":"red", "link":"/custom-link-for-red"},
  "hexValue": {"text":"#f00", "link":"/custom-link-for-red-hex-value"},
  "red":255 
}

loadData: function(dataSource) { 
  if (!dataSource) return; 
  $.get(dataSource).done( function(data) { 
    this.setState({items: data});
  }.bind(this))
}

if (request.status >= 200 && request.status < 400){ 
  data = JSON.parse(request.responseText); 
  data.forEach(function(item){ 
    for (var key in item) { 
      if(typeof item[key] !== 'object') { 
        item[key] = {"text":item[key]} 
      } 
    } 
  });
  this.setState({items: data}); 
} else { ... }