07-react-without-jsx.md

React Without JSX

• 英文原文： https://reactjs.org/docs/react-without-jsx.html

使用React时，JSX并不是必须要使用的。如果你不想在构建项目的时候配置JSX的编译的时候，也可以不使用JSX。

其实每一个JSX的元素都是React.createElement(component,props,...children)的语法糖而已。因此，所有你能通过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代码的更多例子，可以试试在线Babel编译器

组件可以由普通的字符串提供，也可以由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.