现在react大红大紫,但它也有一个致命的缺陷,就是依赖于babel编译。随着浏览器的进化,react社区的许多语法糖都可以直接用,但jsx这个facebook的私货则没有办法了。换言之,jsx是我们直接用react的最大障碍。不处理它,就怎么得上babel,就得上webpack。

我们定义一个组件通常是这样

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

render方法是jsx出现的地方。

我们可以劫持一下这方法。

Component.prototype.render = function(){
    return this.compile(this.$jsx)
}

然后$jsx属性是用es6的模块字符串来定义JSX