React Hello World Example with ES6+JSX

A basic Hello World widget with in browser JSX transformed + ES6 support

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.test-table {
  color: black;
  background-color: yellow;
  text-align: left;
}

td,th {
  border: 1px solid black;
}

td button {
  width: 100%;
  height: 100%;
}

JavaScript 1.7

class Table extends React.Component {
  render() {
    return (  <table className="test-table">
      <thead>
        <tr>
          <th>List</th>
          <th colSpan="2">Monday</th>
          <th colSpan="2">Tuesday</th>
        </tr>
        <tr>
          <th>Names</th>
          <th>Class 1</th><th>Class 2</th>
          <th>Class 1</th><th>Class 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Kev</td>
          <td><button>abc</button></td><td><button>def</button></td>
          <td><button>ghi</button></td><td><button>jkl</button></td>
        </tr>
        <tr>
          <td>Josh</td>
          <td><button>mno</button></td><td><button>pqr</button></td>
          <td><button>stu</button></td><td><button>vwx</button></td>
        </tr>
      </tbody>
    </table>);
  }
}

React.render( <Table /> , document.getElementById('container'));