I have setup react-hot-reload based on the getting started on npm. The first step was to add
// .babelrc
{
"plugins": ["react-hot-loader/babel"]
}
I have a single component app with a counter state and button that increments the states counter. When testing this out it appears to work, and retain its state with/without this plugin in my .babelrc when I add/remove random components in my render() method.
So my question is, what is this peice of the jigsaw meant to be doing? why is it required?
The App i'm using to test this,
import { hot } from 'react-hot-loader/root';
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {value:0};
}
handleButtonClick(event)
{
console.log("click");
this.setState( state => ({
value:state.value + 44
}));
}
render() {
return (
<div>
<div>
<a>asd</a>
<p>asssd</p>
<input></input>
<button onClick={this.handleButtonClick.bind(this)}></button>
2<div>{this.state.value}</div>
</div>
</div>
);
}
}
export default hot(App);