此文章是翻译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 ：

  1. class Hello extends React.Component {
  2.   render() {
  3.     return <div>Hello {this.props.toWhat}</div>;
  4.   }
  5. }
  7. ReactDOM.render(
  8.   <Hello toWhat="World" />,
  9.   document.getElementById('root')
  10. );

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

  1. class Hello extends React.Component {
  2.   render() {
  3.     return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  4.   }
  5. }
  7. ReactDOM.render(
  8.   React.createElement(Hello, {toWhat: 'World'}, null),
  9.   document.getElementById('root')
  10. );

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

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

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

  1. const e = React.createElement;
  3. ReactDOM.render(
  4.   e('div', null, 'Hello World'),
  5.   document.getElementById('root')
  6. );

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

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