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 sets the query state, which causes the render() method to be called. The nice thing about this style of event handlers is that they're highly focused, setting the state of the component and letting the React machinery do the rest. Here's one of the checkbox elements:

<label>
  Title
  <input
    type="checkbox"
    checked={this.state.title}
    onChange={e => this.setState({
      title: e.target.checked
    })}
  />
</label>

The same approach is used here. The state of the DOM node is managed by the state of the React component. The state of the React component is manipulated by the event handlers.