ReactDOM.unmountComponentAtNode: Uncaught ReferenceError: ReactDOM is not defined - reactjs

Question

I practice react
I met this error : Uncaught ReferenceError: ReactDOM is not defined
when type ReactDOM.unmountComponentAtNode(document.body) on chrome console
Please help me check the problem
I try the code on JSbin and works well,so I think it's webpack problem,but I have no idea .
And I notice there are many way write React.render part when I google ,what's the difference?? which one is correct??
React.render(<App name='Vipul' />,document.body);
ReactDOM.render(<App name='Vipul' />,document.body);
React.renderComponents(<App name='Vipul' />,document.body);
Here is my code:
main.jsx
import React from 'react';
import ReactDOM from 'react-dom';
console.log('Start')
var App = React.createClass({
render: function(){
console.log('render');
return <h1 onClick={this.toggleState}>Hello</h1>
},
componentWillUnmount: function(){
//在console執行 ReactDOM.unmountComponentAtNode(document.body)
console.log('componentWillUnmount');
},
toggleState: function(){
this.setState({status: !this.state.status})
}
});
ReactDOM.render(<App name='Vipul' />,document.body);
webpack.config.js
var WebpackNotifierPlugin = require('webpack-notifier');
module.exports = {
entry: "./src/main.js",
output: {
filename: "./dist/bundle.js"
// filename: "./public/dist/bundle.js"
},
plugins: [
new WebpackNotifierPlugin()
],
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: "babel-loader",
query: {
presets: ['es2015', 'react']
}
}
]
},devtool: 'source-map'
};

Answer 1

ReactDOM available since 0.14.0, so
ReactDOM.render(<App name='Vipul' />,document.body);
should be fine. If you are using lower version of React then React.render
Secondly it is recommended not to render on document.body, rather create a div inside the body and render there.
I met this error : Uncaught ReferenceError: ReactDOM is not defined
when type ReactDOM.unmountComponentAtNode(document.body) on chrome console
when you use Webpack the React and ReactDOM will not be available globally. So, this code will only work inside the file/module where you have imported React & ReactDOM.

Answer 2

There is only one way to render React component in browser and it's this one:
ReactDOM.render(<App />, target);
All other are deprecated - renderComponent is renamed to render and moved from react package to react-dom package.
Also, do you need to call unmountComponentAtNode in your componentWillUnmount lifecycle method? In your particular case it does not make sense. React will unmount component for you - for free.
componentWillUnmount usually serves for clearing timeouts/intervals and/or canceling async operations (Promises, closing connections, ...);
Removing that call won't harm you, try it out.