MOBservable + React

Demonstrates mobservables in combination with react and the ObserverMixin

by Michel Weststrate

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://npmcdn.com/mobx@2.0.0/lib/mobx.umd.js"></script>
<script src="https://npmcdn.com/mobx-react@3.0.0/index.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>
    <div id="container">
        <div id="header">
            <h1>MobX + React shopping cart demo</h1>
            <a href="https://www.mendix.com/tech-blog/making-react-reactive-pursuit-high-performing-easily-maintainable-react-apps/">Blog post explaing React + observables</a>
            <a href="https://github.com/mobxjs/mobx">Github repo</a>
            
        </div>
        <div id="mount"></div>
        <div class="logview" id="logview">Rendering history:<br/></div>
        <button onClick="document.getElementById('logview').innerHTML = '';" style="float:right">clear</button>
    </div>

CSS

body {
	font-family: 'Georgia';
    background-size: cover;
    background-color: #2d3e4e;
}

h1 {
	font-family: 'Arial Black';
}

h2 {
	font-family: 'Arial Black';
	font-size: 12pt;	
}

#header {
	text-align: center;
}

#container {
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	width: 800px;
	padding: 40px;
	border-radius: 8px;
	background:rgba(255,255,255,1);
	box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.7);
}

#container table {
	width: 100%;
}

#container table td {
	width: 50%;
	vertical-align: top;
	padding: 20px;
}

ul {
	list-style: none;
    padding-left: 0px;
}

li {
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid #e2e2e2;
	padding: 10px 0;
}

button {
	float: right;
    margin: 0px 5px;
}

.price {
	float: right;
	font-style: italic;
	margin-right: 10px;
}

.logview {
	background-color: #e2e2e2;
	font-size: 10pt;
	color: black;
	padding: 10px 40px;
}

JavaScript 1.7

var react = React;

var autoNumber = 0;
/**
 * Data model
 */
function Article(name, price) {
    this.id = ++autoNumber; // UUID for this article
    mobx.extendObservable(this, {
        name: name,
        price: price
    });
}

function ShoppingCartEntry(article) {
    this.id = ++autoNumber; // UUID for this entry
    mobx.extendObservable(this, {
        article: article,
        amount: 1,
        price: function() {
            return this.article ? this.article.price * this.amount : 0;
        }
    });
}

function ShoppingCart() {
    mobx.extendObservable(this, {
        entries: [],
        total: function() {
            return this.entries.reduce(function(sum, entry) {
                return sum + entry.price;
            }, 0);
        }
    });
}

// Some available articles
var articles = mobx.observable([
    ["Funny Bunnies", 17.63],
    ["Awesome React", 23.95],
    ["Second hand Netbook", 50.00]
].map(function(e) {
    return new Article(e[0], e[1]);
}));

// Our shopping cart
var shoppingCart = new ShoppingCart();
// With a demo item inside
shoppingCart.entries.push(new ShoppingCartEntry(articles[0]));

/**
 * UI logic
 */
var ShopDemoView = mobxReact.observer(React.createClass({
    displayName: 'ShopDemoView',
    render: function() {
        log("Rendering ShopDemoView");
        return (<table>
                <tr>
                    <td colSpan="2">
                        <button onClick={this.update}>update some items</button>
                        <button onClick={this.generate}>create a lot of items</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <h2>Availale items</h2>
                        <ArticlesView articles={this.props.articles} />
                    </td>
                    <td>
                        <h2>Your shopping cart</h2>
                        <CartView cart={this.props.cart} />
                    </td>
                </tr>
    ...