JSFiddle - React, Tailwind, and code Playground

by James Hughes

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

JavaScript 1.7

/** @jsx React.DOM */

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

var Application = React.createClass({
    render: function() {
        return <div class="container">
            <div id="products">
                <h1>Products</h1>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Color</th>
                            <th>Description</th>
                            <th>Price</th>
                        </tr>                        
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <div class="test"></div>
                            </td>
                            <td>Some Colour</td>
                            <td>£12.30</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div id="cart">
                <h1>Shopping cart</h1>
                <ul>
                    <li>Product #1 x 3</li>
                </ul>
            </div>            
        </div>
    }
})
 
React.renderComponent(<Application />, document.body);