在定義React組件或者書(shū)寫(xiě)React相關(guān)代碼，不管代碼中有沒(méi)有用到React這個(gè)對(duì)象刃永，我們都必須將其import進(jìn)來(lái)
import React from 'react'; // 下面的代碼沒(méi)有用到React對(duì)象货矮，為什么也要將其import進(jìn)來(lái)
import ReactDOM from 'react-dom';
ReactDOM.render( <App />, document.getElementById( 'editor' ) );
關(guān)于這個(gè)問(wèn)題，我們看一下打包工具的.babelrc文件就全明白了
{
"presets": ["env"],
"plugins": [
["transform-react-jsx", {
"pragma": "React.createElement"
}]
]
}
因?yàn)榇虬ぞ呤切枰?code>React.createElement這個(gè)方法把你寫(xiě)的jsx轉(zhuǎn)化為虛擬DOM的斯够，就像這樣
import React from './react'
import ReactDOM from './react-dom'
class App extends React.Component {
render() {
return <h1>Hello,World!</h1>
}
}
const element = ( <div className="123">
<span>hello</span>
<div>world</div>
</div>
)
console.log('element', element)
ReactDOM.render(
<App />,
document.getElementById( 'root' )
);
