React Without JSX

对于React来说，并不一定需要使用JSX. 如果不想在构建环境下设置编译器，使用React而不使用JSX非常的方便。

每一个JSX元素都是调用React.createElement(component, props, ...children)的语法糖，因此，使用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的实例，你可以尝试在线Babel编译器%20%7B%0A%20%20return%20%3Cdiv%3EHello%20world!%3C%2Fdiv%3E%3B%0A%7D)

组件可以通过字符串提供，也可以通过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。