Mastering Immutable.js

Handling events and changing state

When our UI is first loaded, we'll need to bootstrap this App component. This is done using the ReactDOM.render() method:

ReactDOM.render(<App />, document.getElementById('app'));

This JSX syntax is unique to React. This renders the App component into the #app element. This causes the render() method to be called. This will return the same markup that's used in the preceding example. Here's the JSX for the search input element:

<input  placeholder="filter"  type="search"  value={this.state.query}  autoFocus  onInput={e => this.setState({    query: e.target.value  })}/>

The value of this input is set to the query state of this component. The onInput event handler changes the state of the component. Specifically, it ...