看来你知道JSX转换为JS。
因此，如果不写JSX...

// jsx
var data = [1,2,3];

var nodes = <ul>{data.map(function(p,i) {
  return <li><Person key={i} id={p} /></li>; 
})}</ul>;

字符串
只需要用React.createElement()来写JS就可以了！

// js
var data = [1, 2, 3];

var nodes = React.createElement(
  "ul",
  null,
  data.map(function (p, i) {
    return React.createElement(
      "li",
      null,
      React.createElement(Person, { key: i, id: p })
    );
  })
);

型

我使用以下技巧（模仿React主页上的第一个示例）：

const __ = Object.assign(React.createElement, React.DOM);

var HelloMessage = React.createClass({
  render: function() {
    return __.div({}, 'Hello ', this.props.name);
  }
});

ReactDOM.render(__(HelloMessage, {name:"John"}), document.getElementById('root'));

字符串
以下是所有四个主页示例：

• https://jsfiddle.net/b4aj6gL9/
• https://jsfiddle.net/fd38ya0r/的
• https://jsfiddle.net/f4uqqrjv/的
• https://jsfiddle.net/905tL9k6/的

虽然这段代码使用了一个不熟悉的习惯用法，但__.前缀提供了一个强大的视觉助记符，它和JSX一样可读。

你也可以试试我们在Uqbar制作的库：
https://www.npmjs.com/package/njsx
它非常容易使用，并且提供了比React开箱即用界面更干净的界面。

NoJSX是一个轻量级的基于JSON的替代方案。你可以创建一个像下面这样的树...

- div.container.container--app
    -- div.jumbotron
        --- h1
        --- p

字符串
.通过定义用属性（包括children、props和type）表示的元素的树结构。这些Map了React.createElement的参数。

const pageHeader = {
  children: [
    {
      children: 'Hello World.',
      type: 'h1'
    },
    {
      children: 'Foobar.',
      type: 'p'
    }
  ],
  props: { className: 'jumbotron' },
  type: 'div'
};

const templateData = {
  children: [
    {
      props: { title },
      type: Helmet
    },
    pageHeader
  ],
  props: { className: 'container container--app' },
  type: 'div'
};

const template = new NoJSX(templateData);
return template.compile();

型

这是我的首选方法：https://github.com/simonrelet/react-pure-html-component-loader
这个组件应该让你编写纯html模板，作为react中的组件使用，而不会以如此可怕的方式混合HTML和JavaScript。
我看到仓库已经一年没有更新了，所以如果我们想使用react而不想在脚本中混入可怕的JSX，这家伙需要帮助。

📖正式文件**
Here is是一个官方文档，说明如何在没有JSX的情况下使用React。
除了提到的JSX的替代库之外，
我可以推荐React on lambda，它可以使react上的编码更实用。

“HyperScript帮助程序”是一个基于JavaScript的选项。
比createElement（通常是JSX）更简洁，但仍然是纯JavaScript，因此使用了JavaScript注解、数组、对象和函数等。
JSX：

<MyComponent className='className'>Hi</MyComponent>

字符串
与HyperScript辅助程式的比较：

MyComponent('.className', ['Hi'])

型
例如HTML to HyperScript converter。

React HyperScript Helpers library中的用法：

DOM组件真的很容易使用，只需导入就可以了。

import { div, h2 } from 'react-hyperscript-helpers';

export default () => div('.foo', [ h2('Hello, world') ]);

型
对于自定义组件，您可以创建一个工厂函数或使用h函数，类似于react-hyperscript。

//MyComponent
import { div, hh } from 'react-hyperscript-helpers';

export default hh(() => div('Nifty Component'));

//Container
import MyComponent        from './MyComponent';
import SomeOtherComponent from 'who-whats-its';
import { div, h }         from  'react-hyperscript-helpers';

export default () => div('.foo', [
  MyComponent(),
  h(SomeOtherComponent, { foo: 'bar' })
]);

型