fson/.babelrc

## .babelrc
{
  "plugins": [
    "syntax-jsx",
    ["transform-react-jsx", { "pragma": "frzr.el" }]
  ],
  "presets": ["es2015"]
}

## index.html
<html>
  <head>
    <title>frzr with JSX</title>
    <link href="todo.css" rel="stylesheet">
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/frzr/0.20.0/frzr.js"></script>
    <script src="bundle.js"></script>
  </body>
</html>

## package.json
{
  "name": "frzr-jsx-demo",
  "version": "0.0.1",
  "scripts": {
    "build": "babel todo.js > bundle.js",
    "postinstall": "npm run build"
  },
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.10.1",
    "babel-plugin-syntax-jsx": "^6.8.0",
    "babel-plugin-transform-react-jsx": "^6.8.0",
    "babel-preset-es2015": "^6.9.0"
  }
}

## todo.css
body {
  font-family: sans-serif;
}
.todo.done .title {
  text-decoration: line-through;
}
.todo input[type="checkbox"] {
  float: left;
  margin-right: .5rem;
}

## todo.js
class Todo {
  constructor() {
    this.el = (
      <div className="todo">
        {this.done = <input type="checkbox" />}
        {this.title = <p className="title" />}
      </div>
    );
    this.done.onchange = () => {
      this.data.done = this.done.checked;
      this.update(this.data);
    };
  }

  update(data) {
    this.data = data;
    this.done.checked = data.done;
    this.title.textContent = data.title;

    if (data.done) {
      this.el.classList.add('done');
    } else {
      this.el.classList.remove('done');
    }
  }
}

class TodoApp {
  constructor() {
    this.data = [];

    this.el = (
      <div className="todo-app">
        <h1>Todo</h1>
        <div className="todos">
          {this.todoList = new frzr.List(Todo)}
        </div>
        {this.create =
          <form>
            {this.createInput = <input placeholder="Something to do" />}
            <button>Add</button>
          </form>
        }
        {this.clear = <button>Clear done</button>}
      </div>
    );

    this.create.onsubmit = () => {
      this.data.push({
        done: false,
        title: this.createInput.value,
      });
      this.update(this.data);

      this.createInput.value = '';

      return false;
    };

    this.clear.onclick = () => {
      this.update(this.data.filter((item) => !item.done));
    };
  }

  update(data) {
    this.data = data;
    this.todoList.update(data);
  }
}

const app = new TodoApp();

frzr.mount(document.body, app);
	{
	"plugins": [
	"syntax-jsx",
	["transform-react-jsx", { "pragma": "frzr.el" }]
	],
	"presets": ["es2015"]
	}
	<html>
	<head>
	<title>frzr with JSX</title>
	<link href="todo.css" rel="stylesheet">
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/frzr/0.20.0/frzr.js"></script>
	<script src="bundle.js"></script>
	</body>
	</html>
	{
	"name": "frzr-jsx-demo",
	"version": "0.0.1",
	"scripts": {
	"build": "babel todo.js > bundle.js",
	"postinstall": "npm run build"
	},
	"license": "MIT",
	"devDependencies": {
	"babel-cli": "^6.10.1",
	"babel-plugin-syntax-jsx": "^6.8.0",
	"babel-plugin-transform-react-jsx": "^6.8.0",
	"babel-preset-es2015": "^6.9.0"
	}
	}
	body {
	font-family: sans-serif;
	}
	.todo.done .title {
	text-decoration: line-through;
	}
	.todo input[type="checkbox"] {
	float: left;
	margin-right: .5rem;
	}
	class Todo {
	constructor() {
	this.el = (
	<div className="todo">
	{this.done = <input type="checkbox" />}
	{this.title = <p className="title" />}
	</div>
	);
	this.done.onchange = () => {
	this.data.done = this.done.checked;
	this.update(this.data);
	};
	}

	update(data) {
	this.data = data;
	this.done.checked = data.done;
	this.title.textContent = data.title;

	if (data.done) {
	this.el.classList.add('done');
	} else {
	this.el.classList.remove('done');
	}
	}
	}

	class TodoApp {
	constructor() {
	this.data = [];

	this.el = (
	<div className="todo-app">
	<h1>Todo</h1>
	<div className="todos">
	{this.todoList = new frzr.List(Todo)}
	</div>
	{this.create =
	<form>
	{this.createInput = <input placeholder="Something to do" />}
	<button>Add</button>
	</form>
	}
	{this.clear = <button>Clear done</button>}
	</div>
	);

	this.create.onsubmit = () => {
	this.data.push({
	done: false,
	title: this.createInput.value,
	});
	this.update(this.data);

	this.createInput.value = '';

	return false;
	};

	this.clear.onclick = () => {
	this.update(this.data.filter((item) => !item.done));
	};
	}

	update(data) {
	this.data = data;
	this.todoList.update(data);
	}
	}

	const app = new TodoApp();

	frzr.mount(document.body, app);