此文章是翻译React Without JSX这篇React（版本v16.2.0）官方文档。

React Without JSX

JSX 对于使用React 不是必须的。当你不想在你的构建环境中设置编译，使用不带JSX 的React 是非常方便的。

每一个JSX 元素只是调用React.createElement(component, props, ...children) 的语法糖（syntactic sugar）。所以，任何你使用JSX 可以做的事情都可以使用纯JavaScript 来实现。

例如，下面代码使用JSX ：

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

可以被编译成不使用JSX 的代码：

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

如果你想要看看JSX 如何改变成JavaScript 的更多例子，你可以在this online Babel compiler 上尝试。

组件可以是一个字符串，也可以是一个React.Component 子类，也可以是一个纯函数的无状态组件.

如果你已经对写React.createElement 感到非常厌倦了，一个通用的方式是赋给一个简写：

const e = React.createElement;

ReactDOM.render(
  e('div', null, 'Hello World'),
  document.getElementById('root')
);

如果你使用React.createElement 的简写形式，它几乎和使用不带JSX 的React 一样方便。

或者，你可以参考社区项目，例如react-hyperscript 和hyperscript-helpers，它们提供更简洁的语法。