React is a great abstraction over the DOM. It's best used to implement a self-contained world derived from a central state. For example, if you want to make a reset button, you can do something like this:
class MainComponent extends React.Component { constructor(props) { super(props); this.initialState = { someValueThatTheUserChanges: 7, abc: 'a' }; this.state = this.initialState; } onResetClick(e) { e.preventDefault(); this.setState(this.initialState); } }
this.state
is a special attribute in
React that interacts with
its setState()
method to keep
everything in sync. this.initialState
is just an arbitrary place I'm storing the initial
value of the world. Connect
the onResetClick
handler to a button
like this:
<button type="button" onClick={this.onResetClick.bind(this)}>Reset</button>