[通過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') ) ```