React side-effects

Now we'll implement the exact same UI using React. The aim is to illustrate that Immutable.js collections are helpful as the only library, or as a utility alongside many other libraries.

Application state

Application state in the previous example was kept in the DOM itself. For example, we had to query the DOM for checkbox nodes if we wanted to see if one of them was selected. With React components, state belongs in a component. Since our application is a simple one, we only need a single container, the app itself:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      episodes,
      query: '',
      title: true,
      date: false,
      director: false,
     ...