[通过babel查看转换](https://babeljs.io/repl/#?babili=false&browsers=&build=&builtIns=false&code_lz=GYVwdgxgLglg9mABACwKYBt1wBQEpEDeAUIogE6pQhlIA8AJjAG6IIDC6MEA1gLwFRkMAM4A6ZAEMw9dKg5duAXwB8ACQxZEAdzhl09AIS0A9IybKA3EUVEgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&lineWrap=true&presets=react&prettier=false&targets=&version=6.26.0&envVersion=) `JSX`并不是React应用中必须的。当你不想在你的开发环境中编译JSX时，你可以选择使用`React.createElement`。 实际上，每个`JSX element`只是`React.createElement(component,props,...children)`的语法糖(syntactic sugar)。所以，任何你通过JSX做的事情都能够通过createELement实现。 比如 ``` class Hello extends React.Component { render() { return <div>Hello {this.props.toWhat}</div>; } } ReactDOM.render( <Hello toWhat="World" />, document.getElementById('root') ); ``` 用createElement的话 ``` 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') ); ``` 可以发现`React.createElement`的第一个参数可以是一个**标签名**也可以是一个**组件名**。 如果你嫌`React.createElement`太长，你可以这样做 ``` const e = React.createElement; ReactDOM.render( e('div',null,'Hello World') ,document.getElementById('root') ) ```