Creating Observer Components

The observer function / decorator from the mobx-package converts React components into observer components. The rule to remember here is that @observer class ComponentName {} is simply sugar for const ComponentName = observer(class { }). So all the following forms of creating observer components are valid:

Stateless Function Component (ES5)

const Timer = observer(function(props) {
    return React.createElement("div", {}, props.timer.elapsedTime)
})

Stateless Function Component (ES6)

const Timer = observer(({ timer }) =>
    <div>{ timer.elapsedTime }</div>
)

React Component (ES5)

const Timer = observer(React.createClass({
    /* ... */
}))

React Component Class (ES6)

const Timer = observer(class Timer extends React.Component {
    /* ... */
})

React Component Class with Decorator (ES.next)

@observer
class Timer extends React.Component {
    /* ... */
}