很多人用不惯 react 是因为 jsx，其实 jsx 只是个构建虚拟 dom 的一种方式，我们还有其他选择，比如 rml.

语法

部分来自 wxml， 包括基本的 for/if/import/include 等，增加 import-component 用于引入外部 react 组件. 详见： rml readme.

搭配 webpack 使用

详见 https://github.com/yiminghe/rml-loader/tree/master/tests , 示例如下：

webpack.config.js

      {
        test: /\.rml$/,
        exclude: /node_modules/,
        loaders: ['babel-loader', `rml-loader?allowImportComponent`],
      }

index.js

import render from './index.rml';

const Page = React.createClass({
 getInitialState() {
   return {
        items: [
          {
            title: 'item1',
            content:'content of item1',
          }, {
            title: 'item2',
            content:'content of item2',
          },
        ],
      };
 },
 onClick() {
     console.log('onClick');
  },
  render(){
    return render.call(this, {
      state: this.state
    });
  }
});

index.rml

<import src="./item.rml" />
<div>
    <div r:for="{{items}}" r:key="title">
        <p>index: {{index}}</p>
        <template is="item" data="{{...item}}" />
    </div>
</div>

item.rml

<import-component name="{Card}" from="antd" />

<template name="item">
    <Card title="{{title}}" onClick="{{this.onClick}}">
        {{content}}
    </Card>
</template>