Alfonso de la Osa botverse

## .babelrc
{
  "presets": ["es2015", "stage-1"],
  "plugins": [
    "transform-h-jsx",
    "transform-decorators-legacy"
  ]
}

## JSX-example.js
// having
const myElement = <div class="foo"><b>My text</b></div>;

// it renders to
const myElement = h('div', { className: 'foo' }, [
  h('b', ['My text'])
]);

## virtual-dom-example.js
var h = require('virtual-dom/h');
var diff = require('virtual-dom/diff');
var patch = require('virtual-dom/patch');
var createElement = require('virtual-dom/create-element');

// 1: Create a function that declares what the DOM should look like
const render = (count) => h('div', ['Count: ' + count]);

// 2: Initialise the document
var count = 0;      // We need some app data. Here we just store a count.

## mobx-example.js
import { observable, autorun } from 'mobx';

const state = { @observable count: 0 };

autorun(() => console.log(state.count)); // => 0
state.count++;                           // => 1

## package.json
{
  "scripts": {
    "dev": "webpack-dev-server --content-base build/",
    "..."
  },
  "..."
}

## mount.js
import { diff, patch } from 'virtual-dom';
import { autorun } from 'mobx';

export default function mount(element, view, state) {
  let tree = <noop/>;
  function render() {
    const newTree = view(state);
    const patches = diff(tree, newTree);
    element = patch(element, patches);
    tree = newTree;

## webpack.config.js
var webpack = require('webpack');

module.exports = {
  entry:  [
    './src/app',
  ],
  output: {
    path: 'build/',
    publicPath: '/',
    filename: 'bundle.js'

## index.html
<!doctype html>
<html>
  <body>
    <div id="app"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

## .babelrc
{
  "presets": ["es2015", "stage-1"],
  "plugins": [
    ["transform-h-jsx", {
      "pragma": "h"
    }],
    "transform-decorators-legacy"
  ]
}

## create-mobx-observable.js
import { observable } from 'mobx';

const state = { @observable n = 0; }
	{
	"presets": ["es2015", "stage-1"],
	"plugins": [
	"transform-h-jsx",
	"transform-decorators-legacy"
	]
	}
	// having
	const myElement = <div class="foo"><b>My text</b></div>;

	// it renders to
	const myElement = h('div', { className: 'foo' }, [
	h('b', ['My text'])
	]);
	var h = require('virtual-dom/h');
	var diff = require('virtual-dom/diff');
	var patch = require('virtual-dom/patch');
	var createElement = require('virtual-dom/create-element');

	// 1: Create a function that declares what the DOM should look like
	const render = (count) => h('div', ['Count: ' + count]);

	// 2: Initialise the document
	var count = 0; // We need some app data. Here we just store a count.
	import { observable, autorun } from 'mobx';

	const state = { @observable count: 0 };

	autorun(() => console.log(state.count)); // => 0
	state.count++; // => 1
	{
	"scripts": {
	"dev": "webpack-dev-server --content-base build/",
	"..."
	},
	"..."
	}
	import { diff, patch } from 'virtual-dom';
	import { autorun } from 'mobx';

	export default function mount(element, view, state) {
	let tree = <noop/>;
	function render() {
	const newTree = view(state);
	const patches = diff(tree, newTree);
	element = patch(element, patches);
	tree = newTree;
	var webpack = require('webpack');

	module.exports = {
	entry: [
	'./src/app',
	],
	output: {
	path: 'build/',
	publicPath: '/',
	filename: 'bundle.js'
	<!doctype html>
	<html>
	<body>
	<div id="app"></div>
	<script src="/bundle.js"></script>
	</body>
	</html>
	{
	"presets": ["es2015", "stage-1"],
	"plugins": [
	["transform-h-jsx", {
	"pragma": "h"
	}],
	"transform-decorators-legacy"
	]
	}
	import { observable } from 'mobx';

	const state = { @observable n = 0; }