在定义React组件或者书写React相关代码,不管代码中有没有用到React这个对象,我们都必须将其import进来
import React from 'react'; // 下面的代码没有用到React对象,为什么也要将其import进来
import ReactDOM from 'react-dom';
ReactDOM.render( <App />, document.getElementById( 'editor' ) );
关于这个问题,我们看一下打包工具的.babelrc文件就全明白了
{
"presets": ["env"],
"plugins": [
["transform-react-jsx", {
"pragma": "React.createElement"
}]
]
}
因为打包工具是需要React.createElement
这个方法把你写的jsx转化为虚拟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' )
);