Lispy React components

lispy-react.js

import React from 'react';
import ReactDOM from 'react-dom';

function html([type, props, ...children]) {
  return React.createElement(type, props, ...children.map((child) => {
    if (Array.isArray(child)) {
      return html(child);
    } else {
      return child;
    }
  }));
}

class TextField extends React.Component {
  render() {
    return html(
      ['input', { type: 'text',
                  value: this.props.value,
                  onChange: this.onChange.bind(this) }]);
  }

  onChange(e) {
    this.props.onChange(e.target.value);
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state = { text: 'Hello' };
  }

  render() {
    return html(
      ['div', {},
        [TextField, { value: this.state.text,
                      onChange: this.onChange.bind(this) }],
        ['div', {}, this.state.text]]);
  }

  onChange(text) {
    this.setState({ text });
  }
}

ReactDOM.render(
  React.createElement(App),
  document.getElementById('app'));