R: Table & Detailed View

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<h2>Card Contents</h2>
<div class="js-app"></div>

SCSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}



.components-wrapper {
    display: flex;
    justify-content: space-between;
    width: 500px;
}

Babel + JSX

console.clear();

// Components Class
var WrapperComponent = React.createClass({
	render: function() {
    	return (
        	<div className="components-wrapper">
            	<TableComponent />
                <DetailedComponent />
            </div>
        )
    }
});

// Table Component Class
var TableComponent = React.createClass({
	render: function() {
    	return (
        	<div className="table-component">
            	<h3>Market Data</h3>
                <table className="table table-striped">
                    <thead>
                        <tr>
                            <th>Symbol</th>
                            <th>Currency</th>
                            <th>Ask</th>
                            <th>Bid</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>FRD</td>
                            <td>USD</td>
                            <td>23.49</td>
                            <td>24.49</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        )
    }
});

// Detailed Component Class
var DetailedComponent = React.createClass({
	getInitialState: function() {
    	return {
            tick: 0.25,
            bid: 24.25
        }
    },
    tickUp: function() {
        this.setState({
			bid: this.state.bid + this.state.tick
        });
    },
    tickDown: function() {
    	this.setState({
        	bid: this.state.bid - this.state.tick
        });
    },
	render: function() {
    	return (
        	<div className="detailed-component">
            	<h3>Detailed Row Data</h3>
                <div>
                    <h4>Symbol</h4>
                    <p>FRD</p>
                </div>
                <div>
                    <h4>Bid</h4>
                    <p>{this.state.bid}</p>
                </div>
                <div>
                	<div className="ticker">
                    	<button...